Compare all available weights of a font family from thin to black with sample text rendering.
Shows the same sample string rendered in every weight a chosen font family actually ships, stacked from Thin (100) to Black (900) and labeled by name and number. Type the text you care about, pick a family, and see at a glance which weights exist, how much the stroke thickens per step, and where the range stops. The usual surprise: weights are not invented. Most families ship only a few of the nine named weights, and requesting a missing one makes the browser substitute the nearest face or synthesize a fake bold. The tool shows what is real, and what a missing weight actually resolves to.
A concrete input and expected output from the current implementation.
Input
Family: Arial / Sample: The quick brown fox
Expected output
Two rows only, both in Arial: Regular (400) and Bold (700), each showing the sample string. No Thin, Light, Medium, Semi Bold, Extra Bold, or Black rows, because the Arial family ships just Regular and Bold faces (its Italic variants reuse the same two weights).
Arial was drawn in only two weights, so the ladder has exactly two steps. The tool lists what exists rather than filling the 100-900 scale with rows the family cannot render.
The tool asks the current browser which faces the selected family provides, then renders the sample string once per face at its native weight. Rows run lightest to heaviest, labeled with each weight conventional name and numeric value (100 to 900). Because everything renders locally, the ladder reflects the fonts actually installed or loaded on this machine, not an idealized catalog of the family.
When the family lacks a requested weight, the browser does not invent it. Requests above 500 resolve to the nearest heavier face, requests between 400 and 500 toward the lighter side, and requests below 400 to the lightest available. With no heavier face available, the renderer may synthesize a faux bold by thickening strokes. The comparison marks which rows are true weights and which are substitutions, so the preview matches your page's actual rendering.
Because that family ships only those two weights. A font file contains exactly the weights its designers drew, and the tool lists what exists. This is normal, not a defect. If you need Light or Semi Bold, pick a family that includes them, or use a variable font, whose single file covers a continuous range and renders every intermediate weight.
Not Semi Bold. Browsers snap to the nearest real weight per the standard matching rules, usually Bold (700) for requests above 500, so the text looks heavier than intended. If only a regular face exists, the renderer may synthesize faux bold, thickening the strokes, which is visibly cruder than a designed weight. Use the explorer to see the substitution before shipping.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.