Typographic Unicode

Often, I find myself skipping over typography when writing content in HTML. It’s even harder, sometimes, when dealing with CSS. Here is a quick reference some common typographical characters, and how to express them in both HTML and CSS.

White space

First, it’s easy to forget that white space can be more expressive than the standard space character you get when pressing the Space Bar. Let’s look closer at some common white space characters.

But, even that is not it! There are a whole range of typographical spaces that can–and should–be used in specific circumstances.

Lastly, there is a zero‑width space, for those times when you want a space but don’t want a space. But seriously, a zero‑width space provides a wrapping opportunity within a long word without introducing a visible space. Also see the soft hyphen below.

Hyphens and Dashes

Remember, there is a difference between hyphens and dashes; use the right symbol for the right task.

There are two other special-case hyphens that might be useful in some cases. The non-breaking hyphen is great for a hyphenated word that makes no sense when it gets split up. The soft hyphen is great for hinting long words, so the browser can break appropriately.

Quotes

Advanced stylists, pair the CSS property quotes with the <q> HTML element to markup and style quotations.

Math

Best to avoid using a ‘-’ when you really mean ‘−’, and don’t use an ‘x’ when you mean ‘×’.

Legal

Remember to always consult a lawyer before you start slapping symbols around willy-nilly.

The Next Level

Are you are ready to take your typography to the next level? Feel free to consult this list and seriously confusebedazzle your average reader.

Is that it? Are they any more?

I’ll say! The complete Unicode range comprises of a whopping total of 1,114,112 code points… There are a lot more interesting characters to find; however, finding a typeface that supports them is another matter entirely.