Maximum typographic hierarchy from a single font family
TypeSmith ranks fonts by weight count, evaluating the number of distinct weight instances available across regular and italic styles. These 10 fonts provide the deepest weight ranges for building complete typographic hierarchies, from hairline headlines to ultra-bold callouts, without mixing font families.
Weight range determines how many levels of visual hierarchy a single font family can express. A font with 9 weights (Thin through Black) and matching italics provides 18 style combinations, enabling designers to differentiate headings, subheadings, body text, captions, and UI labels while maintaining consistent letterform geometry and baseline metrics throughout.
The quick brown fox jumps over the lazy dog
Inter provides 18 named styles spanning Thin (100) through Black (900) with matching italics for each weight. As a variable font, it offers continuous weight selection between these extremes, delivering effectively infinite weight granularity in a single file.
Clarity in typography leads to clarity in communication
Source Sans 3 ships with weights from ExtraLight (200) through Black (900) plus matching italics, totaling 14 static styles. Its variable font axis extends to continuous weight selection, making it one of the most flexible type systems for hierarchical content.
Universal design begins with universal type
Roboto offers Thin (100) through Black (900) across 12 static styles with italics. As Android's system font, its full weight range has been tested across billions of devices, ensuring rendering reliability at every weight value.
Good typography is invisible, bad typography is everywhere
Open Sans by Steve Matteson provides 10 styles from Light (300) through ExtraBold (800) with matching italics. Its humanist proportions and ClearType optimization deliver consistent quality across every weight on Windows and macOS.
Typography is two-dimensional architecture
Lato delivers 10 weights from Hairline (100) through Black (900) with italics, totaling 18 static files. Lukasz Dziedzic designed each weight as an individual drawing rather than interpolation, resulting in optical corrections specific to each weight.
Warmth in type begins with thoughtful curves
Nunito provides weights from ExtraLight (200) through Black (900) across 14 styles with italics. Its rounded terminals maintain their proportional relationship across the full weight range, preserving the font's friendly character at both extremes.
Geometry reveals the structure beneath every word
Poppins by Indian Type Foundry offers 18 styles from Thin (100) through Black (900) with matching italics. Its geometric Indian and Latin letter design provides complete weight coverage for multilingual projects requiring both Devanagari and Latin scripts.
Elegance is not about being noticed, it is about being remembered
Raleway spans Thin (100) through Black (900) with matching italics across 18 static files. Originally a single-weight display face by Matt McInerney, it was expanded by Pablo Impallari and Rodrigo Fuenzalida into one of the most weight-complete elegant sans-serifs.
The city writes its identity in the typefaces on its walls
Montserrat provides 18 styles from Thin (100) through Black (900) with italics. Julieta Ulanovsky designed it inspired by Buenos Aires signage, and its full weight range enables everything from delicate display headlines to bold wayfinding labels.
Typography is the craft of endowing human language with a durable visual form
DM Sans offers weights from Thin (100) through Black (900) with optical size adjustment. Its variable font implementation enables continuous weight plus automatic stroke contrast optimization, combining deep hierarchy with performance efficiency.
The details are not the details, they make the design
Work Sans provides 9 weights from Thin (100) through Black (900) with matching italics. Its screen-optimized design maintains legibility even at extreme weight values.
Every letter has a spirit to be revealed by the designer
Outfit delivers continuous weight from 100 to 900 as a variable font. Its geometric precision produces clean interpolation across the full weight axis without artifacts.
Proportion and weight define the voice of every letter
Barlow provides 9 weights with italics across its regular, condensed, and semi-condensed families. The extended family totals over 50 static files, making it one of the most comprehensive type systems available.
Most websites need 3-4 weights: Regular (400) for body text, Medium (500) or SemiBold (600) for subheadings, Bold (700) for headlines, and optionally Light (300) for captions. Using more than 5 weights on a single page creates visual clutter rather than clear hierarchy.
Font weight refers to the thickness of letterform strokes, ranging from Thin (100) to Black (900). Font style typically refers to upright versus italic. Together, weight and style define a specific font instance, such as "Inter Bold Italic" (weight 700, italic style).
Each additional static font weight adds 20-50KB to page load. Loading 9 weights statically can add 200-450KB. Variable fonts solve this problem by storing all weights in a single file of 100-300KB, making full weight ranges performance-practical for web use.
Regular (400) is the standard weight for body text and produces the most comfortable reading experience at 14-18px. Some fonts like Inter and DM Sans are optically designed so that 400 weight appears slightly lighter, in which case Medium (500) may improve on-screen body readability.
With variable fonts, you can use any value in the weight axis range, such as font-weight: 350 or font-weight: 650. Static fonts will round to the nearest available weight. Variable fonts interpolate smoothly between values, enabling precise control over typographic hierarchy.