The section defines the appearance of text in different places on the Web pages, e.g. Headline, Lead text, Body text.
Summary
- Arial is the only font to be used on ABB's Web pages and applications.
- Sizes and colors have been specified for different types of text. The general rule is that Arial 12 px. is used for Body text, and Arial 11 px. is used for link lists, intro page text, etc.
- Note that if you are using CAWP to publish information, the font in the input templates must be Default Sans Serif with font size 10. CAWP's stylesheets will then present the text with Arial font on the Web page.
Here is a check-list to follow:
- Use descriptive link texts (instead of 'click here' links)
- Do not overrule the fonts and colors of the CAWP input templates
- Format the text in short sentences and use bullets to emphasize important points
- As a general rule, have in mind that writing for the Web is different from writing a brochure for printed media, and also think of users with disabilities.
Headline
| Font: | Arial Regular 22 px. |
| Line space: | 16 px. |
| Text color: | Default blue |
| Placement: | 5 px. from left/right Dotted line, 32 px. underneath the second level menu, or masthead (if present). |
Lead text
| Font: | Arial Bold 12 px. |
| Line space: | 16 px. |
| Text color: | Black |
| Placement: | 1 line space underneath the Headline. |
| Use: | Lead text is the introduction text to the page content. |
Body text
| Font: | Arial Regular 12 px. |
| Line space: | 16 px. |
| Text color: | Black.
(Text links embedded in the body: Link color) |
| Placement: | 1 line space underneath the Lead text or directly below the sub-headline. |
Sub-headline
| Font: | Arial Bold 12 px. |
| Line space: | 16 px. |
| Text color: | Default blue |
| Placement: | 1 line space underneath the previous paragraph, or 10 px. if the element above is a Dotted line. |
| Use: | Content template: Sub-headlines are inserted into the body text to break it into sections.
Intro template: The headlines in the intro template sections are set with Sub-headline font. |
Heading
- Separates different, but related content that appears in the Content area of intro pages, and in the Resource area.
- Appears with background color; different color on ABB Internet and ABB intranet.
- May be used for the same purpose in applications.
Example of Heading on ABB Internet.
BACKGROUND:
| Height: | 16 px. |
| Width: | The backgroud color should fill the width of the area the heading is used in, i.e. 408 px. in Content area, 195 px. in Resource area, and 614 px. if the full width is used. |
| Placement: | Pages with Resource area: Between the different resources groups.
Intro templates: Between different sections of intro texts. |
| Background color: | ABB Internet: Default grey
ABB intranet: Extra light intranet blue |
TEXT:
| Font: | Arial Regular CAPS 10 px. |
| Line space: | 12 px. |
| Text color: | Black |
| Placement: | 5 px. from left edge of the background area, vertically centered. |
Intro text
| Font: | Arial Regular 11 px. |
| Line space: | 14 px. |
| Text color: | Black |
| Optional: | A "Read more" link may be included at the end of the Intro text. The link text is set with link color. |
| Placement: | Directly below the Sub-headline. |
| Use: | Used on the short introduction texts of the Intro template
The same specifications are to be used when Intro texts appear in the Resource area of the Intro template. |
Example of Intro section.
Picture caption
| Font: | Arial Regular 11 px. |
| Line space: | 14 px. |
| Text color: | Black |
| Placement: | In conjunction with images. |
Resource area text
| Font: | Arial Regular 11 px. |
| Line space: | 14 px. |
| Text color: | Black |
| Placement: | In the Resource area, 15 pixels underneath the headlines. |
| Use: | Applied to link lists and similar types of resources. |
Interaction element text
| Font: | Arial Regular 10 px. |
| Background color: | Buttons: Default grey
Drop-downs: White |
| Text color: | Black |
| Placement: | In the Resource area, 15 pixels underneath the headlines. |
| Use: | Text on buttons, drop-downs, etc to interact with the user. |
Toolbox text
| Font: | Arial Regular 10 px. |
| Text color: | Link color |
| Placement: | In the Toolbox area. |
| Use: | Created by, Updated by.
Printer version, E-mail this page, Bookmark this page, Back to top. |
Copyright link
| Font: | Arial Regular 10 px. |
| Text color: | Link color |
| Placement: | At the bottom of the page (e.g. on this page). |
| Use: | The copyright link should be included by all applications. The application owner must read the copyright notice and ensure that the application is in compliance. |
Masthead title
- Used as a customized element in the Masthead
- See Masthead section for more information.
Site identifier
| Font: | Arial Bold 20 px. |
| Background color: | White |
| Text color: | Default blue |
| Placement: | In the Banner area |
| Use: | Used to state the name of the country on the different country sites on ABB Internet pages |