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

Answer 2

The parts of a CSS property name have no meaning, and the property name as a whole has only the meaning assigned to it in CSS specifications (or drafts). Usually the names, when interpreted as English words, are suggestive of the meaning, but the name does not define the meaning, and some names are outright misleading. (For example, white-space affects division into lines even in contexts where no whitespace characters are involved.)

So the names are just identifiers, but there might be some systematics in the assignment of names. As it happens, property names that start with font- relate to the choice of typeface used to render characters or a specific way of using a typeface. Property names that start with text- relate to other aspects of formatting text (characters).

This division is relatively clear, but it depends on the techniques: some features of formatting are font-related, due to the way font technologies work, some are not.

The division is reflected in CSS3 “module” division: font-related features are defined in CSS Fonts Module Level 3 (which defines properties with names beginning with font), whereas other text-formatting features are mostly defined in CSS Text Module Level 3 (which defines some properties with names beginning with text-, but also other properties).

Answer 3

Looking over the font- properties listed on MDN's CSS Reference, it seems to me that properties starting with font- affect, or at least have the potential to affect, the choice of which font from within the font-family to use to draw a particular character. Properties starting with text- never do this, but do all kinds of other stuff, including post-rendering to add text effects like shadows that are independent of glyph choice.

For instance...

• font-family - provides a list of font families from which to choose a font with which to render each character; obviously, this affects glyph selection.
• font-weight - where possible, shows the text at the correct level of boldness by selecting an appropriately bold font from within the font-family.

• font-size - may apparently affect the actual font chosen, because not all font formats are arbitrarily scalable. This is corroborated by the following quote from the font-family docs (emphasis mine):

  When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

  (Although I'd guess this is mostly a historical issue, since I don't think non-scalable font formats are still in use today.)

• font-size-adjust - much like the above.

• font-stretch - to quote the docs:

  This property does not change the geometry of an arbitrary font by stretching or shrinking it. Like font-feature-settings or font-variant, it is merely a mean to choose the most appropriate face of the font, if this one offers several of them.

... and so on. Not all these properties always affect font selection; for instance, font-size is obviously about glyph rendering, not font selection, in the case of scalable fonts, and the font-weight and font-style properties may result in the browser synthesising bold or italic glyphs rather than using a bold or italic font, as noted by W3:

Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.

The thing that the font- properties have in common, though, is that they are the properties that can potentially affect font and glyph selection. So the choice of when to use the font- or text- prefix seems not to have been made arbitrarily.