What is Font Weight?
Font Weight refers to the thickness or boldness of the strokes that make up a character in a specific font. In web development, font weights are defined by a numerical scale ranging from 100 (Ultra-Light or Hairline) to 900 (Ultra-Black or Heavy), with 400 typically representing "Normal" or "Regular" text and 700 representing standard "Bold."
Why Font Weight Matters in Visual Hierarchy?
Strategic use of font weight is one of the most powerful tools a designer has to control how a user scans a webpage.
- Information Architecture: Using a heavy weight (700 or 800) for H1 and H2 headers instantly separates them from the 400-weight paragraph text, allowing users to skim a 2,000-word case study easily.
- Clickability: Applying a semi-bold (600) weight to text inside a Call to Action (CTA) button or a Navbar link makes it stand out against the surrounding body copy, drawing the user's eye to interactive elements.
- Accessibility: Ultra-light font weights (100 or 200) often fail WCAG contrast ratio tests, especially on low-quality monitors. Maintaining a minimum weight of 400 for standard copy ensures B2B accessibility compliance.
- Aesthetic Pacing: Alternating font weights within a single headline (e.g., "The Smartest Way to Manage Cloud Security") creates typographic contrast that emphasizes the core value proposition.
Example from Flowtrix Projects
When creating a Design System for a Webflow Migration, Flowtrix strictens typographic rules. We purposefully limit the allowed font weights to three (e.g., 400 for body, 500 for buttons/labels, 700 for headings). This restriction not only creates a much cleaner, more consistent User Interface but also prevents the client from accidentally uploading bloated, unnecessary font files to the CMS, preserving the Lighthouse Score.
Master Webflow.
Get insights directly.
.avif)
.svg)
.svg)
