Type Scale

Often times, websites devote a non-trivial amount of css to setting font-size. They declare an unnecessary amount of different font-sizes that upon inspection, don’t come close to resembling a sane type scale.

To create and design an easily readable interface, you don’t need more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice. Using the class extension namespaces you can set the font-size for any particular breakpoint that you desire.

Don’t spend time constantly overriding font-sizes in your css. If you don’t like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.

“The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection… In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years… This is the typographic equivalent of the diatonic scale.”

—Robert Bringhurst, The Elements of Typographic Style

Font sizes

A A A A A A A A
6rem (96px) 5rem (80px) 3rem (48px) 2.25rem (36px) 1.5rem (24px) 1.25rem (20px) 1rem (16px) .875rem (14px)

Examples

<h1 class="f-headline lh-solid">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f-subheadline lh-title">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f1 lh-title">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f2 lh-copy">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f3 lh-copy">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f4 lh-copy">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f5 lh-copy">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

<h1 class="f6 lh-copy">Title</h1>

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

Previous

Forms

Next

Measure

Reference

MDN - Font-size

tachyons-type-scale

v6.1.1 252 B
Declarations
36
Selectors
44
Max. Specificity Score
10
Size of Avg. Rule
1

Source code

src/_type-scale.css

/*

   TYPE SCALE
   Docs: http://tachyons.io/docs/typography/scale/

   Base:
    f = font-size

   Modifiers
     1 = 1st step in size scale
     2 = 2nd step in size scale
     3 = 3rd step in size scale
     4 = 4th step in size scale
     5 = 5th step in size scale
     6 = 6th step in size scale
     7 = 7th step in size scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
*/

/*
 * For Hero/Marketing Titles
 *
 * These generally are too large for mobile
 * so be careful using them on smaller screens.
 * */

.f-6,
.f-headline {
  font-size: 6rem;
}
.f-5,
.f-subheadline {
  font-size: 5rem;
}


/* Type Scale */

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */

@media (--breakpoint-not-small){
  .f-6-ns,
  .f-headline-ns { font-size: 6rem; }
  .f-5-ns,
  .f-subheadline-ns { font-size: 5rem; }
  .f1-ns { font-size: 3rem; }
  .f2-ns { font-size: 2.25rem; }
  .f3-ns { font-size: 1.5rem; }
  .f4-ns { font-size: 1.25rem; }
  .f5-ns { font-size: 1rem; }
  .f6-ns { font-size: .875rem; }
  .f7-ns { font-size: .75rem; }
}

@media (--breakpoint-medium) {
  .f-6-m,
  .f-headline-m { font-size: 6rem; }
  .f-5-m,
  .f-subheadline-m { font-size: 5rem; }
  .f1-m { font-size: 3rem; }
  .f2-m { font-size: 2.25rem; }
  .f3-m { font-size: 1.5rem; }
  .f4-m { font-size: 1.25rem; }
  .f5-m { font-size: 1rem; }
  .f6-m { font-size: .875rem; }
  .f7-m { font-size: .75rem; }
}

@media (--breakpoint-large) {
  .f-6-l,
  .f-headline-l {
    font-size: 6rem;
  }
  .f-5-l,
  .f-subheadline-l {
    font-size: 5rem;
  }
  .f1-l { font-size: 3rem; }
  .f2-l { font-size: 2.25rem; }
  .f3-l { font-size: 1.5rem; }
  .f4-l { font-size: 1.25rem; }
  .f5-l { font-size: 1rem; }
  .f6-l { font-size: .875rem; }
  .f7-l { font-size: .75rem; }
}