Can I use viewport units for the fixed text?

Viewport units (vw, vh) scale with the window size, not the font size setting, so they can be used if you want the text to grow with the viewport.

Will this break mobile responsiveness?

No, because only the navigation text is fixed; the rest of the layout uses relative units and will adapt to different screen sizes.

2026-09-18 · Q&A guide

Keep Navigation Text Fixed with CSS: Prevent Browser Font Scaling

Use CSS to lock navigation text at a fixed size, so browser zoom or user‑defined font settings don’t affect it.

Why Fixed Font Size Matters

Navigation bars often host brand names, logo text or key links that need to stay legible and proportional to the layout. When a user increases the default font size in their browser, the entire page scales, but the navigation text can become distorted, breaking the visual hierarchy. Keeping the nav text at a constant size preserves design intent while still allowing the rest of the content to adapt.

Understanding Browser Font Scaling

Browsers apply a global font size based on the user’s settings or zoom level. All relative units (rem, em, %) inherit from this root value. If the root changes, every element that uses relative units will change proportionally. To isolate an element, you must break that inheritance chain.

The CSS Trick: Using em with a Root Reset

Reset the root font size to a fixed pixel value, then use em units for everything else. The element you want to keep constant will be set in pixels, so it ignores the root change.

html {
  font-size: 16px; /* fixed baseline */
}

body {
  font-size: 1rem; /* inherits 16px */
}

.nav {
  font-size: 1.125rem; /* 18px */
}

.nav-fixed {
  font-size: 14px; /* fixed, independent of zoom */
}

Applying to a Single Element

Wrap the navigation text in a container with a pixel‑based font size. All other text can remain fluid. This approach keeps the nav text stable across zoom levels while the rest of the page scales normally.

.navbar {
  font-size: 14px; /* fixed */
  line-height: 1.4;
}

.navbar a {
  display: inline-block;
  padding: 0.5rem 1rem;
}

/* Rest of the page uses relative units */
.content {
  font-size: 1rem;
}

Cross‑Browser Pitfalls & Accessibility

Pixels are not affected by the user’s font‑size preference, which can hinder accessibility for visually impaired users. Consider using a minimum font size with media queries or the CSS clamp() function to provide a small range of scaling while keeping the design stable.

Takeaway: Lock the nav font with a parent reset and a pixel unit, keeping the rest of the page fluid.