# Change font-weight based on the user's screen DPI

DevFeed: [Change font-weight based on the user's screen DPI](<https://devfeed.tech/articles/change-font-weight-based-on-the-user-s-screen-dpi-37273.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/font-weight-based-on-dpi/>)

Author: Stanko

Published: 2025-02-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Font](<https://devfeed.tech/topics/font.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Media Queries](<https://devfeed.tech/topics/media-queries.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>)

## AI overview

This tutorial explains that thin font weights can become blurry and difficult to read on low-DPI screens. It demonstrates progressive enhancement with CSS media queries: use a more readable default weight for low-DPI displays and apply a thinner weight on high-DPI displays. The technique can also be applied to font size and icon line width.

## Source excerpt

A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI screens. One common issue I noticed is that thin font weights can be hard to read on low-DPI screens. Since there are fewer pixels to render details, fine lines can appear blurry due to anti-aliasing. Here is an example of the same text rendered on two screens with different device pixel ratios. At the top is a hi-DPI screen (with a pixel ratio of 2), and below is a low-DPI screen (with a pixel ratio of 1). The font used is Inter, 24px tall, with a font weight of 100. This problem is a great example of how we can use progressive enhancement to improve the user experience. We'll set a default font weight that is readable on low-DPI screens, then use CSS media queries to target hi-DPI screens and apply thinner fonts. Here is a code example: // Default font weight for low-DPI screens h1 { font-weight: 300; } // Progressive enhancement for hi-DPI screens // Making font thinner and more elegant @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { h1 { font-weight: 100; } } This will set the font weight to 300 on low-DPI screens and 100 on hi-DPI screens. Feel free to adjust these values as needed. Additional applications # This is an example using font weight, but you can apply the same technique to other properties, such as font size or icon line width. Simulating low-DPI on Mac # This is a great tip from StackOverflow: Open System Settings > Accessibility > Zoom > Advanced > Uncheck "Smooth Images" Zoom out your browser to 50% Turn on the system Zoom (the default shortcut is Option + ⌘ + 8) This should give you a good idea of how your website appears on a low DPI screen. Sorry, Windows and Linux users! If you have a good solution for your system, please open a GitHub issue, and I'll add it here.