HTML Entities for Typography and Symbols: A Practical Guide

Why Typography Entities Matter

Good typography is invisible — bad typography stands out. When a curly quote renders as a straight mark, an em dash becomes a double hyphen, or a currency symbol breaks into a question mark, readers notice. HTML entities give you reliable control over these characters across browsers, encodings, and devices.

Using the right entity instead of a keyboard approximation signal professionalism. A proper em dash (—) communicates differently from a double hyphen (--), and correct quotation marks shape how people read your content.

Quotation Marks

Straight quotes (" and ') are keyboard conveniences, not typographic characters. Professional content uses curly quotes:

<p>&ldquo;I can&rsquo;t believe it,&rdquo; she said.</p>
<!-- "I can't believe it," she said. -->

Many content management systems auto-convert straight quotes to curly quotes, but when you write raw HTML, you need the entities.

Dashes and Hyphens

English uses three horizontal line characters with distinct meanings:

The en dash is wider than a hyphen but narrower than an em dash. It connects spans of numbers, dates, and scores. The em dash sets off parenthetical thoughts or dramatic pauses.

<p>The conference runs June 10&ndash;12 and features speakers from three continents&mdash;an unprecedented lineup.</p>

Spaces

HTML collapses multiple spaces into one. Entity-based spaces give you precise control:

Non-breaking spaces are the most used — they prevent the browser from wrapping text at that point. Use them between a number and its unit (10 kg) or in navigation labels where a line break would look awkward.

Currency Symbols

Not all currency symbols have named entities. For newer symbols like the Indian rupee (₹) or Bitcoin (₿), use numeric references.

Mathematical and Scientific Symbols

Arrows and Structural Symbols

When to Use Named vs. Numeric Entities

• Named entities — Use for the common characters you type often: —,  , “. They're readable and self-documenting.
• Decimal numeric — Use as a fallback when a named entity doesn't exist: … for an ellipsis.
• Hex numeric — Use when referencing Unicode charts: … for the same ellipsis. Hex matches Unicode notation, making cross-referencing easier.

Key Takeaways

• Typography entities make content look professional — curly quotes, proper dashes, and correct spaces matter
• Use — for em dashes, – for ranges, and hyphens only for compound words
• Non-breaking spaces ( ) prevent awkward line breaks in numbers, units, and labels
• Not all symbols have named entities — use numeric references for newer Unicode characters
• Prefer named entities for readability; use numeric references when no name exists
• Always test special characters across browsers and encodings to catch rendering issues

Related Guides

• HTML Entities Guide
• HTML Special Characters Reference
• HTML Encoding vs URL Encoding

Try It Yourself

Encode and decode HTML entities instantly with our free HTML Entity Encoder/Decoder. Paste any text and get properly encoded output — including all typographic symbols.