Typography: choosing type size, leading and typefaces for print and screen

Enter the body size, scale ratio, baseline grid and column width, pick the typefaces, and get a full hierarchy (caption to H1) with leading on the grid, characters per line, a check of typesetting rules and a score for the typeface pair. The specimen shows everything at 1:1. Export to CSS, JSON and a text summary to enter in a DTP application.

Calculations and the specimen run in your browser. Settings never leave your device.

Medium

Baseline grid 0 = no grid (leading from ratio). Column width 0 = no characters-per-line count. Carry the leading and column width over from the grid generator.

Typefaces

Open-licence typefaces (SIL OFL, Apache) hosted locally: x-height and cap height measured from the font files. The pair score is based on class contrast, x-height match and the intended use of each typeface.

Pair score

Specimen at 1:1 for a 96 dpi screen

Hierarchy

Typesetting rules check

    Code and settings

    
            
    Download:
    
            
        
    
    
    

    
    
        
    How to choose type size, leading and measure?
    Three quantities hold each other up: type size, leading and line length. Running text in print is usually set at 9–11 pt, on screen at 16–18 px. A line should carry 45–75 characters: shorter lines chop the reading, longer ones lose the eye on the return to the left margin. Leading grows with line length: in print from 1.2 of the size (10/12 pt) for lines up to 75 characters to about 1.3 for longer ones; on screen from about 1.35 for short lines to 1.6 for very long ones. Typefaces with a large x-height look bigger and need slightly looser leading; typefaces with a small x-height (renaissance romans) need a larger size.
    
        
    Hierarchy and type scale on a baseline grid
    A hierarchy is a set of roles (caption, body, lead, H3, H2, H1) whose sizes follow one ratio: 1.2 (gentle), 1.25, 1.333, 1.5 or 1.618 (dramatic). Adjacent levels should differ clearly (usually at least 1.2×), and H1 should be about 2× to 4× the body. With a baseline grid, each role’s leading is a multiple of the grid unit: body text and captions on whole lines, lead and headings may sit on half-lines as long as the block ends on a whole line. This keeps text in adjacent columns and on facing pages on the same lines.
    
        
    How to pair typefaces: contrast, x-height, purpose
    A good pair offers class contrast (serif body + sans heading or the reverse), not “almost the same”: two similar sans serifs look like a mistake. A matching x-height gives both typefaces a similar optical weight. Display, script and handwritten typefaces belong only in headings and accents, never in running text. Families designed together (serif + sans by the same designer) or one family with many styles are the safest choice. The tool scores a pair from 0 to 100 and suggests heading typefaces for the chosen body typeface.
    
        
    Specimen typefaces are hosted locally under the SIL Open Font License 1.1 and Apache 2.0; licence registry: LICENSES.md
    
    
    
            
    
        
    Typography glossary: terms, history, facts
    
        
    
            
    Type, font, typeface
    Historically a piece of type was a metal sort with a cast letter, and a font was a complete set of sorts of one design in one size. Today a font is a file (e.g. WOFF2, OTF) and a typeface is the design of the letters, independent of the medium. The words are used interchangeably in everyday speech; in typesetting the distinction matters.
    Family and style
    A family is the set of styles of one typeface: weight (Light, Regular, Bold), width (Condensed, Extended), slant (Italic). Variable fonts (OpenType 1.8, 2016) store the whole family in one file with axes, e.g. weight (wght) and optical size (opsz).
    Typographic point
    The unit of type size. The Didot point (France, 18th century) is 0.376 mm; the Anglo-American point adopted in DTP is 1/72 inch = 0.3528 mm. A pica is 12 points, a cicero 12 Didot points. A CSS pixel is 1/96 inch, so 1 pt = 1.333 px.
    Type size
    The nominal size of type: once the height of the metal body, today the height of the character box. Letters are smaller than the size; capitals usually take 0.66–0.73 of it and the x-height 0.45–0.55. That is why two typefaces at the same size can look different in size.
    Leading
    The distance between the baselines of consecutive lines. The name comes from the strips of lead that compositors inserted between lines of metal type. 10/12 means a 10 pt size with 12 pt leading.
    Baseline, x-height, ascenders and descenders
    The baseline is the line the letters stand on. The x-height is the height of lowercase letters without extenders (like x); ascenders (b, d, k) and descenders (g, p, y) reach beyond it. Typefaces with a large x-height (e.g. Verdana, Inter) read better at small sizes on screen.
    Serif
    The short cross-stroke finishing a letter’s stroke. Serifs already appear in Roman inscriptions (Trajan’s Column, AD 113); in print they guide the eye along the line. Typefaces without serifs are called sans-serifs, grotesques (from the 19th-century English “grotesque”) or, in American usage, gothics.
    Roman and its classes
    Roman type descends from humanist minuscule and Roman capitals. Old-style (Jenson 1470, Garamond 16th century): low contrast, oblique stress. Transitional (Baskerville, 1750s): higher contrast. Modern or didone (Didot, Bodoni, late 18th century): very high contrast with hairline serifs.
    Slab serif (Egyptian)
    A typeface with heavy rectangular serifs, created for posters and advertising in England around 1815–1820. The name “Egyptian” reflects the fashion that followed Napoleon’s Egyptian campaign, not any link to Egypt. Modern slabs (e.g. Rockwell, Roboto Slab) hold up well on screen.
    Grotesque, neo-grotesque, humanist and geometric sans
    The first grotesques were 19th-century advertising types. Akzidenz-Grotesk (Berlin, 1896–1898) started the neo-grotesques: Helvetica appeared in 1957 as Neue Haas Grotesk (Max Miedinger, Eduard Hoffmann). Geometric sans (Futura, Paul Renner, 1927) build letters from circles and lines; humanist sans (Gill Sans 1928, Frutiger 1976) keep roman proportions and read best in text.
    Vox-ATypI classification
    A system of typeface classification proposed by Maximilien Vox in 1954 and adopted by ATypI in 1962: humanist, garalde, transitional, didone, mechanistic (slab), lineal (sans), incised, script, manual, blackletter. ATypI withdrew it in 2021 as inadequate for contemporary typefaces, but the names remain in use.
    Italic and oblique
    Italic was introduced in 1501 by the Venetian printer Aldus Manutius with the punchcutter Francesco Griffo, modelled on chancery handwriting; it fitted more text into pocket editions. An oblique is merely a mechanically slanted roman; a true italic has its own distinct letterforms (a, f, g).
    Capitals, lowercase, small caps
    Capitals (majuscules) descend from Roman capitals, lowercase letters from Carolingian minuscule (8th–9th century). “Uppercase” and “lowercase” are literally the upper and lower type cases: in printing shops capitals sat in the upper case, small letters in the lower. Small caps are capitals reduced to the x-height, used for abbreviations and subheadings.
    Ligature
    Two or more characters joined into one glyph, e.g. fi, fl, ffl, to avoid the dot of the i colliding with the f. The & sign is a ligature of the Latin “et”. In OpenType fonts ligatures are enabled by the liga feature; in CSS by font-variant-ligatures.
    Kerning and tracking
    Kerning adjusts the space between a specific pair of letters (AV, To, Wa); tracking changes the spacing uniformly across a run of text. The word kern dates from metal type: the part of a letter projecting beyond its body, overhanging the neighbour. Use tracking sparingly: large positive values break words apart, negative values glue letters together.
    Justified and ragged setting
    Justified text (aligned to both margins) needs hyphenation and spacing control, otherwise rivers of white appear. Ragged-left-aligned text keeps even spacing and a natural rhythm; good ragged setting has gently varied line endings, without staircases or lonely short words.
    Orphans, widows and runts
    A widow is the last line of a paragraph stranded at the top of a new column or page; an orphan is the first line of a paragraph left at the bottom. Polish typesetting also avoids leaving one-letter conjunctions (i, w, z, a) at the end of a line, fixed with a non-breaking space. DTP applications control these in paragraph settings.
    Hyphen, en dash, em dash
    Three different marks: the hyphen (-) joins and divides words; the en dash (–, the width of an n) marks ranges (45–75) and in many languages serves as the dash in running text; the em dash (—, the width of an m) is the classic dash of book typesetting. Em and en are named after the widths of the letters M and N at a given size.
    Quotation marks
    Polish quotation marks are „low-high” (99-66), with «guillemets» for quotes within quotes. English uses “66-99” at the top; German „99-66“ resembles Polish with a different closing mark. The straight " from the keyboard is a typewriter mark; typesetting replaces it with typographic quotes.
    Movable type and Gutenberg
    Around 1450 in Mainz, Johannes Gutenberg combined metal type cast from matrices, a press and oil-based ink; his 42-line Bible (c. 1455) is the first major printed book in Europe. Movable type was known earlier: ceramic in China (Bi Sheng, c. 1040) and metal in Korea (the Jikji, 1377, the oldest surviving book printed with metal type).
    Lorem ipsum and pangrams
    Lorem ipsum is placeholder text made from a scrambled passage of Cicero’s “De finibus bonorum et malorum” (45 BC); it was popularised by Letraset sheets in the 1960s and by PageMaker (1985). A pangram is a sentence containing every letter of the alphabet: “The quick brown fox jumps over the lazy dog” in English; the Polish “Zażółć gęślą jaźń” contains all nine Polish diacritics.
    Polish diacritics
    The ogonek (ą, ę), the acute (ć, ń, ó, ś, ź), the overdot (ż) and the stroke (ł). A typeface for Polish must have them designed, not attached automatically: the ogonek should grow out of the letter and the acute should follow the typeface’s angle. In character tables they sit in the Unicode block Latin Extended-A (Unicode 1.0, 1991).
    Type on screen
    A screen draws letters with pixels, so at small sizes hinting (fitting outlines to the pixel grid) and anti-aliasing matter. Accepted minimums: 16 px for running text, 12 px for captions. The WOFF2 format (W3C, 2018) compresses web fonts, and font-display decides what is shown before the font loads.
    Font licences
    A font is both software and a work of authorship, so it is licensed. The SIL Open Font License (2005, version 1.1 in 2007) allows use, embedding and redistribution, forbids selling the font on its own and reserves names for modified versions; Apache 2.0 is similarly liberal. Commercial fonts carry separate licences for print, web, apps and PDF embedding.
    Optical sizes and text faces
    The same typeface at 8 pt and 72 pt should not look identical: small sizes need a larger x-height, looser spacing and sturdier strokes, large sizes can be subtle and tight. Once every size was cut separately; today the opsz axis of variable fonts or separate Text and Display styles do the job.
            
    
    
    
    
        
    Need a publication, an identity or a website with refined typography? We will design it