Typography

In short

Typography is the craft of selecting, sizing, spacing and arranging letterforms so that written language is legible, readable and expressive. It governs everything from a textbook page and a medicine label to a mobile app's interface and a brand logotype, which is why it is a core first-year paper in every B.Des Foundation course and a standing question in NID/NIFT/CEED-type entrance and placement tests. Indian practice adds a second layer: most work must set Devanagari, Tamil, Bengali and other Indic scripts alongside Latin, each with its own baseline behaviour, conjuncts and matra positions. Studio recruiters (Zomato, Swiggy, Flipkart, Tata Elxsi, Ogilvy, Lollypop, Obvious, Titan, Fabindia, Asian Paints) test type through portfolio critique, a live hierarchy exercise and questions on kerning, grids and type scales. Exams examine anatomy, classification, measurement systems and the legibility-versus-readability distinction.

Explained

Terms, anatomy and measurement

• Typeface is the design (Garamond, Helvetica); font is a specific instance of it in use - weight, width, style, and historically a single size of metal type. "Helvetica" is a typeface; "Helvetica Bold 12 pt" is a font.
• Type family: all weights, widths and italics sharing a skeleton (Light, Regular, Medium, Bold, Black; Condensed, Extended; Roman, Italic).
• Anatomy: stem, bowl, counter (enclosed space), aperture (opening of that space), ascender, descender, shoulder, spine (of S), bar/crossbar, terminal, finial, spur, ear (of g), tail, serif, bracket (the curve joining serif to stem), apex, vertex, crotch, stress (axis of thick-thin).
• Reference lines: baseline, x-height line, cap height, ascender line, descender line, overshoot (round letters slightly exceed flat ones so they look equal).
• x-height is the height of a lowercase x. A large x-height for the same point size reads better at small sizes and on screens - the reason Verdana, Roboto and Inter look "bigger" than Garamond at 12 pt.
• Point (pt): 1 pt = 1/72 inch = 0.3528 mm (PostScript point, the DTP standard). Pica: 1 pica = 12 pt = 1/6 inch. Older Didot points (0.3759 mm) survive in some European foundry literature.
• Point size measures the em body, not any visible letter - so two typefaces at 10 pt rarely look the same size.
• Em and en: an em equals the current type size (10 pt type → em = 10 pt); an en is half an em. Em dash, en dash and hyphen are three different characters.
• Em square and units: a digital glyph is drawn on an em square divided into units - 1000 units/em for PostScript/CFF, 2048 (a power of two) for TrueType. Side bearings and advance width are stored in these units.
• Unicode and encoding: text is stored as code points, rendered by a font's glyphs. Indic text needs OpenType shaping (GSUB/GPOS) to form conjuncts and reposition matras; this is why a Devanagari string can break in a font that has the glyphs but not the shaping tables.

Classification of typefaces

• Vox-ATypI (historic) / Thibaudeau groupings are the exam-standard families. ATypI formally withdrew its endorsement of the Vox classification in 2021 as inadequate for non-Latin scripts, but syllabi still examine its categories, so know them and know the caveat.
• Humanist / Venetian old style: sloped bar on e, low contrast, oblique stress - Centaur, Jenson.
• Garalde / old style: horizontal bar, more contrast, bracketed serifs - Garamond, Caslon, Bembo.
• Transitional: sharper, more vertical stress - Baskerville, Times New Roman.
• Didone / modern: extreme thick-thin contrast, hairline unbracketed serifs, vertical stress - Bodoni, Didot. Elegant in display, fragile in small body text.
• Slab serif / mechanistic (Egyptian): heavy rectangular serifs - Rockwell, Clarendon, Memphis; strong for signage and headlines.
• Lineale (sans serif), four sub-groups: grotesque (Akzidenz, Franklin Gothic), neo-grotesque (Helvetica, Univers, Arial), geometric (Futura, Avenir), humanist (Frutiger, Gill Sans, Myriad, Open Sans).
• Glyphic (chiselled, Trajan), script (Snell Roundhand), graphic/blackletter/decorative (Old English, display faces).
• Monospaced: every glyph has the same advance width - code, tabular data, ticket stubs (Courier, Roboto Mono, JetBrains Mono).
• Indic categories: Devanagari is classed by shirorekha (headline) treatment and contrast - traditional/calligraphic (Yashomati, Devanagari MT), low-contrast neutral (Mukta, Hind, Noto Sans Devanagari), display and brush styles. Tamil, Telugu-Kannada, Bengali-Assamese, Gujarati, Gurmukhi, Odia, Malayalam each form their own groups; the Government of India's eGov Indic fonts and Google-Indian Type Foundry families (Mukta, Hind, Baloo, Rozha, Kohinoor, Tiro) are the widely licensed workhorses.
• Variable fonts (OpenType 1.8+): one file carries continuous axes - weight (wght), width (wdth), optical size (opsz), slant (slnt), italic (ital) - cutting web payload and allowing fine optical sizing.

