Font weights determine how thick or thin the characters of a font appear. They help define the visual hierarchy of text on a website and influence how easily content can be read. Common weight names include “normal,” “bold,” “light,” and sometimes numeric values like 400 or 700, especially in CSS. Each font family may support different weight options, so designers should always check compatibility before relying on a specific value.

Using font weights effectively helps guide users' attention to important areas of the page. For example, headlines typically use heavier weights to stand out, while body text stays lighter for readability. Font weight also contributes to the mood or feel of the site—heavier fonts can feel bold and modern, while lighter ones may appear more delicate or professional. Whether you're coding or using a website builder, understanding how weights work is key to getting your typography right.

How font weights are represented in CSS

In CSS, font weights are defined using either keyword values or numeric values ranging from 100 to 900. For instance, font-weight: normal; is equivalent to font-weight: 400;, while font-weight: bold; is usually the same as font-weight: 700;. This numerical system offers more control when customizing typography on your site.

Not all fonts support every numeric weight. Some may only offer 400 and 700, while others include many steps in between. If a weight you specify isn’t supported, the browser will approximate the closest available one. It’s always a good idea to test your chosen font family across devices and browsers to see how the weights are rendered in practice.

Why font weights matter for accessibility and UX

Font weights play a big role in creating a user-friendly experience. Using overly light fonts for body text can reduce legibility, especially for people with vision impairments or those browsing in bright conditions. On the flip side, using too many bold weights throughout the page can be visually overwhelming and make it hard to identify what’s most important.

A balanced approach improves both readability and visual flow. Stick with standard weights like 400 for paragraphs and reserve bold (700) for headings or important calls to action. Designers aiming for better SEO and accessibility often follow web accessibility guidelines that recommend sufficient contrast and clarity—including proper font weight usage.

Common font weight examples

Here are some examples of how font weights are typically used:

• 100 (Thin): Great for large display text or logos, but not ideal for long reading.
• 300 (Light): Used for subtle design elements or minimalist sites.
• 400 (Normal): Best for body text and general readability.
• 700 (Bold): Perfect for headings, CTAs, or areas needing emphasis.
• 900 (Black): Very thick and heavy, used sparingly for visual punch.

Most sites use a combination of two or three font weights to create contrast without overwhelming the reader. Tools like Google Fonts let you preview which weights are available for each font and how they look in different sizes or layouts.

Tips for using font weights effectively

When working on your site’s typography, consider these practical tips:

• Limit weight variations to create a clean, cohesive look.
• Stick to readable weights for paragraphs—avoid going too thin or too heavy.
• Pair weights with font styles (like italics) carefully to maintain balance.
• Test contrast between your text and background colors, especially when using lighter weights.
• Use hierarchy: Headlines should be heavier than subheadings or body copy to help users scan the page.

Whether you're designing a blog or building a business homepage, thoughtful font weight choices make a big difference in the final user experience.

FAQs about font weight

What is the difference between font weight and font size?

Font weight controls how thick the strokes of the letters are, while font size determines how big the text appears on the screen. Both are important for readability, but they serve different purposes. Font size affects layout and flow, while font weight affects emphasis and tone. Together, they help guide users through your content.

Are all font weights supported by every browser?

Not always. While most modern browsers support standard font weight values, actual rendering depends on the font family you use. If a weight isn’t available, browsers will substitute the closest matching one, which might not look exactly as you expected. It’s best to test your site across different browsers and platforms.

How many font weights should I use on a website?

Using two to three different weights is usually enough. For example, a 400 weight for body text, a 700 for headings, and maybe a 300 for subheadings or highlights. Too many weights can make your design feel cluttered and inconsistent. Stick to a small range to keep your design focused and easy to read.

Can font weights affect page load speed?

Yes, especially if you load multiple weights from an external service like Google Fonts. Each additional weight adds to the file size and can slightly slow down your page. To optimize performance, only include the weights you plan to use and avoid loading unused styles.

Do font weights impact SEO?

Font weights don't directly affect SEO, but they do influence how users interact with your content. Clear, readable text improves engagement and reduces bounce rates, which are positive signals for search engines. Using font weights properly can also support accessibility, which is becoming more important in search ranking algorithms.

Build better design with smart choices

Choosing the right font weights can make or break your website’s look and usability. Whether you're starting from scratch or refreshing your site’s style, using clean, accessible typography helps your brand feel more professional and easier to engage with. B12’s AI website builder helps you design with the right visual elements from the start—including font choices that enhance user experience. Get started today and let B12 help you create a site that looks and reads beautifully.