Typography in branding

Member lesson

Web font fallbacks and system stacks

Lesson 7 of 8 in Typography in branding.

Front End Center — Crafting Webfont Fallbacks · Front End Center
Lesson

A web font is a file that has to be downloaded before it can be used, so for the first moments of every fresh visit the page is set in something else. What that something else is, and how the swap is handled, is a brand decision that almost always gets left to a default.

primaryheadlines · the voicesecondarylong text · the worksysteminterfaces · already therea brand that licenses one weight has a system with one voicecount the seats before you fall in love with the family
Three type roles: one for headlines, one for text, one already on every device.
Two rows of three browser windows: the top row goes from blank to grey bars to jumping, rewrapped bars with a cross, and the bottom row keeps its bars steady with a tick.
Two web pages load their brand font. Above, the page sits blank and then jumps as lines rewrap. Below, a stand-in font of the same width swaps in with barely a shift.
Member

The rest of this is for members.

You have read the opening of this lesson. The rest of it comes with a membership.

One membership covers all four courses and Brands.

  • All lessons in the four Learn courses
  • All brand breakdowns in the Brands section
  • All quizzes, flashcards and crosswords
  • An AI teacher on every lesson, for up to 60 questions a day
  • All course material published during the membership

Price

Membership is from $12 a month on the Yearly plan, which is charged at $144 once a year. Lifetime access is $59, paid once.Membership is from ₹200 a month on the Yearly plan, which is charged at ₹2,400 + GST once a year. Lifetime access is ₹3,999 + GST, paid once.

Check what stuck

Members only

You can't take this check yet.

Members answer these 3 questions and keep the ticket for this lesson. Every lesson has one.

  1. Question 1, locked

    The whole page jumps when the brand font finishes loading. What fixes that?

    • Pick a fallback with a similar personality, so the letterforms barely change
    • Hide the text until the brand font has arrived
    • Pick a fallback with a comparable x-height and width, since the metrics matter more than the shapes
    • Load every weight up front so the swap happens only once
  2. Question 2, locked

    Which of these words means this? “What renders while the brand font loads, or if it never does.”

    • Bespoke logotype
    • Fallback
    • Desktop licence
    • FOUT and FOIT
  3. Question 3, locked

    Which of these words means this? “Flash of unstyled text, and flash of invisible text. Two ways of handling the wait, both visible.”

    • Language coverage
    • Bespoke logotype
    • FOUT and FOIT
    • Desktop licence

Elsewhere in the library

Hear about new courses.

Leave an email and we will tell you when something new lands. We do not write often.