'font-' vs 'text-' in CSS property names

Question

What is the difference between the terms 'text' and 'font' as used in CSS property names? Do they mean the same thing, or is there a semantic difference between a CSS property name starting with font- and one starting with text-?

For example, why do we have these CSS properties:

font-size: 34px; text-decoration: underline; 

instead of them being named like this?

font-size: 34px; font-decoration: underline; 

or like this?

text-size: 34px; text-decoration: underline; 

Is there a semantic difference in the way font- and text- are being used here, or is the choice of prefix completely arbitrary?

Answer 1

As far as my understanding goes about this:

Text: The way the layout and presentation is computed.

Font: A character to glyph mapping. The 1-to-1 'mapping' doesn't entirely hold up when you consider ligatures and other advanced font features, but in general it is a good mental model. The font determines the shape of the characters.

You can underline text drawn with a certain font, but you cannot underline the font itself. You can, though, resize the shapes such that text drawn with that font has larger glyphs. (hence, font-size)

That's also why you have font-style: italic and not text-style: italic, since the actual shapes change when you typeset in italic. The same goes with font-weight vs text-weight.

Hope this helps.

---

If you look at the properties starting with text- and those starting with font- you can see a clear difference:

text-align text-decoration text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap 

These are all used for layout, positioning or visual presentation of the text.

font font-family font-size font-style font-variant font-weight @font-face font-size-adjust font-stretch 

And these are all used to transform the shapes of the characters, the glyphs.