Typeface
Gotham designed by Hoefler & Co is a highly legible and compact typeface intended for signs and editorial design.
Gotham Light
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890
Gotham Book
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890
Gotham Medium
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890
Gotham Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890
Gotham Black
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890
Typographic Scale
A modular, pentatonic scale that matches the so called Classic Typographic Scale.
The scale works by having a fixed ratio – two – with a set number of ‘notes’ in between – five. In other words every fifth ‘note’, the font size doubles. The base font-size is 12 px set on the <html> element.
| a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | a | |
| Element | Frequency | SASS Function | Pixels |
|---|---|---|---|
| HTML root | 0 | ms(0) |
12 px |
| 1 | ms(1) |
14 px | |
| Table headings | 2 | ms(2) |
16 px |
| Tables | 3 | ms(3) |
18 px |
| Body, Subheadings | 4 | ms(4) |
21 px |
| Headings | 5 | ms(5) |
24 px |
| 6 | ms(6) |
28 px | |
| 7 | ms(7) |
32 px | |
| 8 | ms(8) |
36 px | |
| 9 | ms(9) |
42 px | |
| Page title | 10 | ms(10) |
48 px |
| 11 | ms(11) |
55 px | |
| 12 | ms(12) |
63 px | |
| 13 | ms(13) |
73 px | |
| 14 | ms(14) |
84 px | |
| 15 | ms(15) |
96 px | |
| 16 | ms(16) |
110 px | |
| 17 | ms(17) |
127 px | |
| 18 | ms(18) |
146 px | |
| 19 | ms(19) |
167 px | |
| 20 | ms(20) |
192 px |