Font Sizing
Design Principles
How Many Header Styles to include?
Generally best to limit the number of header styles to about 3–4 distinct styles (e.g., H1, H2, H3, and possibly H4) to provide enough variation to create a clear content hierarchy without overwhelming the user. Here’s a breakdown of best practices for setting up header styles in terms of font size and line height:
Font Size Differences
Headings should have a progressive size difference, often following a scale (e.g., a 1.25–1.5x increase between each level).
Example Header Styles
H1 32px: Used for the primary page title or main heading. This is the most prominent header, typically used only once per page. A general rule is to keep H1 at least twice the body text size for readability and impact, especially on desktop displays.
H2 24px: Used for major section headings, helping to break down content under the main title.
H3 20px: Supports H2 as a subheading, commonly used for subsections within a major section.
H4 18px (optional): Used sparingly for smaller, detailed sections, if needed. It’s helpful for content-heavy pages but can often be omitted for simpler designs.
H1 Line-height 110%-120%, keep it impactful without excessive spacing. Usually H1 uses slightly lower line height to maintain its prominent look.
Other Headers’ Line-height 130%-150%, allowing for easier readability in paragraphs while preserving the header’s visual distinctiveness.
Body line-height 150%-200%,
Best Practice for Setting Font Size
In UI implementation, responsive scaling come into play. We consider making header sizes responsive. For example, using larger sizes on desktop and slightly smaller sizes on mobile.
Contrast with Body Text: Headers should have enough size contrast with body text to clearly delineate sections, making the content scannable.
H1, H2:
Use vw or vh for large, eye-catching elements like hero headings or banners where you want the text to scale with the viewport. These units are particularly effective for responsive designs across various devices.
Viewport units (vw for viewport width, vh for viewport height) make fonts responsive to screen size, adapting automatically as the viewport dimensions change. e.g. A heading set to 5vw will take up 5% of the viewport width, providing responsive scaling.
Headers & Body:
Use rem for consistent, scalable text sizing across the app. These units are relative to the root (<html>) font size, making them ideal for setting consistent typography across an entire application.
Set the base font size (e.g., 16px) on the root element, and use rem for scaling typography consistently. This approach ensures a unified look and allows for quick adjustments at the root level for accessibility or scaling purposes. e.g. 1rem equals the root font size (e.g., 16px), so 1.5rem would be 24px.
legal text, labels
Use px sparingly, mainly for fixed-size text or elements that require precision, such as legal text, labels, or UI elements that need strict readability across devices. e..g Set a label to 12px if you need consistent readability regardless of the screen size. px units provide exact control, making them useful for very small text, icons, or elements that should not scale with the viewport.
Getting a bit technical here …
Adding Responsiveness with clamp()
clamp() is a simple solution that enforces readability with bounds, especially helpful in large-scale products where consistent scaling and ease of maintenance are essential. clamp() is also preferable for teams prioritizing accessibility and clear visual hierarchy across devices.
h1 {
font-size: clamp(2rem, 5vw, 4rem); /* Hero header with dynamic scaling */
}
h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem); /* Primary section headers */
}
h3 {
font-size: 1.5rem; /* Secondary headers, consistent with global rem */
}- Automatic Responsiveness with Boundaries:
clamp()combines the flexibility of dynamic sizing with fixed limits, making it ideal for large-scale applications that require scalability without extreme size changes. For example,clamp(1.5rem, 3vw, 3rem)sets a lower, flexible, and upper limit, which means the font size will grow with the viewport but stay within bounds. - Built-in Min and Max Limits: clamp() allows you to set minimum and maximum bounds directly, providing greater control and ensuring that font sizes stay within a defined range. This feature is particularly valuable for accessibility and preventing readability issues on very small or large screens.
- Performance Optimization: Since
clamp()eliminates the need for complex media queries for font sizing, it reduces CSS complexity and improves maintainability. This is particularly beneficial in large codebases where simplicity and efficiency are critical.
