Typography is inspiring :) I recently posted about all the different HTML “X” characters. Then a tweet from Helge Klein inspired me to write a follow-up post showing all the different ways to write a dash or hyphen
- character in HTML. Like most online content creators, I knew about
mdash;. But I didn’t realize there were so many other hyphen and dash characters.
40+ hyphen, dash, and minus characters for HTML content creators.
- Only characters that “look” like a hyphen
- Dash characters
- Hyphen characters
- Minus Characters
- Honorable Mentions
- The ones to remember ☆
Only characters that “look” like a hyphen
There are many “dash”, “hyphen”, and “minus” type characters defined for HTML. Some of them actually look like dashes or hyphens, others not so much. For example the Box Drawings Heavy Double Dash Vertical
╏ and the Negated Double Vertical Bar Double Right Turnstile
⊯. It gets crazy fast. So for this article, we’re just gonna focus on the HTML characters that actually look like dashes or hyphens. You know, made with a short horizontal scrawl motion.
The set of “dash-like” HTML dash characters contains four characters, the dash, en dash, em dash, and circle dash. Here they are, in all their glory.
The common dash character is used all the time in writing, it is the same character as the hyphen, described below. To add a hyphen in your text, simply press the
- key on your keyboard. It looks like this:
The en dash punctuation mark is commonly used to designate a span of numerical values. It’s also used for things like compound adjectives and designating conflicting or connecting ideas. It looks like a regular hyphen, only a bit longer:
The em dash punctuation mark often is confused with the en dash. The em dash is a versatile character, used in place of commas, parentheses, colons, etc. In general, em dash provides more emphasis, and should not be used more than once per sentence.
Almost didn’t include the circled dash, as it’s intended for use with mathematical writing and not super common among content creators. It looks like this:
Other dash characters
In addition to the above, there are some further dash characters that can be used when creating HTML content. I think out of all of these, the regular tilde
~ is the only one that I’ll ever use. Just in case though..
|~||Tilde (Swung Dash)|
|⁓||Swung Dash (Large Tilde)|
|﹘||Small Em Dash|
When writing, hyphens are used to connect words, denote line endings, and do other things. There are many variations on this hyphen, including the following characters.
The hyphen is a punctuation mark that connects words or parts of words (like at the end of a line). For example, “ramp-up” or “down-low”, both hyphenated words joined together to get a new combined meaning. The humble hyphen as such:
The non-breaking hyphen is the same as a regular hyphen, but it is not allowed to break (like at the end of a line). So, same as the hyphen with no breaking:
The hyphenation point is used to specify where a would should be broken, usually between syllables. Think “dic·tion·ar·y” definitions and so forth. Important: do NOT use this character in domain names, as it opens potential phishing vulnerabilities.
The hyphen bullet punctuation mark is nothing more than a bullet character dressed up like a hyphen. It’s difficult to find any real use for this character.
From what I understand, the hyphen minus is the same thing as the regular hyphen. It can be used as a hyphen, minus sign, or dash, depending on context.
Other hyphen characters
There are so many “hyphen” characters it’s just stupid. I think I’ve covered the most commonly used hyphens so far. Here are a bunch more, just to give you an idea of how crazy it gets..
|Soft Hyphen (SHY)|
|﹣||Small Hyphen Minus|
|－||Fullwidth Hyphen Minus|
|⸗||Double Oblique Hyphen|
|⸚||Hyphen with Diaeresis|
|᐀||Canadian Syllabics Hyphen|
|゠||Katakana-Hiragana Double Hyphen|
|᠆||Mongolian Todo Soft Hyphen|
|𐺭||Yezidi Hyphenation Mark|
Technically all “minus” punctuation marks are for use in mathematical writing. As might be expected with math characters, there are several variations of the minus-sign punctuation mark. Let’s take a look..
Used in mathematics like 8 – 1 = 7. Surely anyone reading is familiar with this common character:
The plus-minus sign has multiple meanings, depending on context. For example, in mathematics, it denotes two values. In statistics, it denotes a range of uncertainty or confidence interval. It looks like this:
Other minus characters
As with hyphens and dashes, there are all sorts of variations on the ol’ minus sign. Here are the ones I could find..
|˗||Modifier Letter Minus Sign|
|—||Combining Minus Sign Below|
|⁒||Commercial Minus Sign|
|➖||Heavy Minus Sign|
|⨩||Minus Sign with Comma Above|
|⨪||Minus Sign with Dot Below|
|⨫||Minus Sign with Falling Dots|
|⨬||Minus Sign with Rising Dots|
|⨺||Minus Sign In Triangle|
|⩁||Union with Minus Sign|
During the course of my research on this topic, I stumbled upon a few others probably worth mentioning. Even though the overline and double low line look hideous due to extreme baselines imo. So maybe dishonorable mentions lol.
|‗||Double Low Line|
The ones to remember
Told you there were a lot of HTML hyphen-ish characters. In my experience (many years of writing and creating content online), out of the 40+ hyphen/dash characters, here are the only ones you’ll ever need to remember:
Honestly just knowing the difference between Dash
dash;, En Dash
ndash;, and Em Dash
mdash; makes you a typography wizard, or at least a hyphen wizard.