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 |