Get the default font size
📰 Medium · JavaScript
Learn how to get the default font size in the browser using JavaScript, which is useful for rendering text inside canvas elements
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 div element from the body of 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 their applications
Key Insight
💡 The 'medium' keyword in CSS directly references the browser's default font size, skipping any stylesheet overrides
Share This
💡 Get the default font size in the browser using JavaScript! Useful for rendering text inside canvas elements
Key Takeaways
Learn how to get the default font size in the browser using JavaScript, which is useful for rendering text inside canvas elements
Full Article
Title: The special css ‘Medium’ keyword
URL Source: https://medium.com/@niikkhilsharma/get-the-default-font-size-982c6f450ac1?source=rss------javascript-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------------------)
# The special css ‘Medium’ keyword
[](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)
[Nikhil Sharma](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)
Follow
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.
## Get Nikhil Sharma’s stories in your inbox
Join Medium for free to get updates from this writer.
Subscribe
Subscribe
- [x]
Remember me for faster sign in
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
URL Source: https://medium.com/@niikkhilsharma/get-the-default-font-size-982c6f450ac1?source=rss------javascript-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------------------)
# The special css ‘Medium’ keyword
[](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)
[Nikhil Sharma](https://medium.com/@niikkhilsharma?source=post_page---byline--982c6f450ac1---------------------------------------)
Follow
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.
## Get Nikhil Sharma’s stories in your inbox
Join Medium for free to get updates from this writer.
Subscribe
Subscribe
- [x]
Remember me for faster sign in
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
DeepCamp AI