Tijme Tijme - 8 days ago 5
CSS Question

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

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

As far as my understanding goes about this:

Text: The characters you draw with a selected (or default) font.

Font: The shapes of the characters.

You can underline text drawn with a certain font, but you cannot underline the font itself as it is a collection of shapes bound to characters. You can, though, resize the shapes so the text drawn with that font is drawn larger. (hence, font-size)

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

Hope this helps :)

EDIT:

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

are all used for positioning or visual changes to the already-drawn text.

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

are all used for the way characters are displayed on the screen.