Spacing: letter, word, line and alignment

• Kerning: adjusting space between a specific pair (AV, To, LT) to even out the apparent gap. Stored as kern pairs or a GPOS table; applied per-pair, measured in 1/1000 em.
• Tracking / letterspacing: a uniform change across a run. Rule of practice - loosen small caps and all-caps and very small text; tighten large display type; never letterspace lowercase body text.
• Word space: the space character's width, typically a quarter to a third of an em; it should be visibly smaller than the line space, or the page shows "rivers".
• Leading / line spacing: baseline-to-baseline distance. Metal type had lead strips, hence the name. A practical starting point for body text is 120-145% of type size; long measures need more leading, short measures less.
• Measure (line length): aim for roughly 45-75 characters per line (about 66 is the classic optimum) for continuous reading; 35-50 for multi-column.
• Alignment: flush left ragged right (most readable, even word spaces), flush right (captions, pull quotes), centred (invitations, titles - hard to read in long text), justified (even edges, but needs hyphenation and H&J settings or it opens rivers), asymmetric/contoured.
• Hyphenation and justification (H&J): limit consecutive hyphens to two, avoid hyphenating the last line of a paragraph, set minimum word-break lengths. Devanagari is conventionally not hyphenated; justify by word-space adjustment only.
• Typographic colour: the overall grey tone of a block, a product of size, weight, leading and tracking - squint at a page to judge it.
• Vertical rhythm / baseline grid: all baselines, including those in captions and sidebars, snap to a repeating increment so columns align across a spread or a scrolling page.

Hierarchy, grids and composition

• Hierarchy orders information so the eye finds the entry point first. Levers, in rough order of strength: position, size, weight, case, colour/contrast, typeface change, space around, rule/indent, alignment.
• Rule of thumb: change one or two attributes at a time. Bold *and* bigger *and* a new face *and* a colour is noise, not hierarchy.
• Type scale: a geometric series from one base size using a fixed ratio - 1.125 (major second), 1.2 (minor third), 1.25, 1.333 (perfect fourth), 1.414 (√2), 1.5, 1.618 (golden).
• Grid types: manuscript (single block), column, modular (columns × rows of modules), hierarchical, and the baseline grid underneath them all. Terms: margin, column, gutter, module, flowline, spatial zone, marker (folio, running head).
• Van de Graaf canon / Villard's figure: classical geometric constructions placing the text block on a page; still examined as page-proportion theory.
• Paragraph marking: either a first-line indent (about one em) or space between paragraphs - not both. No indent on the first paragraph after a heading.
• Microtypography: true quotation marks and apostrophes (not the typewriter prime), correct dashes, non-breaking spaces before units and in Indian name initials, ligatures (fi, fl), old-style versus lining figures, tabular versus proportional figures for columns of rupee amounts, small caps for abbreviations.
• Widows and orphans: a single last line stranded at the top of a column (widow) or a single first line left at the bottom (orphan); fix by rewriting, re-leading or adjusting the measure, not by tracking everything.
• Legibility versus readability: legibility is how distinguishable one character is from another (a property of the typeface - compare l, I, 1 and O, 0); readability is how comfortably a whole block reads (a property of the setting - size, leading, measure, contrast).

