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.

Common HTML White space
HTML Number HTML Name CSS
Regular Space   \0020
Non‑breaking Space     \00A0
FigureSpace   \2007
Tab 	 &tab; \0009

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

Less Common HTML Whitespace
HTML Number HTML Name CSS
EmSpace     \2003
EnSpace     \2002
⅓ EmSpace     \2004
¼ EmSpace     \2005
⅙ EmSpace   \2006
ThinSpace     \2009
HairSpace     \200a

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.

White-less whitespace
HTML Number HTML Element CSS
Zero‑width space &#x200b; <wbr> \200b

Hyphens and Dashes

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

Hyphens and dashes
HTML Number HTML Name CSS
Hy-phen &#x2d; \002d
EnDash &#x2013; &ndash; \2013
EmDash &#x2014; &mdash; \2014

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.

Special-case hyphens
HTML Number HTML Name CSS
Nonbreaking hyphen &#x2011; \2011
Soft hy­phen &#xad; &shy; \00ad

Quotes

Better than finger-quotes.
HTML Number HTML Name CSS
'straight single' &#x27; \0027
"straight double" &#x22; \0022
curly single open’ &#x2018; &lsquo; \2018
‘curly single close &#x2019; &rsquo; \2019
curly double open” &#x201c; &ldquo; \201c
“curly double close &#x201d; &rdquo; \201d

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

Ah, what a fine day for science! Dexter
HTML Number HTML Name CSS
Plus + &#x2b; \002b
Minus &#x2212; &minus; \2212
Times × &#xd7; &times; \00d7
Divide ÷ &#xf7; &divide; \00f7
Almost-equal-to &#x2248; &asymp; \2248
Not-equal-to &#x2260; &ne; \2260
Less-than-or-equal &#x2264; &le; \2264
Greater-than-or-equal &#x2265; &ge; \2265
Degrees° &#xb0; &deg; \00b0
Prime &#x2032; &prime; \2032
Double Prime &#x2033; &Prime; \2033
Triple Prime &#x2034; \2034
Middle dot · &#xb7; &middot; \00b7

Legal

Legally Typographic
HTML Number HTML Name CSS
Copyright© &#xa9; &copy; \00a9
Trademark &#x2122; &trade; \2122
Registered Trademark® &#xae; &reg; \00ae
Service Mark &#x2120; \2120
Sound Copyright &#x2117; \2117

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.

Taking it to the max!
HTML Number HTML Name CSS
Ellipsis &#x2026; &hellip; \2026
Paragraph &#x00b6; &para; \00b6
Section § &#x00a7; &sect; \00a7
Interrobang &#x203d; \203d

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.