Type Scale

Draft This note is a draft. It may be missing or incorrectly formatted content.

Part of a series about Diplograph’s Design, this note is a mix of design documentation and test content.

Diplograph uses a modular type scale rather than the traditional printer’s scale.

At larger screen sizes, the major third 4 : 5 scale is used. At smaller screen sizes, the major second 8 : 9 scale is used.

Type Scale -1

Type Scale 0

Type Scale 1

Type Scale 2

Type Scale 3

Type Scale 4

Type Scale 5

Primary Types at Scale 0

Each of these paragraphs is set in the base type scale size and has the same line height. Due to variations in the type’s design and color they’re set at different point sizes, but they should still feel like they’re the same size.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Primary Types at Scale -1

This scale is used for the sidebar and figure captions.

Mixing Types at Scale -1

Lorem ipsum foo dolor sit FooBar amet, consectetur いろはにほへと adipiscing elit (external link) sed do eiusmod tempor INCIDIDUNT ut labore. ALIQUA

Mixing Types at Scale 0

These paragraphs mix types and should feel cohesive.

Lorem ipsum foo dolor sit FooBar amet, consectetur いろはにほへと adipiscing elit (external link) sed do (eiusmod tempor) incididunt.

The serif and sans-serif types aren’t usually mixed like this, but these samples provide another way of reconciling optical sizes.

About Diplograph

Type Scale

Primary Types at Scale 0

Primary Types at Scale -1

Mixing Types at Scale -1

Mixing Types at Scale 0

Additional Features at Display Sizes

Line Heights at Display Sizes

Notes Linking Here