Serif vs Sans Serif – Know your font types

Scroll Down

Serif vs Sans Serif – Know your font types

Understanding typography and font types is an important skill for any designer. We look at two of the most prominent font types and how you can adapt them to your next project.

by Peter Burch ptburch 16 Mar, 2018 read time: 5 mins Comments

Knowledge of font types will not only will it help you decide complimentary type pairs, it will also help you to clearly explain design decisions and rationale to your clients.

Serif Fonts

Serif fonts are amongst the most popular forms of type and also the most traditional. A serif is a small line attached to the end of a stroke in a letter or symbol. These small lines can vary in length and weight and can be straight or angled. A typeface containing serifs is classed as a serif typeface. Some sources also refer to serif typefaces as "Roman", for example, “Times New Roman”.

The serif style is most famously used for typesetting within print such as newspapers and books. It is most suitable for body text and large display text.

The Times Website

The Times makes compelling use of serif fonts within web and print.

Historically, web and motion designers steered clear from serif fonts due to their clarity on screen, for instance, before the days of smartphones, tablets and HDMI, most computer and television screens ran at a relatively low resolution of 72 dots per inch, meaning that small serifs were unclear and impaired legibility. This is less often the case now as most smart devices and have a resolution of 220dpi and above.

When using serif fonts, try to limit your design to no more than 2 typefaces to avoid looking haphazard.

Sans Serif Fonts

Sans is a French word which translates to “without”.

As the etymology suggests, sans serif typefaces lack any embellishment on the letters, adopting a more simplified form. Sans serif letters can be thick or thin, short or tall, wide or condensed. The best sans serif fonts have sets at least 6 - 8 different weights, ranging from Ultralight (the thinnest) to Black (the thickest).

Healthy Back Bag

The Healthy Back Bag use sans serif fonts at multiple weights to place emphasis on key information. When using Ultralight or Thin fonts in print ensure they are at a reasonable point size. If they are too small they can often experience print issues affecting legibility. Credit: Design by March.

 

Often referred to simply as “sans” fonts, their style is equally adept for display fonts and body copy. The greatest usage, however, is within digital. The versatility of sans serif fonts and legibility on digital screens means they are the most prominently used style across websites and apps.

Connect Search Website

Connect Search use a combination of two sans serif fonts to create a sleek, stylish and modern design. Credit: Design by March.

 

Their ease of legibility resulted in most road and transport signage being changed to sans serif. Motorists have just a few moments to read and recognise signs – for this reason, they are generally in Title Case sans, for instance, in the UK the standard font is Transport while the New York metro system was famously converted to Helvetica.

Pairing Serif and Sans Serif Fonts

Serif fonts can be paired with sans serif fonts to harmonise and compliment your design. When used in a well-considered manner the combination can result in striking visuals.

Some excellent Serif / Sans Serif font pairings include:

  • Garamond / Helvetica
  • Utopia / Proxima Nova
  • Cardo / Josefin Sans
  • Minion / Avenir

Jewellery designer Julia Lloyd George blends Freight Display Pro with Lato to evoke a luxurious, classical design.

 

 

Enjoy this article?

Enter your details and we'll send you a quick e-mail when new posts are added.

Interested in what you've read here?

Drop us a line and we'll talk some more