Skip to Content

Type Scale

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.

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.

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.

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.

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.

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.

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

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.

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.

Additional Features at Display Sizes

Starting at type scale 2, additional features are enabled, including discretionary ligatures: ct, st; and swash forms: Q

Line Heights at Display Sizes

Line heights at larger sizes maintain the vertical rhytm while ensuring enough space for the glyphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.