Web Design Typography Trends for 2020 - Iceberg Web Design

Web Design Typography Trends for 2020

Typography Trends for Web Design in 2020 Header Image - old letter images

Good web design combines several components to create a mood and call to mind memories and associations. One of these components is typography.

Typography is the balance and interplay of letterforms on the page (or the screen).  It is a verbal and visual equation involving the meaning of the words with typefaces, point sizes, line lengths, line-spacing, and letter-spacing. Today typesetting is seen virtually everywhere one encounters printed text. Newspapers and magazines utilize tighter typefaces that work well around pictures. Books often use typesetting with roots in previous generations. Introductory paragraphs as well as the first letter in an article or in the chapter of a book are set in different typefaces, fonts, and sizes to grab the reader’s attention. Let’s look at some typography trends that we will see more of in 2020.

Fonts, Modern Typography

The digital representation of a typeface is called a font. The word font comes from Middle French, fonte, meaning “something that has been melted; a casting.” This refers to the process of casting metal type at a type foundry. When creating a typeface, typographers will incorporate the specific letterforms with characteristics that change from one type design to another.

  • Stroke weight – Weight refers to the relative thickness of a font’s stroke. Common classifications include light, regular, medium, and bold.
  • The forms of serifs – A serif is a small shape or projection that appears at the beginning or end of a stroke of a letter. A typeface without serifs is called a sans serif typeface, from the French word “sans” that means “without.”
  • Lengths of ascenders – Ascenders are an upward vertical stroke found in certain lowercase letters that extend beyond either the cap height or baseline. Examples include b, d, and h.
  • Lengths of descenders – Descenders are the downward vertical stroke in these letters. Examples include g, j, and y.
  • Counter shapes – A counter shape is an open space in a fully or partly closed area within a letter.
  • The finial styles – The finial is a somewhat tapered curved end on letters such as the bottom of c or e. It’s a swash or ornamental flourish, much like an extended ascender, or descender. A finial is often added as a variation to some characters in a typeface.

Typography Trend: Massive Fonts

These are fonts that can be read from across the room. The key to best utilizing these is with the adage, “less is more.” Big, bold typography can become overwhelming when there is too much of it. After all, if everything is bold, then nothing stands out any longer. That’s the point of large and/or bold fonts. It is better to use these big, bold fonts only for short pieces of text or headers and subheaders. This site for Sherer Bros. Lumber is a great example of the way large fonts can be used.

Scherer Bros. Lumber website screeshot showing use of typography in design

Site: https://www.schererbros.com/

Typography Trend:  Contrasting fonts

Contrasting fonts add variety to a website. This website for Borton Overseas incorporates a hand-written font, which adds a voice to the site. “What are you waiting for?” It is also a wonderful example of using two contrasting fonts.

Borton Overseas website using mixed font faces

Site: https://www.bortonoverseas.com/

Typography Trend: Classic Serif

Serif fonts have a classic look. They are fonts that elicit a level of comfort and trust. This website for Neighborhood Greening, has a gorgeous serif font that matches the font of the journal.

Neighborhood Greening Website Serif Typography

Site: https://neighborhoodgreening.org/


Some things to keep in mind:

  • Contrast is important. Heavy fonts have more impact on a neutral background.
  • Readability is essential. If users can’t read the print, it won’t serve your needs.
  • Sans Serif fonts scale well.

Our web designers know how to use fonts to meet the needs of your business. Give us a call to find out how we can best serve you!

Related Posts

Are you ready for Business Growth?

Our responsive team will help your website convert more leads.
Contact us today!

This field is for validation purposes and should be left unchanged.
Skip to content