The most companies follow the same principle: Setting a base font size and then choosing a font ratio. Different use cases could then use different font ratios.

Use a font ratio

1. Set a base font size

2. Set a font ratio (use modularscale.com)

— Yesenia Perez-Cruz, Vox Media / Source (YouTube)

Consider editorial and functional pages

Our text types are based on the early design studies of the project, which were tasty editorial pages. We oriented on these pages to define our text types. We had no functional page design examples and did not consider tables etc. That’s why our increments were very big and didn’t match with the needs of functional pages. The next time I would prefer to use a scale number, because this is a consistent rule that should fit on all page types and it is comprehensible for every user, even if they have no understanding of the specific history of a project.

— Anna Stumpf, SinnerSchrader

Productive and expressive font ratios

IBM uses two type systems:

• Productive: For the products a system with less size contrast.
• Expressive: For marketing pages a system with more dramatic contrast range.

— Yesenia Perez-Cruz, Vox Media / Source (YouTube)

Multi brand approach

At Vox Media the type scale can be adjusted individually for every brand:

— Yesenia Perez-Cruz, Vox Media / Source (YouTube)

Example

Barnardo’s

• Base: 16px
• Scale: 1.125 (»major second scale«)