Typography for screens, print and accessibility

• Resolution and rendering: print is measured in dpi/lpi with real ink spread; screens use px/dp/pt with hinting, anti-aliasing and subpixel positioning. Hairline Didone serifs vanish on a low-density display.
• CSS units: px is absolute-ish, em is relative to the parent's font size, rem to the root - use rem for type so a user's browser setting scales the page; ch and ex relate to character width and x-height; vw/clamp() give fluid type.
• Mobile minimums: Material Design and Apple HIG both treat about 16 px/17 pt as the comfortable body size and ~11-12 sp/pt as the floor for secondary text; tap targets around 48 dp (Material) / 44 pt (iOS). Check current guidelines, as both are revised.
• WCAG 2.1/2.2 (the reference for GIGW and most Indian government and banking work): contrast at least 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) at AA; 7:1 and 4.5:1 at AAA; text must reflow and scale to 200% without loss of content; "text spacing" criterion requires the layout to survive line height 1.5×, paragraph spacing 2×, letter spacing 0.12em and word spacing 0.16em.
• GIGW (Guidelines for Indian Government Websites and Apps, MeitY/NIC) mandates WCAG conformance and Indic-language support for government sites; the Rights of Persons with Disabilities Act, 2016 makes accessible ICT a legal obligation for public services.
• Indic screen type: allow extra line height - Devanagari matras above the shirorekha and below the baseline make the effective vertical extent larger than Latin at the same point size; do not force a Latin baseline grid onto a Devanagari column without re-checking.
• Font licensing: desktop, webfont, app and broadcast licences are separate and usually priced by user seats or page views. Open Font License (OFL) families - Noto, Mukta, Hind, Inter, Lato - can be embedded and modified freely under their terms; a typeface's *name* and its software can be protected even where the letterforms themselves are not registrable. Indian registered designs fall under the Designs Act, 2000 and font software is protected as a literary/computer work under the Copyright Act, 1957; Indian courts have not settled letterform protection, so treat a licence, not a theory, as the binding document.
• Print specifics for India: standard trim sizes follow ISO A series (A4 is 210 × 297 mm); IS 1064 covers paper sizes; legal metrology and FSSAI labelling rules prescribe minimum print heights for mandatory declarations on packaging (for example, a minimum numeral/letter height tied to the net-quantity declaration and pack area), so packaging type size can be a compliance matter, not only a design choice - verify the current rule for the pack size before artwork release.

Key points

• Typeface vs font - typeface is the design; font is one instance (weight/style/size) of it.
• Point - 1 pt = 1/72 inch = 0.3528 mm; 12 pt = 1 pica; point size measures the em body, not the letter.
• x-height - height of lowercase x; large x-height reads better small and on screen.
• Em - a relative unit equal to the current type size; kerning is expressed in 1/1000 em.
• Kerning vs tracking - kerning is per pair, tracking is uniform across a run.
• Leading - baseline-to-baseline spacing; start at 120-145% of type size, more for long measures.
• Measure - 45-75 characters per line for comfortable continuous reading.
• Legibility vs readability - character distinction (typeface) vs comfort of a whole block (setting).
• Hierarchy - built from position, size, weight, case, colour and space; change one or two attributes at a time.
• Type scale - geometric progression from a base size; common ratios 1.2, 1.25, 1.333, 1.414, 1.618.
• Classification - humanist, garalde, transitional, didone, slab, lineale (grotesque/neo-grotesque/geometric/humanist), glyphic, script, graphic; Vox-ATypI no longer endorsed but still examined.
• Grid - margin, column, gutter, module, flowline; manuscript, column, modular, hierarchical plus a baseline grid.
• Widow/orphan - stranded last line at top of column / first line at bottom; fix by editing or re-leading.
• Justification - even edges at the cost of uneven word spaces; needs hyphenation or it forms rivers.
• Variable fonts - one file, continuous axes (wght, wdth, opsz, slnt), smaller web payload.
• Devanagari - shirorekha headline, conjuncts and matras above and below need extra line height and OpenType shaping.
• WCAG AA contrast - 4.5:1 normal text, 3:1 large text (18 pt or 14 pt bold); GIGW makes this binding for Indian government sites.
• Microtypography - true quotes and dashes, ligatures, tabular figures for rupee columns, small caps for abbreviations.

