Comment by chrismorgan | Hacker News Reader

Comment by chrismorgan | Hacker News Reader

Parent Full thread

I’m saying that geometrical scales are precisely what end up with at least one of those two problems. If the ratio at each level is too small, then the first few up from your base text size are too close to body text to be usable, and so people go skipping levels, even though that obviously corrupts the mathematical purity of the concept. If the ratio at each level is enough to make them useful, then you get too big (and too small) too quickly.

The only reason their values might seem to make any sense is if you have this weird idea that you should support at least five or six levels of headings. You actively shouldn’t.

Take the scale of 1.250 (the default of this tool). −1 is riskily small for any purpose, and −2 should never be used. +1 isn’t big enough for any kind of heading. +2 to +4 are reasonable heading sizes, but aren’t different enough from each other. +5 might be OK as a title, but very often you’ll want to go bigger. Depending on content, it might do for a heading style too.

Another mildly popular value: φ, 1.618. −1 is already too small for any purpose. +1 is decent for a subheading level, and +2 for a heading, and +3 for a title. (+3 is normally too big for any sort of heading; +4 could also be reasonable for a title.) But at that point you have only about four usable values, and where was the virtue in using a scale for them? You could have chosen more suitable values manually.

> But at that point you have only about four usable values, and where was the virtue in using a scale for them?

The virtue was in drastically reducing the space of correct answers.

How long would it take the average developer to pick sizes out of an infinite number of sizes? And how long would it take them to pick sizes out of a small number of sizes?

I know I do not want to fiddle with an infinitely large problem space.

It reduced the space by arbitrary choice. You are just as capable of arbitrarily choosing four numbers as one ratio. I believe in you, though I don’t know you. In fact, I believe you will do a better job in your arbitrary choice of four numbers than in your choice of one scaling factor.

Although the four values from φ are usable, they’re unlikely to be excellent for the purposes of anyone in particular. You can easily choose more suitable, and will if you consider your content and intended design rather than just slapping a number on it.

> Although the four values from φ are usable, they’re unlikely to be excellent

I am not a designer. Excellence is not for me by any stretch of the imagination.

It sounds like you have not yet figured that one out for yourself and are maybe severely misjudging your own capabilities. It is just absolutely, completely bonkers to suggest anybody can "easily" pull off "excellent" rhythm, space, dimensions, design.

"Just pick up the saxophone, wiggle your fingers, and off you go, Coltrane!"

What in the actual what are you talking about

Very well then, I shall call the four values from φ lacklustre and uninspired; yet people have occasionally presented them as though they have objective value or virtue, which I deny. I say that if you possess the wherewithal to choose that value to compute your font-sizes from (which is far from trivial, and there’s no reason why you would think it’s any good unless someone told you it was and you believed them), you can choose four values that look good to you, possibly based on recommendations from others just like you surelyl did with φ, and get a result that is likely to be at least as good.

We’re comparing font-size values for headings, not anything more in the design. I didn’t say anything about pulling off excellent rhythm, space, dimensions or design, nor would I.

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

> 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.

Yeah, that’s probably true. I only use 3 levels of headers on my website.

Reply on news.ycombinator.com