I recently changed the style of this blog. It was a trivial change, but the rationale is interesting. I removed the following CSS.
body {
font-size: 1.3em;
}
All the text on this blog is sized relatively based on the browsers’ default size. This is very easy to do by using the em or % CSS units. Both of which are relative to the size of the text in the parent element. For example, a heading can be 1.2em or 120% to be a bit larger than the text in the parent element. Alternatively you can also use rem, which is relative to the size of text in the root element instead of the parent element.
The main advantage is that it respects the user’s configuration. A user who likes bigger text (maybe they have bad vision) can just adjust their font size and the website will react. Previously I was bumping the font size over the user’s default because it seems that most operating systems and browsers default to quite small text. My relative bump was undoing this perceived “mistake” in the browser configuration. This isn’t completely unjustified, it makes sense to have larger text on a reading-focused site that has little superfluous elements consuming space. This highlights a limitation with a single default text size. A dense UI with short labels would likely be better suited with smaller text. Whereas long-form content cares little about how much can fit on one screen, instead valuing ease of reading above all else. The browser’s single default size is unable to encapsulate this nicely.
I can’t find an authoritative answer on what exactly the default font size means. But most discussions I have found seem to think that it should be suitable for long-form text. For example, this article (which ironically adjusts the default font size) found that a number of devices use a large default font size to provide a better reading experience.
At the end of the day there is no perfect solution. So I decided that it’s better to punish those with misconfigured browsers and operating systems than to punish those who configured their systems correctly (even if the former group is likely larger). I might change my mind again in the future, but for now this seems like the best choice.
Currently, my website uses the user’s defaults wherever possible. I understand that for some use cases (like games) it makes sense to have exciting and unique fonts and some companies feel it is important to push their “brand”. But for this site—which is just focused on sharing information—following the user’s preference seems like the right thing to do and is the route I try to take where possible. For example, this site also uses the user’s default font-face and the user’s preferred colour scheme.
Unfortunately, the web still forces me to make a lot of styling decisions myself. It would be great if I could ask the browser to apply much more default CSS, conceding most stylistic decisions to something under the user’s control. This would be much like “Reader Mode”, but automatically applied upon visiting supporting sites. But that is a topic for another day…
Top comments (0)