Font Weight Guide: From Thin to Black
Font weight is one of the most effective tools a designer or developer has for establishing visual hierarchy, directing a reader’s attention, and improving readability. A single typeface can carry an enormous range of expression depending on the weight selected — a whisper-thin headline communicates something entirely different from a heavy, black-set title. Understanding the full spectrum of weight options, and knowing when to deploy each one, separates competent typography from careless text styling.
The font weight scale runs from 100 (Thin) to 900 (Black), with Regular sitting at 400. Each step along that scale changes the thickness of the strokes that form each character, which in turn affects the visual density and prominence of text on the page. Most designers work with only two or three weights in a given project, but knowing the full range is essential for making informed decisions.
This font weight guide covers the complete numeric scale, how weights behave in CSS, how variable fonts expand the possibilities, and practical advice for selecting weights that serve your content. The goal is clarity — both on screen and in your design process.
What Is Font Weight?
Font weight refers to the thickness or boldness of the strokes in a typeface. A lighter weight uses thinner strokes, producing a delicate and airy appearance. A heavier weight uses thicker strokes, creating a dense and commanding presence. The concept is simple, but its impact on readability, hierarchy, and overall design is significant.
The standard font weight scale uses numeric values from 100 to 900, incrementing by 100. Each value corresponds to a named weight:
- 100 — Thin (Hairline)
- 200 — ExtraLight (UltraLight)
- 300 — Light
- 400 — Regular (Normal)
- 500 — Medium
- 600 — SemiBold (DemiBold)
- 700 — Bold
- 800 — ExtraBold (UltraBold)
- 900 — Black (Heavy)
Not every typeface includes all nine weights. Many serif fonts ship with only Regular and Bold. Others, particularly modern sans-serif families, offer the full spectrum. The availability of weights depends entirely on the typeface designer’s decisions and the intended use case for the font family.
The named weights are conventions, not rigid rules. A “Light” weight in one typeface may appear visually similar to a “Regular” in another. The numeric values provide a standardized mapping, but the actual stroke thickness is relative to the design of each individual font.
The Standard Font Weight Scale
Each weight in the 100-to-900 scale serves a distinct purpose. Here is a detailed breakdown of the full font weight scale and the contexts where each weight performs best.
100 — Thin
The thinnest available weight. Thin strokes can look elegant and modern at large display sizes — think hero banners and oversized headlines. At body text sizes, Thin is nearly unreadable on most screens, particularly on lower-resolution displays. Reserve this weight for decorative or display contexts where the text is large enough to remain legible.
200 — ExtraLight
Slightly more substantial than Thin, but still delicate. ExtraLight works well for large subheadings or stylistic pull quotes. Like Thin, it struggles at small sizes. Pair it with heavier weights to create dramatic contrast in your visual hierarchy.
300 — Light
Light is the thinnest weight that remains readable at moderate text sizes on high-resolution screens. It is a popular choice for body text in modern, minimalist designs, especially on Retina and 4K displays. On standard screens, Light can appear washed out and difficult to read for extended passages.
400 — Regular
The default weight for body text. Regular provides the stroke thickness that most readers expect and find comfortable for sustained reading. Nearly every typeface includes a Regular weight, making it the universal starting point for any typographic system. When in doubt, set your body copy at 400.
500 — Medium
Medium sits between Regular and Bold, offering a subtle emphasis without the assertiveness of full bold. It works well for UI elements like navigation labels, button text, and secondary headings. Medium provides just enough visual weight to distinguish an element from surrounding Regular text without shouting.
600 — SemiBold
SemiBold is a versatile weight for subheadings, labels, and interface elements that need to stand apart from body text but should not carry the full emphasis of Bold. It has become increasingly popular in web and app design as a heading weight that feels confident without being heavy-handed.
700 — Bold
The most widely used emphasis weight. Bold text draws the eye immediately and is the standard for headings, key terms, and inline emphasis. The <strong> HTML element defaults to 700, as does the CSS keyword bold. When pairing heading and body weights, Bold headings with Regular body text is the most common and reliable combination.
800 — ExtraBold
ExtraBold pushes emphasis further, creating a heavy, impactful presence. It is useful for primary headings in designs that need to command immediate attention — marketing pages, posters, and high-contrast landing pages. At body text sizes, ExtraBold can feel aggressive and impede readability.
900 — Black
The heaviest standard weight. Black type dominates the page with maximum stroke thickness. It is almost exclusively a display weight, used for dramatic headlines, logos, and high-impact branding elements. The dense letterforms can cause characters to visually merge at small sizes, so Black should be set generously large with ample letter spacing.
Variable Fonts and Custom Weights
Variable fonts have fundamentally changed how designers work with font weight. Traditional font files are static — each weight is a separate file, and you can only use the specific weights the type designer chose to include. Variable fonts contain the entire weight range in a single file, allowing you to set any numeric value along the spectrum, not just the standard 100-to-900 stops.
With a variable font, you can specify a weight of 350, 425, or 680 — any value the font’s design space supports. This opens up precise typographic control that was previously impossible without commissioning a custom typeface. You can fine-tune heading and body weights until the contrast is exactly right for your layout and screen conditions.
Several notable variable fonts are available on Google Fonts, making them accessible for any web project. Inter, for instance, supports a weight axis from 100 to 900 with continuous interpolation. Roboto Flex offers even more axes of variation. Source Sans 3, Montserrat, and Oswald also ship as variable fonts with full weight ranges.
The practical benefits extend beyond design precision. A single variable font file often weighs less than loading three or four static weight files, improving page load performance. This makes variable fonts a smart choice for projects that require multiple weights — you get more typographic flexibility with less network overhead.
To use variable font weights in CSS, you set the font-weight property to any numeric value within the font’s supported range. The browser interpolates between the design masters to render the exact weight you specify.
Font Weight in CSS
CSS provides two ways to set font weight: numeric values and named keywords. Understanding both is important for writing reliable, cross-browser stylesheets.
The numeric system accepts values from 1 to 1000 in the latest CSS specification, though the traditional 100-to-900 range remains the most widely used. The two named keywords are normal (equivalent to 400) and bold (equivalent to 700). There are also relative keywords — bolder and lighter — which adjust the weight relative to the parent element, but these can produce unpredictable results and are best avoided in production code.
A common source of confusion is what happens when you specify a CSS font weight that the loaded font does not include. Browsers follow a matching algorithm: if the exact weight is unavailable, the browser selects the nearest available weight. For values 400 and below, it looks for a lighter weight first, then heavier. For values above 500, it looks for a heavier weight first, then lighter. This fallback behavior means your text will render, but possibly not at the weight you intended.
For reliable results, always verify that the font files you load include the weights you reference in your CSS. If you are using Google Fonts, specify the exact weights in the embed URL. If you are self-hosting, include the appropriate font files for each weight and declare them with matching font-weight descriptors in your @font-face rules.
Here are practical considerations for working with font weight in CSS:
- Use numeric values rather than keywords for precision and consistency across your codebase.
- Define a limited set of weight variables (e.g.,
--weight-regular: 400,--weight-bold: 700) in your CSS custom properties to maintain consistency. - Test font weight rendering across browsers — Windows and macOS render the same weight differently due to their distinct text rendering engines.
- When using variable fonts, ensure your
@font-facedeclaration includes afont-weightrange (e.g.,font-weight: 100 900) so the browser knows the full range is available.
Choosing the Right Weight
Selecting font weights is not about using as many as possible — it is about creating clear, intentional contrast between different levels of content. A well-structured typographic system typically uses two to three weights, each serving a defined role.
The most reliable starting point is Regular (400) for body text and Bold (700) for headings. This pairing provides strong contrast and works across virtually every typeface and screen condition. From there, you might add a Medium (500) or SemiBold (600) for secondary headings, navigation, or UI labels.
For font pairing across different typefaces, pay attention to the optical weight — how heavy a font appears — rather than just the numeric value. A 400-weight geometric sans-serif may appear heavier than a 400-weight humanist serif due to differences in stroke contrast, x-height, and overall design. Trust your eyes over the numbers when mixing typefaces.
Accessibility demands careful attention to weight selection. The Web Content Accessibility Guidelines do not prescribe a minimum font weight, but practical testing shows that weights below 300 become difficult to read for many users, especially those with low vision or on low-contrast displays. For body text, stick to 400 or above. If you use Light (300) for body copy, ensure your font size is generous — at least 18px — and your foreground-to-background contrast ratio meets WCAG AA standards.
Weight contrast is a primary tool for establishing hierarchy. The greater the difference between your heading weight and body weight, the stronger the hierarchical signal. A 700 heading over 400 body text provides moderate contrast. A 900 heading over 300 body text provides dramatic contrast. Match the level of contrast to the tone of your design — editorial layouts can handle dramatic weight differences, while technical documentation benefits from subtler distinctions.
Common Mistakes with Font Weight
Even experienced designers make recurring errors when working with font weight. Recognizing these patterns helps you avoid them.
Using too many weights in one design. Loading five or six weights from a single typeface creates visual noise rather than clarity. Each additional weight should serve a distinct, identifiable purpose in your hierarchy. If you cannot articulate why a particular weight exists in your system, remove it. Two or three weights are sufficient for most projects, and four is the practical ceiling for all but the most complex editorial layouts.
Using light weights at small sizes. Thin (100), ExtraLight (200), and Light (300) can look stunning in a design mockup on a high-resolution monitor, but they often fail in production. Low-resolution screens, aggressive subpixel rendering, and browser anti-aliasing can reduce thin strokes to near-invisibility. Always test light weights on the lowest-quality screen your audience is likely to use. If legibility suffers, increase the weight to Regular or bump the font size significantly.
Insufficient contrast between heading and body weight. Setting headings at Medium (500) and body text at Regular (400) produces a weight difference so subtle that many readers will not perceive the hierarchy. The heading and body weights should be separated by at least 200 to 300 numeric units for the contrast to register clearly. Regular (400) body with Bold (700) headings is the minimum effective contrast for most typefaces.
Ignoring rendering differences across platforms. The same font at the same weight looks different on Windows, macOS, Linux, iOS, and Android. Windows historically renders type with sharper, thinner strokes (especially with ClearType), while macOS tends toward rounder, slightly heavier rendering. A weight that looks perfect on your Mac may appear too thin on a Windows machine. Cross-platform testing is not optional — it is essential for any serious web typography project.
FAQ
What is the default font weight?
The default font weight in CSS is normal, which maps to a numeric value of 400. This corresponds to the Regular weight in most typeface families. Unless you explicitly set a different font-weight value, browsers render all text at 400. The <strong> and <b> HTML elements default to 700 (Bold).
How many font weights should I use in a design?
Two to three weights handle the needs of most designs effectively. A typical system uses Regular (400) for body text, Bold (700) for headings, and optionally a Medium (500) or SemiBold (600) for secondary emphasis or UI elements. Each weight you add should serve a clear, distinct role. More than four weights in a single project usually signals a lack of typographic discipline rather than sophisticated design.
What is the thinnest font weight?
The thinnest standard font weight is 100, called Thin or Hairline. With variable fonts, some typefaces support values below 100 — the CSS specification allows values down to 1. However, extremely thin weights are only legible at large display sizes and should not be used for body text or small UI labels.
Does font weight affect readability?
Yes, font weight has a direct impact on readability. Weights below 300 (Light) become progressively harder to read at standard body text sizes, particularly on low-resolution screens or for users with visual impairments. Weights above 700 (Bold) can reduce readability in long passages because the dense strokes cause letters to visually crowd each other. For sustained reading, Regular (400) remains the most comfortable weight for the widest range of readers and screen conditions.