Formulas and examples

Example 1 - Point, millimetre and leading for a textbook page. Body text is 10.5 pt with 14 pt leading on a text block 190 mm tall.

• 10.5 pt = 10.5 × 0.3528 = 3.70 mm; leading 14 pt = 14 × 0.3528 = 4.94 mm.
• Line-height ratio = 14 / 10.5 = 1.333 (CSS line-height: 1.333); leading is 133% of size - comfortable.
• Column height 190 mm = 190 / 0.3528 = 538.6 pt.
• Lines that fit = floor((538.6 − 10.5) / 14) + 1 = floor(528.1 / 14) + 1 = floor(37.72) + 1 = 37 + 1 = 38 lines.
• Cross-check: 38 lines occupy 10.5 + 37 × 14 = 10.5 + 518 = 528.5 pt = 186.5 mm - fits within 190 mm.

Example 2 - Copyfitting a 2,400-word article into a two-column A4 page. A4 is 210 × 297 mm. Margins 20 mm all round, gutter 6 mm, type 9.5 pt / 13 pt leading.

• Text width = 210 − 40 = 170 mm; each column = (170 − 6) / 2 = 82 mm = 82 / 0.3528 = 232.4 pt.
• Average character width ≈ 0.5 × 9.5 = 4.75 pt → CPL ≈ 232.4 / 4.75 ≈ 49 characters - inside the 45-75 band.
• 2,400 words at 6 characters per word including the space = 14,400 characters.
• Lines needed = 14,400 / 49 ≈ 293.9 → 294 lines; per column 147 lines.
• Column depth needed = 9.5 + 146 × 13 = 9.5 + 1,898 = 1,907.5 pt = 672.9 mm - far more than the 257 mm available (297 − 40).
• Available lines per column = floor((257 / 0.3528 − 9.5) / 13) + 1 = floor((728.5 − 9.5) / 13) + 1 = floor(55.31) + 1 = 56 lines, so 112 lines per page → 294 / 112 ≈ 2.63 → the article needs 3 pages. Conclusion: either run 3 pages or cut roughly 600 words to fit two pages (two pages hold 224 lines, so 294 − 224 = 70 lines ≈ 70 × 49 = 3,430 characters ≈ 570 words).

Example 3 - Building a type scale at ratio 1.25 from a 16 px base.

• size(n) = 16 × 1.25^n.

• The caption at 12.8 px is below the ~13-14 px practical floor for a long legal line on mobile; raise it to 13-14 px or use a gentler ratio (1.2) at the small end.

Example 4 - Kerning in em units. A display headline is set at 72 pt and the pair "AV" needs the A and V pulled together by 40 units on a 1000-unit em.

• Shift = (40 / 1000) × 72 = 2.88 pt = 2.88 × 0.3528 = 1.02 mm.
• At 10 pt body size the same −40 units gives only (40/1000) × 10 = 0.4 pt - which is why display type needs manual kerning and body text usually does not.

