Content Typography & colours

2

Typography principles

• The objectives for typography in our web appearance are to help us maintain consistency with our overall brand identity and to ensure good legibility for the content.

• The basic guideline for our digital typography is that Arial should be used in most HTML-typography, as it is known to be a very user friendly font. The main headings (H1) for pages are exceptions, and e.g. HTML5 banner content may also use Corporate A or S fonts.

3

Typography in campaigns

• In campaign HTML5 (no more flash should be used as it is not visible to all devices!) etc. pictures with text we use two fonts, Corporate A and S (Mac and Windows, Open Type). Corporate A is Fortum’s main font, used in headlines and body copy. Corporate A is supported by Corporate S, which is suitable to create contrast. These print fonts can be requested from Tarja Hänninen: tarja.hanninen@fortum.com and web fonts from Kaisa Kukkonen kaisa.kukkonen@fortum.com. Please also inform Kaisa the domain (url) in which you will use the Corporate S or A fonts.

• We currently have a license to use these fonts up to 5 000 000 page views corporate wide.

4

Typography in different elements

Content page headline (H1) Wide Desktop: Corporate A, Regular, #529900, font-size: 32px, line height: 34px, tracking: -10Desktop & Tablet: Corporate A, Regular, #529900, font-size: 28px, line height: 30px, tracking: -10Mobile: Corporate A, Regular, #529900, font-size: 24px, line height: 26px, tracking: -10 Note different size for different devices!  HTML example: <h1>Headline</h1>

Page description text#000000, font-size: 12 px, font-weight: bold

Same for all devices. HTML example: <p class="contentDescription">Content text</p>

5

Typography in different elements

Paragraph (body text)#000000, font-size: 12 px Note! In wide desktop font size bumped up one pixel!

HTML example: <p>Content text</p>

Secondary headline (H2)#000000, font-size: 16 px HTML example: <h2>Headline</h2>

Secondary headline (H3)#000000, font-size: 12 px, font-weight: bold HTML example: <h3>Headline</h3>

6

Typography in different elements

Secondary headline (H2)#346100, font-size: 16 pxBody text#529900, font-size: 12 px

ONLY FOR FORTUM.COM START PAGE! HTML example: <div class="teaser">..<h1>Headline</h1>..</div>

Link:#529900, font-size: 12 pxLink, hover: #F08C00, font-size: 12 px HTML example: <a class="koontilinkki">Link</a>

7

Colour principles

• The web colour palette is first and foremost an adaptation of our overall brand identity colours used in other media. To ensure a clear and recognizable face for our brand it is essential that we maintain and support our digital colour palette.

• The colour palette is categorized in primary and secondary colours. The primary colours are the preferred colours which should dominate the overall visual appearance. The secondary colours are to be used in a more subtle way for specific elements and should never dominate the visual design. In banners also other colours according to the brand guidelines may be followed if needed.

8

Some usage principles Check Samuli’s image, Aleksi’s front page styles, which ones are right????

• The Fortum orange colour (#F08C00) has been reserved for customer Log in box on the country sites and for highlighting mouse-over links.

• The grey colour (#999999) has been reserved for lower priority links.

• Bright red colour (#FF0000) is used for the information about emergencies and errors.

• The Fortum dark green colour (#346100) has been reserved for other customer/product etc. related informative content on the country sites.To be applied also in the future?

• The medium green (#529900) has been reserved for web elements, such as links and buttons.?

9

Primary, Secondary and Neutral colours

10

Complementary colours