1

I tried to search online on whether or not font should adapt with the size of the window and I found a lot of results on how to do it but not many whether I should ever do it. I tested it on multiple sites (this one included) by changing the size of the window and it seems like most websites don't ever change font size.

This doesn't make sense to me at all, since the same font will display as larger or smaller, depending on the resolution of the screen - in other words, I want to know why fonts seem to always be defined in terms of pixels (rem uses pixels as well, just indirectly), no matter how big that pixel is physically on the screen, instead of scaling relative to the size of the page. But I also just started learning Web Design, so I'd rather assume there is something I don't understand rather than everyone else is wrong.

Should the font size ever change depending on the size of the screen? If so, then when? Should the font be fully adaptive (like with clamp and vw) or is it better to hand-pick font sizes for specific CSS breakpoints?

4
  • Does this answer your question? Font-sizes smaller on mobile, yes or no?
    – Danielillo
    Feb 2 at 21:19
  • If you type "responsive font size" in the search bar, you will find many answers on this topic.
    – Danielillo
    Feb 2 at 21:21
  • @Danielillo I did search that specific query and I didn't find the answer to my question. I want to know why fonts seem to always be defined in terms of pixels (rem uses pixels as well, just indirectly) instead of scaling relative to the size of the page. I didn't see a question about it or answer explaining it on first two pages of the results. Feb 2 at 21:43
  • 1
    @ReverentLapwing Can you rephrase to original question to include your comment? That'll make it clearer. Feb 14 at 9:24

3 Answers 3

2

Since you brought up percent based changes (CSS units wv, wh, %), I want to address that specifically.

Unlike images, text can reflow itself based on typographical rules. If you have a text block and half its width, the text already is fully responsive to that change and will simply flow to make the box twice as long instead, intelligently picking breakpoints inside the string (usually at spaces).

Keeping the line breaks within a paragraph identical on all devices isn't necessary (unless you're doing this), and trying to do it would be detremental: A paragraph designed on desktop scaled down to phone size would suddenly be tiny font, and given that phones tend to be used in suboptimal viewing conditions (ie outside), tiny font would require the user to hold the phone very close to their face to be able to read anything - if it was usable at all.


Readability of text is not a function of how large the canvas is, but a function of the apparent size of the text, which you might measure in degrees and arc minutes. A letter body and newspaper body thus can have a very similar size despite newsletters being many times larger than letters, as both are designed to be read at a similar distance. Text displayed on big and small windows on your computer similarly need to stay the same size. If the screen is larger than you expected - awesome, more content for the user to see at once!

2
  • Thank you for the answer. Responsive text designed for 1080p would scale down to a tiny size on a phone but I see on the web a lot of methods to determine if the website is displayed on a phone or a computer. On the other hand, non-responsive body text scaled up to 720p from 1080p feels gigantic to someone used to higher resolution. This is the reason why I'm asking this question. Feb 2 at 21:52
  • A letter and a newspaper have a very similar body font size despite the newspaper being many times larger. I updated the answer for this. Feb 3 at 9:54
1

One of the reasons for the answer being "never" I've found since posting this question is that adaptive font doesn't behave the way user would expect when zooming in or out. With a breakpoint changing size of the font as the resolution gets smaller, text gets smaller as well (or stays constant) as you zoom in, which is the reverse of what should happen.

Another reason is that it's impossible to differentiate between a shrunk window on 1080p and full screen on 720p - both have the same resolution but with adaptive fonts both should have different size of font. Which is a problem because CSS knows nothing about the screen size other than resolution. With fixed fonts both are legible, with adaptive fonts full screen 720p will look better but 1080p windowed would be too small to read.

I thought I found one use for adaptive font in having fixed size elements, like a title card for a website. But quickly I found that the layout gets completely messed up because of the elements that are not scaling. Important elements retain their proportions but feel less important as they shrink compared to the surrounding elements.

1

Yes, changing the font size based on the screen size is crucial for making websites easy to use on different devices.

There are a few reasons why changing font size matters:

1- Font size needs to be changed so the text can be easy to read on different sizes screens

2- Bigger text helps people with vision problems to use the website more easily.

3- Having consistent and easy-to-read text on all devices makes people happier when using the website and also better for user experience

So, should font size change depending on the screen size?

Yes! It's crucial for making websites work well on phones, tablets, and computers.

There are two main ways to do this:

Fully adaptive: Techniques like clamp and vw offer continuous font size adjustment throughout the entire screen size range, providing flexibility

Breakpoints: Setting font sizes at specific screen width breakpoints offers more control and customization but might require more work for complex layouts

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.