Getting the Browser Default Font Size

Many users adjust their browser’s default font size for better readability. As developers, respecting these preferences is crucial for accessibility and user experience.

Here’s a reliable method to detect the browser’s default font size using CSS and JavaScript.

The CSS Foundation

First, create an element with the medium keyword, which always corresponds to the browser’s default font size:

.measure-element {
  font-size: medium;
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
}

The medium keyword is special—it’s not affected by parent elements or CSS resets, making it the most reliable way to access the true browser default.

Reading the Value with JavaScript

Once the element is styled, we can measure it programmatically:

// Create and append the measuring element
const measureElement = document.createElement('div');
measureElement.className = 'measure-element';
measureElement.textContent = 'M'; // Use a character for measurement
document.body.appendChild(measureElement);

// Get the computed font size
const fontSize = parseInt(getComputedStyle(measureElement).fontSize, 10);

// Clean up
document.body.removeChild(measureElement);

console.log(`Default font size: ${fontSize}px`);

Why This Matters

Different users have different needs:

• Default (16px): Most users keep this setting
• Large (20px): Users who prefer slightly larger text
• Very Large (24px): Users with vision difficulties or high-DPI displays

By detecting and respecting these preferences, your application becomes more accessible and user-friendly.

Practical Applications

Use this technique to:

• Scale UI components proportionally to font size
• Adjust spacing and layout based on user preferences
• Ensure consistent relative sizing across different devices
• Build truly responsive designs that adapt to accessibility settings

This approach ensures your web application respects user preferences while maintaining visual harmony across different font size settings.