Typography in branding

Member lesson

Brand type scale

Lesson 6 of 8 in Typography in branding.

Typographic Scales in Web Design & UI Design · Jesse Showalter
Lesson

A type scale is a short list of permitted sizes with names and jobs. It exists so that two people laying out different pages arrive at the same typography without consulting each other.

46px34px25px19px14pxratio 1.33 · six steps, not fourteen
A modular type scale, each step multiplied by a fixed ratio.
Two designers at desks facing away from each other lay out a poster and a leaflet with the same stepped grey bars, below a rack of five graded wooden blocks.
Two designers work back to back on different pages yet land on the same sizes, taken from one shared rack. A type scale lets people agree without asking each other.

Try it

Try the ratios against the brand's work. An app with six levels of heading wants a tight one, and a poster with three can take a wide one.

Ratio

Pick one ratio, multiply your base size by it repeatedly, and use only those sizes. The sizes are then related to each other instead of chosen one at a time, which is the entire benefit, and it is a real one, because most muddled-looking pages are muddled in their size steps rather than in their fonts.

The ratios are borrowed from musical intervals, and the golden ratio is on the list because it always is. None of them is correct. A tight ratio like 1.125 suits an interface with many levels; a wide one like 1.5 suits a poster with three. Choosing a wide ratio and then needing six levels is how people end up back where they started.

48.8pxHandgloves

39.1pxHandgloves

31.3pxHandgloves

25.0pxHandgloves

20.0pxHandgloves

16.0pxHandgloves

12.8pxHandgloves

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

    Why does a type scale name its steps instead of listing the sizes?

    • Named steps compress better in a stylesheet, so pages load faster
    • Pixel values cannot be reproduced in print, so names are the only portable unit
    • Names let each team pick its own sizes as long as the roles line up
    • A designer asked for 17px will round it when it suits them, and names let the brand redefine body once instead of editing every layout
  2. Question 2, locked

    Which of these words means this? “The fixed set of sizes the brand uses. Everything else is off-system.”

    • Set solid
    • Text face
    • Type scale
    • Language coverage
  3. Question 3, locked

    Which of these words means this? “Sizes generated from a ratio rather than chosen individually.”

    • Modular scale
    • Tabular figures
    • Named step
    • App and embedding

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.