Example 5 - Signage letter height for viewing distance. A common wayfinding rule of thumb is a cap height of about 25 mm for every 10 m of viewing distance (roughly 1 inch per 30-40 feet; signage codes vary, so confirm the project's standard).

• A platform sign read from 25 m → cap height ≈ 25 × (25 / 10) = 62.5 mm, so specify 65 mm caps.
• Converting to points: 62.5 / 0.3528 ≈ 177 pt cap height. Since cap height is typically about 0.70 of the em for a humanist sans, the nominal type size ≈ 177 / 0.70 ≈ 253 pt.
• Pair with a Devanagari face of matching cap/shirorekha height, not matching point size, or the Hindi line will look smaller than the English.

Where it is used

• Editorial and publishing: textbooks, NCERT and state-board titles, newspapers (Times of India, Dainik Jagran, Malayala Manorama) - multi-script setting, copyfitting, baseline grids, tabular figures.
• Packaging and FMCG: Dabur, Amul, Marico, Haldiram's - brand type, multilingual mandatory declarations, minimum legal print heights, legibility on curved and small packs.
• UI/UX and product design: Zomato, Swiggy, Paytm, PhonePe, CRED, Razorpay - design-system type scales, rem-based tokens, Indic font loading, WCAG contrast; roles titled UI designer, design-system engineer, product designer.
• Branding and identity: Elephant, Landor India, Ogilvy, Lollypop, Obvious - logotypes, custom lettering, bilingual wordmarks for Indian Railways, IRCTC, state-government identities.
• Wayfinding and transit: Delhi Metro, Namma Metro, Mumbai Metro, airport signage - trilingual (English/Hindi/state language) panels, letter height by viewing distance, high-contrast reversed type.
• Type design and foundries: Indian Type Foundry, Ek Type, Universal Thirst, Mota Italic - Indic font development, OpenType shaping, Unicode and font-engineering roles; also Noto and MeitY/CDAC Indic font programmes.

Interview questions

• Q: What is the difference between a typeface and a font? A: A typeface is the design of the letterforms; a font is one specific instance of it - a particular weight, style and (historically) size - that you actually set text in.
• Q: What does the point size of type measure? A: The em body the glyphs are drawn on, not any visible letter - which is why two faces at the same point size can look very different in size.
• Q: Kerning or tracking - which would you use to fix a gappy "To"? A: Kerning, because the problem is one specific pair; tracking would loosen or tighten the whole line.
• Q: Why does x-height matter more than point size when choosing a UI font? A: x-height determines the apparent size and the legibility of lowercase text at small sizes, so a large-x-height face stays readable at 12-14 px where a small-x-height face does not.
• Q: Legibility or readability - which one do you change by adjusting leading? A: Readability, because leading is a property of the setting; legibility belongs to the typeface's character shapes.
• Q: How do you decide line length for body text? A: Target roughly 45-75 characters per line - on the web by capping the container at about 65ch - and increase leading as the measure gets longer.
• Q: Why is justified text risky? A: It equalises both edges by stretching word spaces, which produces rivers and loose lines unless hyphenation and H&J settings are tuned; flush left is safer for narrow measures.
• Q: What extra care does Devanagari need next to Latin? A: Match cap height to the shirorekha-to-baseline height rather than point size, allow more line height for matras above and below, and make sure the font has the OpenType shaping tables for conjuncts - glyph coverage alone is not enough.
• Q: What is a variable font and why would you ship one? A: A single font file with continuous axes such as weight and optical size; it replaces many static files, cutting web payload and letting you tune weight precisely.
• Q: What are the WCAG AA contrast thresholds for text? A: 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) - the benchmark GIGW applies to Indian government websites and apps.
• Q: Build a hierarchy with only one typeface - how? A: Vary size using a consistent scale, weight, case, colour value and the space around each element, and use position and alignment; one family with several weights is usually enough.
• Q: When would you use tabular figures instead of proportional ones? A: In any column of numbers - invoices, bank statements, rupee amounts, price lists - so digits align vertically because each occupies the same advance width.

Common mistakes

• Using "font" and "typeface" interchangeably in a viva or portfolio review, and not knowing that point size measures the em body.
• Tracking out lowercase body text, or letterspacing to "fix" a widow instead of editing the copy or changing the measure.
• Using both a first-line indent and inter-paragraph space, or indenting the first paragraph after a heading.
• Over-signalling hierarchy - bigger, bolder, a new face and a colour on the same element - instead of changing one or two attributes.
• Forgetting the clearance arithmetic in copyfitting: dividing column height by leading without subtracting the first line's size, and mixing pt with mm in the same calculation.
• Pairing Devanagari with Latin at the same point size, so the Hindi line looks smaller, and ignoring the extra line height matras need.
• Downloading a typeface for a client job without checking the licence class (desktop, webfont, app) and page-view or seat limits.

Related topics

Elements and principles of design · Colour theory · Grid systems and layout · Branding and identity design · UI/UX and design systems · Print production and prepress.