Content
Typography & colours
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.
2
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.
3
Typography in different elements
Content page headline (H1)
Wide Desktop: Corporate A, Regular, #529900, font-size: 32px, line
height: 34px, tracking: -10
Desktop & Tablet: Corporate A, Regular, #529900, font-size: 28px,
line height: 30px, tracking: -10
Mobile: 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>
4
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>
5
Typography in different elements
Secondary headline (H2)
#346100, font-size: 16 px
Body 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 px
Link, hover: #F08C00, font-size: 12 px
HTML example:
<a class="koontilinkki">Link</a>
6
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.
7
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.?
8
Primary, Secondary and Neutral colours
9
Complementary colours
10