HTML & CSS Font Styling: The Complete Developer Guide

Updated June 2026

Many beginners think making text bold is the whole story with HTML/CSS font weight. Set font-weight: bold, and you are done. But the way font-weight actually works depends on the font family you have chosen and which weights that font supports. Request a weight the font does not include, and the browser quietly picks the nearest one it can find. The result can look nothing like what you expected.

The CSS font-weight property controls how thick or thin text appears on screen. That is the core answer. But using it well means understanding keyword and numeric values, why some weights look identical, and how browsers handle missing weights.

This guide covers how to make text bold in CSS, the full range of font-weight values, readability tradeoffs, and the browser differences that catch beginners off guard.

What Font Weight Means In HTML And CSS

Font weight is the value placed on your font that determines how bold or light your text will appear. It is a CSS property, not a standalone HTML feature. HTML structures your content. CSS controls presentation, including how thick or thin your text renders.

The font-weight property applies to any text element: paragraphs, headings, labels, links, buttons, spans. Some HTML elements already appear bold by default because of built-in browser styles. Headings (h1 through h6) and the <strong> tag render bold without any CSS.

A quick distinction worth knowing:

• <b> applies presentational bold in HTML
• <strong> carries semantic meaning (importance)
• font-weight is purely visual CSS styling

For HTML text boldness, font-weight gives you the most control. The HTML tags are about meaning. The CSS property is about appearance.

The Fastest Way To Make Text Bold In CSS

The quickest answer to “how to make text bold in CSS” is one line:

font-weight: bold;

The keyword bold maps to a numeric value of 700. Here is a working example:

