Font weight refers to the thickness or density of a typeface’s strokes. By adjusting font weight, you can improve the legibility of text, highlight critical information, and create a visual hierarchy on a web page or application.
In CSS, the font-weight property specifies the weight, or thickness, of a font. Values range from 100 (thin) to 900 (bold), with regular weight typically set at 400 and bold at 700. For example, the following CSS code snippet sets the font weight of all text in the body of a webpage to bold:
body { font-weight: bold; }
In HTML, inline styles or linked CSS files define font weight. For example, the following inline style snippet sets the font weight for “this text is extra bold” to 700.
<p style="font-weight: 700;">This text is extra bold.</p>
Visit Webflow University to learn more about using different font weights with variable fonts.
