Halftone. A demo website by ModulatoDarkroom

statement--type-statement-size

font
sans
size
statement · 40→190px
leading
0.786
tracking
-0.04
weight
900
wrap
balance
fluid
40 → 190px across 390–1440px

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

display--type-display-size

font
sans
size
display · 44→90px
leading
0.95
tracking
-0.03
weight
900
wrap
balance
fluid
44 → 90px across 390–1000px

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

title--type-title-size

font
sans
size
xl · 40px
leading
0.95
tracking
-0.03
weight
900
wrap
balance

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

subhead--type-subhead-size

font
sans
size
sub · 24→32px
leading
0.95
tracking
-0.03
weight
900
wrap
balance
fluid
24 → 32px across 390–1440px

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

body-large--type-body-large-size

font
serif
size
lg · 30px
leading
1.2
tracking
-0.01
weight
400
wrap
balance

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

body--type-body-size

font
serif
size
base · 24px
leading
1.32
tracking
-0.01
weight
400
wrap
balance
tablet
size sm
phone
size sm

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

small--type-small-size

font
sans
size
xs · 14px
leading
1.5
tracking
0
weight
400
wrap
balance

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

label--type-label-size

font
sans
size
xs · 14px
leading
1.5
tracking
0
weight
400
case
uppercase
wrap
balance

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

readout--type-readout-size

font
sans
size
xxs · 12px
leading
1.5
tracking
0
weight
400

A typeface has to work at every size a design asks of it, and a name cannot tell you whether it does. Read the setting instead: how the letters space themselves, where the lines break, how ascenders and descenders sit against the leading, whether the numerals 0123456789 hold their place in a column. Every style on this page is set in this same paragraph, so the only thing that changes from one to the next is the type itself — and because the box below is one height for all of them, the amount you can read is itself a measure of the size. Large styles fill it in two or three lines and run out; small ones carry the paragraph most of the way to its end. Look for the shapes that give a face away: the a and the g, the terminals on the c and the s, the distance between a capital I, a lowercase l and the figure 1. Then read a line at speed, and see whether the words hold together or fall apart into letters.

  • --paper#f4f1ea
  • --ink#231f20
  • --muted#7a7a75
  • --rule#d6d1c6
  • --paper-bright#ffffff
  • --dark-paper#14110f
  • --dark-ink#f4f1ea
  • --dark-muted#8b857c
  • --dark-rule#332e29
  • --dark-paper-bright#1c1916
  • --plate-c#00a0c6
  • --plate-m#d81e78
  • --plate-y#f5c400
  • --plate-k#231f20
  • --select-bg#ffffff
  • --select-fg#231f20