Typography in different elements

​Element ​Details

H1-Fortum-in-brief.jpg 

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>

Fortum has strong expertise in combined heat and power

Page description text
#000000, font-size: 16 px
 
Note! Looks same as H2 but in code marked as: <p class="contentDescription">
HTML example:
<p class="contentDescription"> Content text</p>
CHP technology combines heat and power production. CHP is a sustainable way to produce energy as it can utilise a diverse and flexible mix of energy sources.
Paragraph (body text)
Arial
#000000, font-size: 12 px
 
Note! In wide desktop font size bumped up one pixel!
HTML example: <p>Content text</p>

​Fortum in brief

​Secondary headline (H2)
#000000, font-size: 16 px

Note: It looks like description but is different in code!
HTML example: <h2>Headline</h2>

Fortum in brief

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

Link colors.png
​​Link:
#529900, font-size: 12 px
Link, hover: #F08C00, font-size: 12 px

HTML example: <a class="koontilinkki">Link</a>

​Fortum in brief

Content heading - H2 big green

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: <h2 class="ms-rteElement-H2-big-green">Fortum in brief</h2>

​Exceptions:
Releases-H2.JPG ​Fortum.com START PAGE:
 
Secondary headline (H2)
#346100, font-size: 16 px
Body text
#529900, font-size: 12 px

HTML example: <div class="teaser"> ..<h1>Headline</h1>.. </div>

 

8/12/2016