Question

Difference between fonts and text attributes?

Answer 1

or 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;

Answer 2

A "Font" is the software that displays a "typeface". A font is always a typeface, but a typeface does not always have a font. (I'm kind of ignoring icon fonts since they aren't typefaces really, they are a special font classification.)

Bold, Italic, Condensed, Compressed, Extended, Book, Medium, Heavy, Black, etc. are Faces of the same Typeface Family (or font family). In terms of CSS, these faces are called "styles". Faces are sub-sets of the master typeface family.

So, Font is to Typeface as Style is to Face.

Not all typeface families have the same faces. Some typefaces don't have an italic face, although rare. Some call the italic face "Oblique". Some don't have a "heavy" face, etc.

Things like serif, sans-serif, slab, monospace are Typeface Family attributes or characteristics. They are notFace attributes. A serif family does not contain san-serif faces. If the family is a serif family, then it is customary for everyface to also contain that familycharacteristic. Again, a face is merely a sub-set of the family.

Changing a typeface family's face (or style) does not change the typeface family. If you want a sans-serif typeface (or font) you need to choose a family that has that characteristic. Changing Times New Roman to Helvetica, changes the family from a serif family to a sans-serif family. This is how you change characteristics such as serif, monospace, slab, etc.