Typography

As the primary way to communicate information, we set our text with care. We use typefaces that draw from the rich traditions of editorial typesetting while incorporating modern, flexible features.

Please note: Because of licensing restrictions, we cannot make the files for our typefaces available for direct download. If you need to share our fonts with an authorized vendor or third party, please contact a Design & Product team member.

ProPublica Typefaces

Tiempos

The Tiempos family by Kris Sowersby is a warm editorial serif influenced by Plantin, Galaxie Copernicus, and Times New Roman. We use two variations Tiempos in our work: Tiempos Text and Tiempos Headline.

Tiempos Text: Optimised for body copy, the text version of Tiempos has narrower letterforms with shorter ascenders and descenders — allowing for tight, compact column settings.

Use Tiempos Text for body text, captions, and other editorial text 16px or smaller.

Tiempos Headline: The headline version of Tiempos has sharper letterforms with higher contrast.

Use Tiempos Headline for headlines and editorial text larger than 16px.

Graphik

The Graphik family by Christian Schwartz is a modern geometric sans-serif influenced by mid-20th century Swiss poster typography.

It is friendly and flexible, with a wide range of weights and widths that allow it to be used across editorial design, user interfaces, and branding.

Use Graphik in presentations, user interfaces, navigation, and as the primary typeface in non-editorial contexts.

Type Scale

Our type scale is based on a 1.2 multiplier, in order to give us a broad range of sizes to choose from. In CSS, we prefer to use rem units everywhere.

$int: 1.2;

$scale0: 1rem; // 16px, base size
$scale-1: $scale0 / $int; // 13px
$scale-2: $scale-1 / $int; // 11px
$scale-3: $scale-2 / $int; // 9px
$scale1: $scale0 * $int; // 19px
$scale2: $scale1 * $int; // 23px
$scale3: $scale2 * $int; // 28px
$scale4: $scale3 * $int; // 33px
$scale5: $scale4 * $int; // 40px
$scale6: $scale5 * $int; // 48px
$scale7: $scale6 * $int; // 57px
$scale8: $scale7 * $int; // 69px

:root{
    --scale-3: #{$scale-3}; // 9px
    --scale-2: #{$scale-2}; // 11px
    --scale-1: #{$scale-1}; // 13px
    --scale0: #{$scale0}; // 16px, base size
    --scale1: #{$scale1}; // 19px
    --scale2: #{$scale2}; // 23px
    --scale3: #{$scale3}; // 28px
    --scale4: #{$scale4}; // 33px
    --scale5: #{$scale5}; // 40px
    --scale6: #{$scale6}; // 48px
    --scale7: #{$scale7}; // 57px
    --scale8: #{$scale8}; // 69px
}

Line Height

Line heights are also based on a 1.2 multiplier. --line-height-1 and --line-height-2 are the most frequently used.

$int: 1.2;

$line-height0: $int * $int * $int; // 1.728
$line-height-1: $line-height0 / $int; // 1.44
$line-height-2: $line-height-1 / $int; // 1.2
$line-height-3: $line-height-2 / $int; // 1

:root {
    --line-height-3: #{$line-height-3}; // 1
    --line-height-2: #{$line-height-2}; // 1.2
    --line-height-1: #{$line-height-1}; // 1.44
    --line-height0: #{$line-height0}; // 1.728
}

Line Length

Having too short or too long of a line length can impair readability of longform text. We recommend setting paragraphs at 50-70 characters per line. As your line length decreases, the line height should be tightened to avoid excessive space between lines.