Skip to main content

Typography

WorldSkills uses Frutiger as the main font complimented with Inria as a serif companion. 

  • WorldSkills has licenses for these fonts for use on worldskills.org  
  • Members would need their own license and way of using these fonts online   
  • For more details about our fonts please see our brand book  

Contents

Typographic scale

WorldSkills uses a scale which assumes the user's browser has the usual 1rem = 16px.

$font-size-7xl: 7.5rem !default; // 120
$font-size-6xl: 5.625rem !default; // 90
$font-size-5xl: 3.75rem !default; // 60
$font-size-4xl: 2.5rem !default; // 40
$font-size-3xl: 2rem !default; // 32
$font-size-2xl: 1.5em !default; // 24
$font-size-xl: 1.25rem !default; // 20
$font-size-lg: 1.125rem !default; // 18
$font-size-base: 1rem !default; // 16
$font-size-sm: 0.875rem !default; // 14

This translates to headings as follows: 

H1

H2

H3

H4

H5
H6

It's possible to mark up a heading but alter the size using a CSS class, e.g.

<h1 class="h2">h1 Title with h2 size</h1>

Body copy

Body copy has a max-width to keep good measure (length of a line of text) and ensure readable text.  

 

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo iaculis urna, non lobortis tortor interdum in. Donec viverra, leo pharetra venenatis consequat, libero arcu molestie mauris, nec facilisis1 magna2 sem sed est. Nulla facilisi. Curabitur ac vestibulum nisl. Morbi hendrerit, sapien sit amet eleifend ornare, lectus ante semper mauris, a viverra purus ligula nec tellus.

Aliquam a diam ac augue interdum tincidunt. Donec et nunc eget sem venenatis iaculis. Cras est lorem, ultricies vitae venenatis eu, accumsan eu neque. Pellentesque at leo eu arcu ultrices posuere.

  1. Ordered list. Cras faucibus enim quis turpis tempus, sit amet tincidunt tellus interdum. Curabitur nisi tellus, ullamcorper quis pellentesque quis, fermentum condimentum dui.
  2. Duis faucibus odio sed posuere iaculis.
  3. Ut ac libero leo.

And a paragraph here.

  • Unordered list. Cras faucibus enim quis turpis tempus, sit amet tincidunt tellus interdum. Curabitur nisi tellus, ullamcorper quis pellentesque quis, fermentum condimentum dui.
  • Duis faucibus odio sed posuere iaculis.
  • Ut ac libero leo.

And a paragraph here.

Cube headings

Add a cube before a heading using the Styles > Cube icon in the editor or adding the CSS   class .ws-h-icon

H1 with cube icon

H2 with cube icon

H3 with cube icon

H4 with cube icon

H5 with cube icon
H6 with cube icon

Lead intro 

Make the text larger for an introduction using the Styles > Lead in the Concrete5 editor or adding the CSS class .lead

 

Example

Aliquam a diam ac augue interdum tincidunt. Donec et nunc eget sem venenatis iaculis. Cras est lorem, ultricies vitae venenatis eu, accumsan eu neque. Pellentesque at leo eu arcu ultrices posuere.

Inria / Serif font

Change the text to serif using the Styles > Serif font in the Concrete5 editor or adding the CSS class .text-serif

Note: we're using the serif font as a relief from Frutiger not a replacement so only use it sparingly.

 

Example

Aliquam a diam ac augue interdum tincidunt. 

Never use "Click here" for links. 

  • “Here” Conceals What Users Are Clicking 
  • Avoid using only verbs as anchors 
  • Try to end on a link 
  • Make Links Click with Users Without Saying “Click Here”

For more information please read this article about accessible and usable links from Smashing Magazine.

When a link has unusual behavior, like linking off-site or downloading a PDF, we should warn our users. 

 

Example

<a href="http://www.studica.com/ca/en/WorldSkills" target="_blank">studica.com/worldskills<span class="sr-only">(External link)</span><i aria-hidden="true" class="ml-1 fa fa-external-link"></i></a>

This code will warn screen readers about an external link and add an icon:

studica.com/worldskills(External link)

Example

When a link will download a PDF, try to tell the user and indicate how big the file is: 

Download the WorldSkills Vision 2025 (PDF, 3.8MB)