Hacker News new | ask | show | jobs
by dimmke 1122 days ago
The default font size is 16px. You can scale it down to 12px for mobile viewport sizes and up to 18px for extra large and then use relative sizing for everything, including the text size of all the elements on your page.

There's a well known book called The Elements of Typographic Style that deals with text size (among many other things.)

This scale isn't helpful because it's arbitrary and based off of math percentages. And the actual values are just decimal values. 1.25, 1.33, etc...

It's not any better than eyeballing, and could in fact be worse, where a heading size might actually look better at 1.3rem instead of 1.33rem but because you're forcing yourself to stick to math you are using a size that is slightly too big.

And if you are looking for someone to have done this work for you, I'd recommend using Tailwind which has good sane defaults for many elements of typesetting:

- https://tailwindcss-typography.vercel.app/

- https://tailwindcss.com/docs/typography-plugin

2 comments

> The default font size is 16px.

No, it’s not. You don’t statically know what the default font size is, because it depends on various user configuration and document language. For English text, it’s mostly 16px, but there are devices where the default is higher or lower.

> You can scale it down to 12px for mobile viewport sizes

Please don’t. I’d advise against going down to even 15px; 12px is madness, you should basically never have any text that small.

> I'd recommend using Tailwind

Eh, dubious for web sites. Tailwind is very clearly designed for and targeted at apps, and makes all kinds of decisions that are not suitable for general-purpose websites. It’s not terrible, since there have been enough people wanting to use it for general-purpose websites that they’ve made it tolerable, but it’s still going to be at least mildly painful to work with, because its actual defaults are deliberately extremely stupid, and adapting it to this kind of work requires effectively overriding quite a lot of stuff. (Disqualifier: I’ve never actually worked with Tailwind in anger, because I hate most of its defaults and near-defaults, and it just doesn’t match how I like to work philosophically, which is a pity, because I could quite enjoy working with something not far off it for some purposes. But a lot of the way it treats things like colour and dark mode is just objectively a terrible way of doing things—they designed themselves into a corner and insist on using tools they designed like an abundance of modifiers, even when they’re clearly inappropriate.)

I'm not going to respond to most of what you wrote, but the main point of my comment is that it is generally accepted practice to size text along a scale, when deciding different text sizes in a document, and Tailwind's text sizing defaults with their typographic plugin are widely used and considered acceptable.

You don't even have to use Tailwind, simply open the demo and look at how they scale the text size and line height on different elements. You could pull the computed styles from your browser.

You and I agree that using arbitrary numbers is pointless. You clearly have a lot of other strong opinions I don't care to debate with you about.

I am using Tailwind. It is great.