Respecting User Font Preferences – What’s Possible (Part 1)

Entry categories AccessibilityDesign
Two Paintings of Deer Antlers (ca. 1762–1767) by The Qianlong Emperor. Original from The MET Museum. Digitally enhanced by rawpixel.

Content is king. So respecting how users choose to consume that content is absolutely critical.

(PS: If you’re just here to see how to scale iOS font sizes to respect user preferences, click here for that and the TLDR)

Out with the old

Early in my career, I consistently chose a fixed pixel size for my designs. I wanted full control of how things looked. The design, in the end, was all about me and what I liked. Ignorant, but true.

Responsive design was the first death knell of this idea for me. Especially as the swath of Android devices and sizes prevented me from focusing on a specific pixel dimension to design for. Brad Frost’s “-ish” perfectly articulates where my mindset is currently at. Container queries are only going to further this. Fluid design is wonderful. Nailing the cadence of this beautifully ordered & chaotic design is deliciously wonderful. The web, now more than ever feels like an organic system, not constrained to boxes and grids (while still using them 😁).

If responsive design changed how I thought about layout, accessibility has changed how I think about type design. Why do I get to choose how you read, if you’ve spent the time setting up your defaults?

But the big question here is, do browsers even allow users to set a default?

What’s possible

Desktop browsers

Looking at desktop-based browsers on both Mac and Windows (the latest versions of everything), Chrome and Edge work exactly the same on each OS. Users can use a large range of preset sizes and customize the default font style, the serif font style, the sans-serif font style, and the monospaced font style.

Microsoft Edge Chromium font settings running on MacOS
Microsoft Edge Chromium font settings running on macOS. Users may customize default size, minimum size, and various default font style font families. I chose this screenshot because it’s the trifecta of competitive collaboration. Frenemies FTW.

Firefox, my favorite browser, also does the same thing on both Windows and macOS. It is the best experience in my mind, as it does everything Chromium does but lets users ignore ignorant design choices. It also lets users fix that weird 13px monospace issue if they want. (Why is that a thing?)

Firefox on Mac font settings
Firefox on Mac font settings allows users to customize font families, default font size, minimum font size, and lets users override design choices.

Safari on desktop though… Not great. There is no way to set user font preference for almost anything. The best a user can do is cap the minimum font size. Sad times.

MacOS Safari font settings
Safari on macOS font settings only allows users to cap the minimum font size.

Android browsers

Next up are Android browsers. Again, Chrome and Edge do the exact same things here. Both are manually set by the user in the settings. Same idea as Desktop.

Chrome on Android font settings
Chrome on Android font settings allows users to manually adjust size only.

Firefox is a real pleasure here, however. They not only allow user font preferences to be manually set, but they also respect the OS text scaling by default! This is in my mind is the absolute best way to do this. Kudos again Firefox team. You deserve far more respect than you get.

Firefox on Android font settings
Firefox on Android font settings uses system size by default. What a refreshing treat.

And lastly, Samsung’s browser does the bare minimum and just lets users customize size only.

Samsung browser on Android font settings
Samsung browser on Android font settings does the bare minimum. But at least it does it.

iOS browsers (and how to finally fix them)

By default, every browser on iOS must use the Safari web engine. No ifs-ands-or-buts about it. And that Safari web engine works just like the Desktop one by default. No default font customization. And for years, most folks seem to have put up with that.

Safari on iOS default font sizes
Safari on iOS with default unchangeable font size

But I have great news. iOS had a very obscure feature that was enabled in iOS 7 that lets CSS use the system font style.

:root{font:-apple-system-body}

I was clued into Dynamic Type in this old TPGi (formerly Paceillo Group) article. It also seems that others too had also discovered this. The great news is this sets size, font-family, weight, font-variant, and line-height. That means all REM-based values now scale with user preference, a very big deal for scaling all aspects of a UI.

However, there was one sticking point. As Jonathan Neal pointed out, it affects Desktop Safari too (and makes the baseline font shift from 16 pixels to 13). This means that iOS Safari would need to be targeted, and Desktop Safari excluded.

More great news. Using @supports to check to see if -apple-system-body support existed, but touch-specific support didn’t, I was able to create a targeted exclusion and reset Desktop Safari back to its very sad fixed 16px. As far as I know, this is a brand new Desktop Safari hack debut.

:root{font:-apple-system-body}
@supports (font: -apple-system-body) and (not(-webkit-touch-callout: default)){
:root{font-size:16px}
}

And so my friends, yes it is now possible to take responsible advantage of user font preferences on iOS. Go forth, and blend your native OS and Safari Webview apps comfortably and seamlessly now.

iOS font settings scaled all the way up
iOS font settings scaled all the way up
Safari on iOS with live font scaling
Safari on iOS with live font scaling based on Accessibility setting.

TLDR

People can set their font preferences in every browser but Desktop Safari, and with a little work, you can also enable this in iOS yourself.

I’ve submitted this fix to many major CSS resets, normalizers, and sanitizers. I’ve also suggested to the iOS Safari dev team to set this as a default in the iOS User-Agent Stylesheet. I’d love to see a groundswell of support from the dev community to drive this change in iOS for the good of users everywhere also.

End of the day, respect your user’s preferences. In the next part of this micro-series, I’d like to talk about designing with type-based preferences, and some small tweaks that you may want to consider instead of just designing with REM and EM exclusively. See you then.

Opinions and views expressed here don't necessarily reflect those of my employer.
Posted on