This document discusses different types of hyphens and dashes used in typography, including their names, characters, and purposes. It explains that a hyphen is used to join words or divide words at the end of a line, while a hyphen-minus represents negative numbers or subtraction. An en dash indicates a closed range or contrast, and an em dash can be used in place of parentheses or a colon to indicate an abrupt change in thought. The document also discusses strategies for hyphenating words to fit within constrained spaces, such as breaking words, using soft hyphens, or reducing font size.

2. Hyphen

3. Hyphen
Minus
n dash
m dash

4. Hyphen
‑
Used to join words to indicate
they have a combined meaning,
to indicate the division of a word
at the end of a line or to indicate
a missing element.
Comes in two ‘flavours’ -
Breaking and non-breaking
Hyphen-minus
-
Minus
− or −
Usually longer than a hyphen but
shorter than an m dash.
A mathematical operator used to
represent the notion of negative
and subtraction.

5. mnn dash
– or –
Traditionally derived from the width of
a lower-case n.
Indicates a closed range of values. Can
also be used to contrast two values or
illustrate a relationship between two
things.
m dash
— or —
Traditionally derived from the height of
a lower-case m. 1em wide, a length
that varies with the size of the font.
Can be used in place of parentheses or
a colon.
Usually shows an abrupt change in
thought where a full stop is too strong
and a comma to weak.

6. So — your point is?

7. Long titles + small screens.
We’ve got a bit of a problem.

8. Unbreakab
Default — Do nothing at all.
The word is larger than its containing area. The container is extended so
the word can remain unbroken on a single line.

9. Unbreaka
bleWord wrap — The ‘invisible’ hyphen.
Word wrap breaks a word at the last character before the limit of its
constraining area.

10. Unbreak-
ableHard hyphens — An automatic line break after a hyphen
Hyphenates the word after the last character before the limit of the
constraining area.

11. Unbreakable
Font size change — Reduce the size of the font at smaller screen sizes
This is useful but not as flexible as it could be. There is almost always a
longer word out there. How small are you willing to go?
Nano-technology

12. That’s that sorted then.
Of course not…

13. I’ll hyphenate anything including already hyphenated
words like ‘nano-technology’
nano-tec-
hnology
architec-
ture
I don’t auto-hyphenate anything as I prefer to word
break instead. I will word break on a soft-hyphen if
one is present.
nano-
technology
architec
ture
I’ll hyphenate anything including already hyphenated
words like ‘nano-technology’.
nano-tec-
hnology
architec-
ture
I’ll hyphenate anything but err towards breaking on
soft hyphens if one is present.
nano-
technology
architec-
ture

14. // Type hyphenation
@mixin type-hyphenation {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

15. We add this only for
smaller device sizes.
Otherwise things can go a bit nuts.