Font Pairing Contrast Index Calculator

This index is a heuristic scoring model, not an industry standard: it reduces a heading and body typeface to four measurable differences and weights them into a single number. Weight contrast uses the CSS numeric weight axis, where the difference between the two values is divided by the 900-unit span; a 700 heading against a 400 body gives 0.33, and differences under about 200 units are generally too small to read as deliberate hierarchy. Size contrast is the heading-to-body ratio, normalised against 4.0; ratios of 1.5 to 3.0 cover most editorial and interface work, with 2.0 to 2.5 common for an h1 over 16px body text. Category contrast is binary, rewarding a pairing that crosses classification families such as serif against sans-serif. X-height harmony works the opposite way, rewarding similarity, since two faces whose lowercase heights differ by more than about 0.10 of the em look mismatched even when set at compatible sizes. The weighting of 30, 25, 25 and 20 points is an editorial judgement rather than a measured constant, which is the model's main limitation. It also cannot see stroke modulation, counter shape, terminal treatment, or the historical period a face belongs to - all of which experienced typographers weigh heavily. Two faces can score identically here and look quite different in use. Treat the output as a structured checklist for spotting a pairing with too little weight difference or clashing lowercase proportions, then confirm the choice by setting real text at real sizes.

The idea that typefaces belong to families that can be deliberately combined or contrasted rests on the classification systems developed for type history. Maximilien Vox published his classification in 1954, grouping Latin typefaces into categories such as humanes, garaldes, reales, didones, mecanes and lineales; the Association Typographique Internationale adopted a version of it in 1962, and it became the reference vocabulary for describing serif, slab and sans-serif groups. ATypI formally set the classification aside in 2021 as too Latin-centric, but the coarse serif and sans-serif split it popularised is still what most pairing advice, including the category term in this index, actually uses. The numeric weight scale has a more precise origin. Adrian Frutiger designed Univers, released by Deberny and Peignot in 1957, with a two-digit numbering system in which the first digit encoded weight and the second width, replacing vague names such as light, book and extra bold. That principle carried into digital type and into CSS, where the font-weight property was defined with the 100 to 900 numeric scale in Cascading Style Sheets Level 1 in 1996 and later extended to fractional values for variable fonts in CSS Fonts Level 4. Systematic pairing guidance for the web grew alongside webfont services from the late 2000s, when designers could for the first time combine arbitrary typefaces on a page instead of choosing among a handful of system fonts.