You might recall that Alvaro suggests bumping up font-size
to 1.25rem
from the default user agent size of 16px
. Sebastian Laube pokes at that:
I wouldn’t adopt Alvaro’s suggestion without further ado, as I would waste so much space on a smartphone, for example, and many users would probably be irritated by the large font.
I set a font size of
1.2rem
from a certain viewport size. But this also has to be done carefully, because then grey areas arise in which media queries suddenly fall back into another area…
I personally agree with Alvaro that the default 16px
size is too small. That’s just how I feel as someone who is uncomfortably close to wearing the bottoms of actual Coke bottles to see anything clearly on a screen.
On the flip side, I professionally agree with Sebastian, not that many users would probably be irritated by the large font, but to openly question an approach rather than adopting someone else’s approach wholesale based on a single blog post. It may very well be that a font-size
bump is the right approach. Everything is relative, after all, and we ought to be listening to the people who use the thing we’re making for decisions like this.
The much bigger question is the one Sebastian poses right at the end there:
Should browsers perhaps use a larger font size on large screens from the outset if the user does not specify otherwise? Or do we need an information campaign to make them aware that they should check their system settings or set a different default font size in the browser?
Fantastic, right?! I’m honestly unsure where I’d draw the viewport breakpoint for 16px
being either too large or small and where to start making adjustments. Is 16px
the right default at any viewport size? Or perhaps user agents ought to consider a fluid type implementation that defines a default font scale and range of sizes instead? It’s great food for thought.
I now also think that Fluid Typo is a good solution. This way the designers still has some control. Together with a basic font size that adapts to the available viewport estate, we can probably manage without new browser standards for the time being…
I often find the default 16px is too small on my phone, but not usually an issue on desktop. It depends on the font used too.
Also what kind of website/content are we talking about. For me I’m less concerned if it’s a marketing site or app, but more concerned if it’s a news article, blog post or other prose heavy content.
At least on desktop browsers it’s trivial to scale up a web page a couple of notches. Make sure that works well and everyone should be happy.
I really dislike websites that use huge font sizes on large viewport. Stick to the default please – and if that’s too small I’ll scale it myself, so that scaling works consistently for all content on that device. What’s the point of second guessing user set defaults?
I would mostly like to oppose the ideas:
To get a definitive answer, this would need user research and the answer would very much depend on the project still. I feel that the user preference should be mostly honored and that is mostly done by staying close to the default or somewhat larger for most use cases.
While 14px as a default of earlier days is mostly dead (still my preference for sites like Wikipedia), 16px for content-heavy sites (Wikipedia default, many online news sites, MDN) is still popular and around 18px for easy-to-read texts. Anything above quickly limits information density: The 20px that Medium chose feel like they want to conceal that articles are often only a couple of sentences long. That might be fine for some use cases, but it’s not a good default. If a user wants or needs larger fonts in general, he can use display scaling and get a consistent result between applications and sites. This is mostly done during device setup nowadays.
Wildly different defaults should always be backed by a strong argument (little content, specific audience, artistic purposes).
Fluid typography can be nice for a consistent design, but does not necessarily help with UX. Take this article: The layout looks pleasant, but I can’t read it on one page on a 32″ 4K screen at 125% display scaling unless I shrink the browser window. In this case, it is made worse by the fact that the design is not fluid and line lengths are not adjusted accordingly. Additionally, resizing the window moves the scroll position and content unnecessarily much, which can be annoying on longer pages.
I feel the best place for anything but subtle fluid typography are pages with a focus on design, not textual content. One of the reasons for larger displays and higher resolutions is still the ability to display more content, not scale everything up.
I may be old school but I don’t understand. The content stops growing after a certain viewport width; why should the text grow too? Reading 1920px of text, even if it’s 50 characters per line with a huge font size, is uncomfortable.
It’s all about context. The larger the screen, the better chances that your face is further from the screen — and vice versa. Think of folks who hold phones right up to their schnoz while walking compared to the screen being 2-3 feet from your face when sitting at your desk.
I get it, but that is a device type thing, which should be another media query. I don’t think resizing my window should resize the text inside. I can see, though, that a media query for device form factor could be useful here.
Sebastian, you refer to an older article in German with an apology about it not being translated. I tried Google Translate and found it quite adequate, although my German is quite rusty.
Usually the native zoom level of the device will take care of most of the reason to change the font-size, but this mostly works out when it’s a handheld device with a built-in screen. Once you start connecting the computing device to a screen, it starts getting difficult.
For instance, I am now typing on a laptop, connected to a TV. The TV (max) resolution is 1920×1080, but Windows recommends a zoom level of 100%. I’m not sure whether Windows is making an informed recommendation on zoom level here, it might not be getting enough information from the TV to determine what the zoom level should be. The physical size of the screen should inform the zoom level.
I’m guessing it’s a 42″ TV, so the zoom level should reflect that, rather than it being a laptop screen at the same resolution. My laptop screen is the same resolution, 1920×1080, yet Windows recommends a 150% zoom level for it.
The 100% zoom level on the TV makes text too small, I have to pump it up to at least 125% for text to be readable at about 1 meter away from the screen. However, a more natural distance away from the TV would probably be 2 or 3 meters, where the zoom level would have to reflect that.
In Media Queries level 4, they’ve done away with all media types except print and screen; it’s never been possible to use
@media tv
anyways, due to lack of support, which might have helped out here.We’re left with relying on the OS providing a reasonable zoom level for the screen resolution, and assuming the standard font-size thereby looks OK since it has already been zoomed to fit the physical device size.
That said, the 16px standard is probably based on older PC screens where we had a lower resolution and shorter viewing distance than we tend to have today. I don’t recall the OS or browser ever asking my opinion as a user what size text I find comfortable. That might be a good idea when it comes to accessibility.
Instead of annoying cookie popups on every single site we visit, we could at least have one initial popup from the browser asking what text size we find comfortable.
As I’m sight-disabled, I have been setting all the base font sizes of any browsers I use to 17px.
Some sites are next to unreadable without setting their font size to at least +20%.
So, yeah. 18px should be THE default.
I dont care about people who think their own perfect eyesight makes them eligible to let others suffer. Also, not everyone is a developer and thus easily able to enforce proper font sizes (eg. using userChrome.css).
Hint: Your eyes wont get better over the years. Mine were that bad from the very start, and neither would they improve.
cu, w0lf.
This is a very timely article, as I’ve recently been struggling with a similar question on a few of my own sites.
A few weeks ago, I was tweaking the layout of my personal website, only to discover that it looked radically different on Windows* than on the Fedora machine I was developing on. It turns out that the Windows zoom level also changes website font sizes, whereas the Gnome UI font size setting applies only to application windows, not the browser.
I was using a font-size based upon viewport width, but was effectively underestimating how most people would see the font size by 25% (the default windows setting seems to be 125% for 1080p displays, as far as I can tell). What on my Linux machine looked like a very readable font size, was on Windows far too large and meant my nice new block layout would only ever be one column wide (the dangers of using rems for layout, it seems).
The moral of this story? I should have been respecting user settings. If only, as you say, it was more obvious for users how to increase their font size. Some kind of standardisation from browsers here would be welcome, it’s just a shame it won’t happen as it would break many existing websites misusing the font-size property like I was.
*I don’t use Windows for anything personal anymore, so only noticed the discrepancy after pushing it live and showing my Partner “my lovely new site” on her laptop.