A short presentation looking at the hyphen and related glyphs

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.