Typography

Member lesson

Variable fonts

Lesson 22 of 34 in Typography.

Variable Fonts: Exploring the future of typography · Typography.Guru
Lesson

A variable font holds a range rather than a fixed set of styles. Instead of shipping nine weight files, one file describes the extremes and everything in between, and a renderer can produce any point along the axis.

width 100 → 800weightone file · every instance in between
A variable font's two axes, weight along one side and width along the other.
A row of nine switches and bulbs beside a single bulb on a dimmer dial, above an abstract shape growing gradually heavier along a dotted line.
Nine switches each light one fixed bulb, while a single dimmer gives any brightness in between. A variable font works like the dimmer: one file, any weight on the range.

Try it

Drag the weight axis. Every value between 200 and 800 comes out of the one font file.

Handgloves

200The quick brown fox

300The quick brown fox

400The quick brown fox

500The quick brown fox

600The quick brown fox

700The quick brown fox

800The quick brown fox

Weight axis

wght 400

One font file, every weight in between. A variable font stores the outlines once plus the instructions for moving them, so 437 is as available as 400, and a page can ship one file instead of six.

Weight and contrast are separate things. This slider adds mass to every stroke and leaves the RATIO between the thick and the thin roughly where it was. A Didone at 400 has more contrast than a grotesque at 800, and confusing the two is why "make it bolder" so often fails to fix a heading that was really suffering from too much contrast at too small a size.

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

    Which of these words means this? “A dimension along which the design varies. Weight, width, slant, optical size.”

    • Conjunct
    • Axis
    • Matra
    • Shirorekha
  2. Question 2, locked

    Which of these words means this? “A named position on the axes. What used to be a separate font file.”

    • Sign painter
    • Vernacular lettering
    • Total cost of ownership
    • Instance
  3. Question 3, locked

    Which of these words means this? “A standard axis with an agreed tag. Others can be defined by the designer.”

    • Cursive by nature
    • Registered axis
    • Libre
    • Reserved font name

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.