p {
  color: red;
  font-weight: bold;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

This makes every paragraph element render in bold red text at 18 pixels. Notice that font-weight: bold does not change the size or spacing of the text. It only changes the thickness of each character stroke.

For a quick demo or prototype, this is all you need. The CSS font-weight property becomes more nuanced when you want finer control over how heavy or light your text appears.

Font-Weight Values Explained

The font-weight property supports more than just normal and bold. It accepts two types of values: keywords and numbers.

Keyword Values

Four keyword values are available:

• normal sets text to the default weight, equivalent to 400
• bold makes text heavy, equivalent to 700
• lighter reduces the weight relative to the parent element
• bolder increases the weight relative to the parent element

The key distinction: normal and bold are fixed. They always resolve to the same numeric weight. But lighter and bolder are relative. Their result depends on what the parent element’s font weight is. A bolder inside a parent set to 400 behaves differently than a bolder inside a parent set to 700.

Numeric Values

Font-weight numeric values range from 100 to 900, in increments of 100. Lower numbers produce thinner text. Higher numbers produce heavier text.

• 400 maps to normal
• 700 maps to bold

The full scale runs: 100, 200, 300, 400, 500, 600, 700, 800, 900. For most beginner web development, this is the practical range to learn. Some modern variable fonts support values between these steps, but the 100 to 900 scale covers the vast majority of use cases.

Font Weight Scale Reference

This table maps each numeric value to its common name and typical use:

Not every font includes every weight. A font like Arial may only ship with regular and bold variants. If you request font-weight: 300 from a font that only has 400 and 700, the browser picks the closest available weight. The table above describes the intended design. The actual result depends on what the font file provides.

Why 100 Through 900 Does Not Always Look Different

This is where CSS typography basics get practical. Not every web font, or “font family,” was originally built with an array of bold variations. Many fonts include only two or three weights. Some include just one.

When a requested weight is missing, the browser uses a fallback algorithm. It picks the nearest available weight. In practice, this means 500 might render identically to 400. Or 800 might look the same as 700. The CSS value changes. The visual result does not.

For fonts like Arial, Helvetica, and other common system fonts, the visible difference between many numeric values is zero. Always check the actual rendered result, not just the CSS value. Visual testing matters more than assuming the number will force a visible change.

Practical Examples Of Light, Normal, And Heavy Text

Different font weights map to different parts of a user interface. Here is a realistic multi-class example:

.caption {
  font-weight: 300;
  font-size: 12px;
}

.body {
  font-weight: 400;
  font-size: 16px;
}

.button-label {
  font-weight: 600;
  font-size: 14px;
}

.heading {
  font-weight: 700;
  font-size: 24px;
}

Each class targets a different UI context. Captions use a lighter weight to recede. Body text uses the default. Button labels use semi-bold for emphasis at smaller sizes. Headings use bold for clear visual priority.

Light weights (100 to 300) can work for large decorative text or secondary captions. They usually fail at small sizes, where thin strokes become hard to read. For most beginner projects, start with 400, 600, and 700. That gives you enough range to create clear contrast without relying on weights your font may not support.

Using Font Weight For Visual Hierarchy

Heavier text draws the eye first. Lighter text recedes. Font weight helps you separate headings, subheadings, body text, helper text, metadata, and calls to action.

Practical starting points:

• Headings: 600 to 700
• Body text: 400
• Helper text or metadata: 300 to 400
• Buttons and labels: 600

Weight works best alongside font size, spacing, and color. It should not carry all the design work alone. A heading that is bold but the same size as body text will not stand out the way you expect. Combine weight changes with size and spacing changes for a clear visual structure.

Bold, Bolder, Normal, And Lighter: What Changes And What Does Not

The four keyword values split into two categories: absolute and relative.

normal always resolves to 400. bold always resolves to 700. These are predictable.

lighter and bolder calculate their result based on the inherited font weight from the parent element. If a parent is set to 400, bolder might jump to 700. If the parent is already 700, bolder might go to 900, or it might stay at 700 if the font does not support 900.

When consistency matters, numeric values are the better choice. They remove the guesswork of inheritance and give you direct control over exactly which weight you are requesting.

Browser And Font Rendering Differences

Different browsers may render the same font weight slightly differently. The differences are usually subtle, but they exist.

In most cases, the differences between Chrome, Firefox, Safari, and Edge are minor for standard fonts. But if typography is important to your project, test your font weights across browsers and operating systems. A weight that looks clean on macOS might appear slightly heavier or lighter on Windows due to different font smoothing algorithms.

This is practical QA advice, not a major compatibility warning. Check your work on more than one device before shipping.

Accessibility And Readability Considerations

Very light text is hard to read. This is especially true at small sizes and on screens with lower pixel density.

Low contrast combined with a thin font weight is one of the most common readability problems in UI design. Text set to 100 or 200 can look polished in a design mockup but underperform on real screens where subpixel rendering, ambient light, and screen quality all affect clarity.

Practical recommendations:

• Avoid 100 or 200 for small body text
• Test text on real screens, not just in design files
• Check weight together with contrast, size, and spacing
• Reserve ultra-light styles for limited decorative use at large sizes

I would not use 100 or 200 for interface body text in a beginner project. The readability tradeoff is almost never worth it. Stick with 400 or higher for anything a user needs to read.

Common Mistakes Beginners Make With Font Weight

• Mistake: Assuming every number from 100 to 900 will look visibly different.
  Better approach: Check whether the chosen font actually includes the requested weight. Most system fonts support only two or three.
• Mistake: Using 900 for normal paragraph text.
  Better approach: Reserve heavy weights for headings and high-emphasis elements. Body text reads best at 400.
• Mistake: Relying on bolder and lighter for consistent styling.
  Better approach: Use numeric values when you need predictable results across components.
• Mistake: Requesting 500 and expecting a distinct visual result.
  Better approach: Test the output. Many fonts map 500 to the same rendered weight as 400.
• Mistake: Using very light text for small captions or instructions.
  Better approach: Keep instructional text at 400 or above for readability.
• Mistake: Confusing <strong> with font-weight: bold.
  Better approach: Use <strong> for semantic importance. Use the CSS font-weight property for visual styling.

A Simple Example Combining Font Weight With Other Font Styles

Font weight works best as part of a broader typography setup. Readable text is a combination of properties, not one value in isolation.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}

.caption {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: #666;
}

This snippet styles three levels of text. The body uses standard weight and generous line height for comfortable reading. The heading uses bold weight with tighter line height. The caption uses a lighter weight with muted color.

When adjusting typography, change weight alongside size, line height, and color. Changing only font-weight while ignoring everything else usually produces awkward results.

When To Use Numeric Values Vs Keyword Values

For quick demos, bold and normal are often enough. They communicate intent clearly and work in every font.

For production styling or any project with multiple text levels, numeric values give better control. They let you define exact weight steps across headings, labels, body text, and captions without relying on inheritance.

Use bolder and lighter only when you specifically want the weight to depend on the parent context. In most cases, that adds complexity without clear benefit.

Key Takeaways

• The CSS font-weight property controls text thickness, from thin to heavy.
• 400 maps to normal weight. 700 maps to bold.
• Not every font supports every numeric weight. The browser falls back to the nearest available one.
• Numeric values give more precise control than keyword values.
• Light weights (100 to 200) can hurt readability, especially at small sizes.
• Browser and operating system differences still affect rendering. Test important typography on real devices.

Start Building Your Front-End Skills

Understanding HTML/CSS font weight is one piece of a larger skill set. HTML, CSS, layout, and styling work together to create usable pages. Each concept builds on the last.

If you want to learn these fundamentals through hands-on projects rather than isolated tutorials, consider joining our specialized courses. You will build real pages, write working code, and develop the kind of applied front-end skills that translate directly into professional work.

Start Learning