Get the default font size

📰 Medium · Programming

Learn how to get the default font size in a browser using the 'medium' CSS keyword, which bypasses stylesheet overrides and reads the browser setting directly.

intermediate Published 17 Apr 2026

Action Steps

Create a temporary div element using document.createElement('div')
Set the font size of the div element to 'medium' using el.style.fontSize = 'medium'
Append the div element to the body of the HTML document using document.body.appendChild(el)
Get the computed font size of the div element using getComputedStyle(el).fontSize
Remove the temporary div element from the HTML document using document.body.removeChild(el)

Who Needs to Know This

Frontend developers and designers can benefit from this knowledge to ensure consistent typography across different user settings and devices.

Key Insight

💡 The 'medium' CSS keyword is the only reliable way to read the true default font size in a browser, as it bypasses stylesheet overrides and reads the browser setting directly.

Key Takeaways

Learn how to get the default font size in a browser using the 'medium' CSS keyword, which bypasses stylesheet overrides and reads the browser setting directly.

Full Article

Title: The special css ‘Medium’ keyword

URL Source: https://medium.com/@niikkhilsharma/get-the-default-font-size-982c6f450ac1?source=rss------programming-5

Published Time: 2026-04-17T18:10:47Z

Markdown Content:
# The special css ‘Medium’ keyword. getComputedStyle lies to you. Here's… | by Nikhil Sharma | Apr, 2026 | Medium

[Sitemap](https://medium.com/sitemap/sitemap.xml)

[Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40niikkhilsharma%2Fget-the-default-font-size-982c6f450ac1&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

[](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------)

Get app

[Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)

[Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40niikkhilsharma%2Fget-the-default-font-size-982c6f450ac1&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

![Image 1](https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png)

# The special css ‘Medium’ keyword

[![Image 2: Nikhil Sharma](https://miro.medium.com/v2/da:true/resize:fill:64:64/0*sRRcfa_LsKrrozhf)](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)

[Nikhil Sharma](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)

1 min read

·

Just now

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2F982c6f450ac1&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40niikkhilsharma%2Fget-the-default-font-size-982c6f450ac1&user=Nikhil+Sharma&userId=e607d8884e65&source=---header_actions--982c6f450ac1---------------------clap_footer------------------)

--

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F982c6f450ac1&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40niikkhilsharma%2Fget-the-default-font-size-982c6f450ac1&source=---header_actions--982c6f450ac1---------------------bookmark_footer------------------)

[Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3D982c6f450ac1&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40niikkhilsharma%2Fget-the-default-font-size-982c6f450ac1&source=---header_actions--982c6f450ac1---------------------post_audio_button------------------)

Share

The browser default font size is 16px, but users can change it in the browser settings. And if you want to get that value then getComputedValue() won’t work.

Why? Because your stylesheet file has already overwritten it.

So, that way to get the browser default font-size value is

const el = document.createElement('div')

el.style.fontSize = 'medium'

document.body.appendChild(el)

const defaultFontSize = parseFloat(getComputedStyle(el).fontSize)

document.body.removeChild(el)

return defaultFontSize
If the user has their browser font-size set to “Very large” then in that case it return `24`, instead of `16`. The medium keyword directly goes to your browser settings and skips anything in your stylesheet.

This is acutally usefull when rendering text inside the `<canvas>`.

**Key Takeaway**: `rem` units are relative to the root font size (which your CSS might override), but `medium` goes straight to the browser setting — making it the only reliable way to read the true default.

[JavaScript](h

Read full article → ← Back to Reads

Get the default font size

Key Takeaways

Full Article

Related Videos