Header Fonts and Body Fonts

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. It is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results.

Thermaflex will make use of the following font usage guidelines:

  • Two font families, one for headings and one for body texts to create a clear visual hierarchy and variety
  • Font-size variations, to bring contrast and distinction

tahoma-headers-arial-body

 

Distinctive Font

Tahoma is the new font for Thermaflex corporate communication.

tahoma.ttf_large

Tahoma is an excellent sans font for screen legibility and is found on both PC and Mac systems – it showcases slightly thicker than average strokes and is readable at all sizes. The font package itself includes properly rendered bold and italic styles as well as providing two alternative variants as well – ‘Light’, a thinner version that works nicely for headers, and ‘Display’, a bold mixed-case style. It’s been properly kerned and hinted for screen use as well.

 

Body Font

The default for body texts in normal letters, presentations and brochures is the well proven and universal Arial which has withstood the test of time and runs on any browser, device, screen.

Arial

Use it for

  • Body texts
  • Long running paragraphs
  • Email
  • Newsletter
  • Brochures
  • Tables
  • Powerpoints

Do not use it for

  • Document Titles
  • Paragraph Titles
  • Title Slides
  • Headlines in commercial messages
  • Call-to-actions in advertisements

Online fonts

Online, things are a bit more complicated as we don’t always have full control over the users system and installed fonts. A system of “font fallbacks” has to be foreseen.

  • Distinctive fonts: Tahoma, if not available fall back to Arial
  • Body fontArial

Arial is the standard fallback font that is to be used throughout the website. Typography should be clear and readable at a glance.

For optimum legibility the minimum size is 12 pixels. For buttons, repetitive links (“more”, “view statement” …) a font-size of 11pixels may be used.

Typography recommendations

In order to increase clarity and legibility, the choice of character sizes has to be limited to the following:

  • 24px, for page titles
  • 16px, for paragraph titles
  • 12px, as default  font
  • 11px, bold, for table headings
  • 11px Grey for footer and foot notes
  • 11px Pure Blue for hyperlinks

 

Resizing fonts has to be supported. Where this document makes reference to pixel values, they refer to minimal values. The style sheets should not use px definitions but a resizable unit (.em)

Modern browsers also support “full zooming” function which is a better way of ensuring optimal readability on large screens without sacrificing quality of the user experience.