Most of the difference between type that looks professional and type that looks default is space: between two letters, across a whole word, and between lines. Typographers have three words for these, and each maps to one CSS property. Knowing which is which saves a lot of blind fiddling.
Kerning: the space between two particular letters
Some pairs of letters leave an awkward gap when set at their normal widths. A capital A next to a V, a T above an o, a W beside an a — the shapes do not fill their boxes, so the space between them looks larger than elsewhere. Kerning is a table inside the font that says, for each such pair, how much closer to set them.
You do not usually write kerning yourself. A well-made font carries thousands of pairs, and browsers apply them by default. The CSS property font-kerning exists mainly to switch them off, which you should almost never do. If a headline has a gap that still bothers you after that, the fix is on that one pair, not on the whole line.
Tracking: the space across a whole run of text
Tracking adds or removes the same amount of space between every letter. In CSS it is letter-spacing, and the one rule worth remembering is to give it in em, so it scales with the font size: letter-spacing: 0.05em means the same thing at 12 pixels and at 120.
- Capitals need more. Fonts are spaced for lowercase. A line of capitals or small caps looks cramped without a little extra, usually 0.05 to 0.1em.
- Big headlines often want less. Spacing that is comfortable at body size looks loose at 60 pixels. A small negative value, around minus 0.01 to minus 0.03em, pulls a large heading together.
- Body text wants none. The designer set the spacing for reading. Tightening a paragraph makes it harder to read, and loosening it makes words fall apart.
- Joining scripts want none at all. Their letters are drawn to connect, and any tracking breaks the joins.
Some families save you the trouble. Inter Tight is Inter with the spacing already taken in for display sizes, so a headline in Inter Tight and body text in Inter match exactly without any negative letter-spacing.
Inter Tight — variable
Sphinx of black quartz, judge my vow
In the static download
Leading: the space between lines
Leading is named after the strips of lead a printer slid between lines of metal type. In CSS it is line-height, and it is best written as a plain number with no unit — line-height: 1.5 — so that it is recalculated for every element from its own font size. A value in pixels is inherited unchanged, and a heading inside a paragraph styled that way ends up with lines that overlap.
- Body text: around 1.4 to 1.6. Longer lines need the upper end, so the eye can find the start of the next one.
- Headings: around 1.1 to 1.25. Large type with body-text leading looks like separate lines rather than one heading.
- Faces with a large lowercase need more leading than faces with a small one at the same size, because the lines are visually closer together.
Word spacing and the rest
CSS also has word-spacing, which is rarely worth touching, and justified text, which changes word spacing line by line and opens the uneven gaps called rivers. On the web, left-aligned text is almost always the better choice. If you are choosing the typeface as well as setting it, the font pairing guide is the next step.