Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Space Yourself

There’s more to spaces than the key you instinctively hit between words with one of your thumbs. Let’s find out what other space characters there are, what their heritage is, and how they can be useful today.

What you see below are two tweets. In one of them, Paul Irish will be notified of my taunt. In the other one, he’ll be completely oblivious. What’s the difference between the two? Read on!

Two tweets about Paul Irish1
Two tweets about Paul Irish. (View large version2)

The Age Of Physical Type Link

Typography and typesetting used to be surprisingly physical endeavors. Individual letters had to be picked up from cases as objects and put together, one by one, into words, then phrases, then columns. (Before fonts were heavy on websites, they were just heavy.) Colors were inks – actual substances that needed to be mixed and prepared. Preparing and cutting paper was a whole separate industry.

Illustration of black ink3
Illustration of black ink. (View large version4)
Illustration of blocks of wood for physical leading (line height)5
Illustration of blocks of wood for physical leading (line height). (View large version6)
Illustration of mixing blue and white ink7
Illustration of mixing blue and white ink. (View large version8)

This extended to spacing. Whitespace was not the absence of atoms, it was just atoms… of a different kind. For your page composition to stay in place as it went through the press, you needed not just to put space blocks between sentences, but also pack the entire remaining area with blocks of lead or wood. What today you’d call letter spacing, line height, padding, margins… they were all physical.

In this world, running left-aligned (ragged) text required almost the same effort as full justification, since the spaces still needed to go somewhere. Every fraction of an inch had to be accounted for.

Illustration of a quote in the middle of typesetting9
A quote in the middle of typesetting. Note all of the space blocks within and around the quote to keep it tight in place. (View large version10)

“That’s so cute,” you might say. “Today, I have position: absolute, negative margins and CSS transforms with more dimensions than my screen.” And you would be right. The relentless march of Moore’s Law gave us displays as highly alert collections of tiny pixels that you can command, at will, to become one out of millions of colors. You can do whatever you want!

Except, nobody does. Whenever dealing with text, we usually rely on browsers to be our typesetters, since that is so much more convenient. Many vestiges of physical typography remain today, and some of them are still genuinely useful. This is a story of physical spaces in the digital world.

Meet The Spaces Link

Did you ever take a walk through the entire Unicode table? No? You should. It is fascinating11. It’s the history of our civilization expressed in typography. It might be organized in an arbitrary fashion and not explained well, but it’s all here: languages, cultures, concepts. Transport and Map Signals live next to Alchemical Symbols. Emoji share the screen with Counting Rod Numerals. Currency Symbols will make you want to explore the financial world, and Miscellaneous Technical to become an engineer. There are failed alphabet experiments12 and head-scratchers such as incomplete infinity13. And, on a different page, you will find VCR playback symbols hanging out with a snowman14. That must be one hell of a party.

A lot of typographical history is here, too. You can travel back in time with Dingbats, try to decipher the mysteries of Letterlike Symbols, and compare what must be about a dozen dashes – each, like the one your eyes just glanced at, with a specific purpose.

Spaces are here, too. There’s the one with an agent good enough to have gotten it the biggest key on everyone’s keyboard, but there are many more: the very narrow hair and thin spaces, the super-wide en and em spaces, and a few others in between:

  • Hairspace

  • Six-per-emspace

  • Thinspace

  • Normal space

  • Four-per-emspace

  • Mathematicalspace

  • Punctuationspace

  • Three-per-emspace

  • Enspace

  • Ideographic space

  • Emspace

You can use them like you would the normal space. Just copy an paste from the list above. But why would you?

Easy. Spaces of different sizes can be used to fine-tune how elements fit together. For example, Medium (where I work) uses hair spaces around em dashes so that those dashes don’t touch the letters in some gross way:

Em dashes surrounded by hair spaces on Medium15
Em dashes surrounded by hair spaces on Medium. (View large version16)

We do the same thing in one email that uses an en dash for a range. Without hair spaces around, it would feel too tight (and with a regular space, too loose).

Hair spaces used for a date range on Medium17
Hair spaces used for a date range on Medium. (View large version18)

Similarly, in one menu item that has a slash, we surround it with thin spaces for nice balance:

19
A slash in a menu item surrounded by thin spaces on Medium. (View large version20)

And so on. Many of the spaces are named after their width of choice (hair, thin, en, em), but a few of them reveal their purpose in their names. A punctuation space is meant to occupy the same amount of space as a typical punctuation character, and likewise for ideographic21 and mathematical spaces.

“This is not that exciting,” you might say. After all, any of these could be achieved by wrapping elements in <span>s and then applying horizontal padding, or by changing the word-spacing property22 and using regular spaces.

The problem with all those is that they’re much more cumbersome. Using a Unicode space will work anywhere, even outside of HTML – in a button label, in a text area, in an email subject line. Unicode spaces are versatile.

Spaces That Cannot Let Go Link

In our space quest, we then arrive at three spaces with magical properties:

  • Narrow no-breakspace

  • No-break space

  • Figurespace

All of these act as if glued to the characters around them. That means mostly one thing: they will keep things together if they need to wrap to a new line. This is useful if you want to prevent those solitary words or even characters that would look ridiculous if they just dropped to another line, unattended and forever alone (typographers dramatically call these orphans23).

Here’s another example from Medium. We use non-breaking spaces within “and 3 others” so that string always stays in place, rather than being split in half:

Illustration of text with or with non-breaking spaces24
Illustration of text with or with non-breaking spaces. (View large version25)

Likewise, the French language tends to put a narrow space before sentence-ending punctuation. That space needs to be of a non-breaking kind so that the question mark or quotation mark stay attached to their respective words:

Illustration of text with French punctuation26
Illustration of text with French punctuation. (View large version27)

You can imagine the same goes for large numbers with space thousand separators, phone numbers, and similar things you want to keep in one piece.

Again, you could do all of this by wrapping the entity with the vintage <nobr>, or by applying white-space property28 in CSS. But just like above, using the appropriate space character in proper context could be much simpler, and it works even if you can’t use any markup.

One more thing: even though they are invisible, non-breaking spaces have proper dimensions – both width and height. They can sometimes help with their container being measured properly. Some of you might remember the darker age of table-based layouts, where using non-breaking spaces was necessary to ensure table cells were visible29. It was a hack on top of another hack. Today, we have better ways to do those things. And yet, just a few months ago, I had to put a non-breaking space in a piece of iOS software for the same reason – it was awaiting user input and without that space, it would not have been tall enough.

(Don’t discard yesterday’s hacks and learnings. Sometimes they’re still useful in the modern world.)

Invisible, But Not Quite Link

Let’s wrap up by talking about the most curious space of all – one that doesn’t have any size:

  • Zero-widthspace

Yeah, it’s there somewhere. Be sure to copy and paste the whole selection, and then remove the characters around it. You will know the invisible space is there if you use your arrow keys to move the cursor left or right – it will get “stuck” when it goes around the space.

Widthless, this is the space for the modern, digital age. But what’s the use of a space that doesn’t really exist? Actually, there are two:

  • It allows words to break.
  • It fools any algorithms that do string pattern matching.

For the first one, a zero-width space effectively works as a word break (<wbr>) entity, even in places where no HTML is allowed. In its way, it’s the arch-nemesis of the non-breaking space. Here, for example, it allows the word to break after a slash:

Zero width space allows the break after a slash30
Zero width space allows the break after a slash. (View large version31)

As for the other use… remember the example at the top? It was the zero-width space that prevented Paul Irish’s name from being linkified in my tweet. It’s sitting there, quietly, right after the @ symbol, derailing the parser that’s looking for alphanumerical characters and gives up if it encounters anything but.

Two tweets about Paul Irish32
Two tweets about Paul Irish. (View large version33)

You can think of a few more uses:

  • Preventing auto-tokenization. Do you want to talk on Twitter about @import or @extend without bothering people with those usernames? Zero-width space comes to the rescue34.
  • Fixing auto-linkification. Some algorithms don’t do very well with punctuation following a link, sucking it into the link itself. Putting a zero-width space in between can solve the problem.
  • Preventing changing a combination of characters into emoticons. I’ve used it myself in Google Chat to have an old-school smiley :) safe and sound, not upgraded to some sort of a modern multicolor abomination.
  • Rigging sorting algorithms so that things appear at the top or bottom without having to prepend visible characters.
  • Allowing some fields to be left empty that are not supposed35 to be empty36.

There are some nefarious or creative37 uses for the above, of course, and some parsers are smarter than others. But used sparingly, it’s just another tool, a magic wand to control parsers when they don’t do what we want them to do.

All Together Now Link

This is a list of all the spaces we’ve talked about. You can use this to copy and paste to your text – and also find the entities that work in iOS and Android:

Space (copy/paste) HTML entity iOS/Android
escape
sequence
Hairspace &#8202; \u200A
Six-per-emspace

&#8198;

\u2006

Thinspace

&#8201;

\u2009

Normal space

Four-per-emspace

&#8197;

\u2005

Mathematicalspace

&#8287;

\u205F

Punctuationspace

&#8200;

\u2008

Three-per-emspace

&#8196;

\u2004

Enspace

&#8194;

\u2002

Ideographic space

&#12288;

\u3000

Emspace

&#8195;

\u2003

Narrow no-breakspace

&#8239;

\u202F

No-break space

&#160;

\u00A0

Figurespace

&#8199;

\u2007

Zero-widthspace

&#8203;

\u200B

Things You Should Not Space Out On Link

When using more elaborate spaces, these are things worth thinking about:

  • Spaces all look the same. It’s good to surround them with comments or other reminders of what they are.
  • Users copying and pasting. Depending on the circumstances, the spaces you use might or might not appear as spaces after the user copies them and pastes elsewhere. This might matter to you (if you use spaces as number separators, for example), so double check before using.
  • Font support. Spaces are regular glyphs and as such they must be supported by your fonts or the fallback fonts. Don’t be surprised if sometimes what you expected to be an absence of pixels ends up being a broken Unicode rectangle.
  • And remember to put your space back in the box where it belongs! No, wait, phew, we don’t have to do that anymore.
A photo of a box with space elements38
A box of 12-point spaces in the San Francisco Center for the Book. Yes, changing font size would require a new matching box of spaces. (View large version39)

The Mysteries Of Unicode Link

Unicode is full of other fascinations and oddities. There are a few more whitespace characters with weird properties40, including the fascinatingly named zero-width non-joiner41. There’s the soft hyphen42, which is a hyphen that appears only when needed. There are things such as superscript numbers or strike-through characters that can be used even if the publishing platform you use doesn’t allow for it. And there are all the combining characters43 that piggyback on the previous ones, and can do that again, and again, and again44. Check it out45. Walk around. Make friends46.

(I really think someone should put together a guided tour of Unicode. But that’s a whole different story.)

What uses do you find for spaces? What are your other favorite parts of Unicode? Leave your story in the comments.

(og, ml, jb)

Footnotes Link

  1. 1 /wp-content/uploads/2015/09/01-tweet-taunt-opt.png
  2. 2 /wp-content/uploads/2015/09/01-tweet-taunt-opt.png
  3. 3 /wp-content/uploads/2015/09/02-physical-color-opt.jpg
  4. 4 /wp-content/uploads/2015/09/02-physical-color-opt.jpg
  5. 5 /wp-content/uploads/2015/09/03-physical-line-height-opt.jpg
  6. 6 /wp-content/uploads/2015/09/03-physical-line-height-opt.jpg
  7. 7 /wp-content/uploads/2015/09/04-physical-opacity-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/09/04-physical-opacity-opt.jpg
  9. 9 /wp-content/uploads/2015/09/05-quote-typesetting-opt.jpg
  10. 10 /wp-content/uploads/2015/09/05-quote-typesetting-opt.jpg
  11. 11 'http://unicode-table.com/en/'
  12. 12 'https://en.wikipedia.org/wiki/Deseret_alphabet'
  13. 13 'http://unicode-table.com/en/29DC/'
  14. 14 'http://unicodesnowmanforyou.com/'
  15. 15 /wp-content/uploads/2015/09/06-medium-hair-space-em-dash.gif
  16. 16 /wp-content/uploads/2015/09/06-medium-hair-space-em-dash.gif
  17. 17 /wp-content/uploads/2015/09/07-medium-date-range-opt.gif
  18. 18 /wp-content/uploads/2015/09/07-medium-date-range-opt.gif
  19. 19 /wp-content/uploads/2015/09/08-medium-thin-space-menu-opt.gif
  20. 20 /wp-content/uploads/2015/09/08-medium-thin-space-menu-opt.gif
  21. 21 'https://en.wikipedia.org/wiki/Ideogram'
  22. 22 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing'
  23. 23 'http://en.wikipedia.org/wiki/Widows_and_orphans'
  24. 24 /wp-content/uploads/2015/09/09-medium-and-x-others-opt.gif
  25. 25 /wp-content/uploads/2015/09/09-medium-and-x-others-opt.gif
  26. 26 /wp-content/uploads/2015/09/10-french-punctuation-opt.gif
  27. 27 /wp-content/uploads/2015/09/10-french-punctuation-opt-500x210.gif
  28. 28 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space'
  29. 29 'https://www.cs.tut.fi/~jkorpela/html/emptycells.html'
  30. 30 /wp-content/uploads/2015/10/zero-width-space.gif
  31. 31 /wp-content/uploads/2015/10/zero-width-space.gif
  32. 32 /wp-content/uploads/2015/09/11-tweet-taunt-animation-opt.gif
  33. 33 /wp-content/uploads/2015/09/11-tweet-taunt-animation-opt.gif
  34. 34 'http://csswizardry.com/2014/01/use-zero-width-spaces-to-stop-annoying-twitter-users/'
  35. 35 'https://twitter.com/thricedotted/status/588051909098897408'
  36. 36 'https://twitter.com/jedschmidt/status/556499149970231297'
  37. 37 'http://zderadicka.eu/hiding-secret-message-in-unicode-text/'
  38. 38 /wp-content/uploads/2015/09/12-physical-space-box-opt.jpg
  39. 39 /wp-content/uploads/2015/09/12-physical-space-box-opt.jpg
  40. 40 'http://en.wikipedia.org/wiki/Whitespace_character'
  41. 41 'http://en.wikipedia.org/wiki/Zero-width_non-joiner'
  42. 42 'https://en.wikipedia.org/wiki/Soft_hyphen'
  43. 43 'http://en.wikipedia.org/wiki/Combining_character'
  44. 44 'http://stackoverflow.com/questions/6579844/how-does-zalgo-text-work'
  45. 45 'http://unicode-table.com/en/'
  46. 46 'https://medium.com/inside/my-favourite-glyphs-601374889045'

↑ Back to top Tweet itShare on Facebook

Advertisement

Marcin is a design lead and a typographer at Medium. Previously, he was a fellow at Code for America and a user experience designer at Google, working with the Chrome, search, and homepage doodle teams. After hours, Marcin likes to photograph cities, research old technology, and force his friends to watch “Sneakers” over and over again.

  1. 1

    I’m gutted that you left out my favourite space – the Mongolian Vowel Separator!

    It’s sort of the typographical equivalent of English’s “glottal stop”.

    2
  2. 4

    I love this article, but the issue remains that for most of the web, the content is not created by designers.

    I’m still battling with editors who upload massive images, or images that have incorrect ratios – logo files for instance.

    Lets not even get into ‘pasting from word’ and the horrors that entail.

    The idea of protecting, say, a brand identity for a corporate website where 10 people from comms can add content is enough of a battle by itself. Trying to get them to worry about a myriad of spacing options, line heights, font weights and the majesty of balance of typography?

    Not going to happen.

    8
    • 5

      I definitely don’t think most writers/creators should worry about line heights, spacing, etc. (although, if you make some of those accessible, I found out people really enjoy digging deeper and learn typographical nuances). But someone should. For designers of CMSes, there are ways to build intermediate layers that unify, simplify, make things better – and/or reduce the initial set of options so it’s not possible to create too much mess.

      On the topic of spaces, some people are used to leaving two spaces after a full stop. Others leave one. Medium (where I work) unifies it to always be one when you type, or copy/paste, or import. This way, the output is consistently the same, but no individual writer has to know about the demands of the system.

      0
      • 6

        Casey (@CAYdenberg)

        October 21, 2015 9:19 pm

        Fun fact: if you type two spaces after a period in WordPress, WordPress will replace the second space with a unicode entity (I forget which one) upon sending to the database. I once started working on a script to get rid of them all, and it was a enormous pain.

        0
        • 7

          Whyever one would want to add TWO spaces after a period anyway …?

          Or was it just the usual clueless user, who also thought breaks would be perfect for horizontal space intendation?

          cu, w0lf.

          0
          • 8

            Nathan Richardson

            October 22, 2015 2:42 pm

            When i was in highschool in the mid 90s, we were taught “one space after a comma, and two after a period.”

            I think it was a carry over from typewriter days, but whenever I correct someone who uses 2 spaces, they always respond that it was how they were taught to type.

            1
        • 9

          I am guessing it was a non-breakable space. HTML actually has a strong “single–space after a full stop” bias that’s completely accidental – HTML is just very lenient about whitespace. In order to preserve two spaces after a full stop, you have to turn one of them into a non-breakable space or something similar so it don’t get collated with the other one.

          0
  3. 10

    Michał Żadkowski

    October 20, 2015 8:47 pm

    Dang! Marcin, you swept this topic away from me! :​) I was about to write something similar. I’m into typography and recently doing a bit of research about some non alphabetical symbols used in contemporary copy.

    Would you mind me building upon your article?
    And yup, I used a zero-width space in here.

    2
  4. 12

    Jeremiah Shoaf

    October 21, 2015 12:55 am

    Loved the post, Marcin! Had no idea the zero-width​space was a thing. So many potential uses…

    3
  5. 13

    Great article! I’m definitely going to apply some of the techniques you showcased here.

    3
  6. 14

    Good idea about using hair spaces around em and en dashes! I have a ‘typography snob’ JS file I use on my blog for replacing straight quotes and hyphes-as-dashes with their proper typographical equivalents and it was previously using ‘ – ‘ for en dashes and ‘—’ for em, but like you say the spacing, especially with em dashes, was just ugly. Looks much better now : )

    If anyone’s interested, the JS is here:
    http://andyf.me/js/simple_typography.js

    0
  7. 17

    I recently came across zero-width spaces. On our site, users were copying content from Word into a WYSIWYG editor, whose content was saved and outputted via DomPDF. This doesn’t like the special unicode characters, so the text was covered with question marks. This was a great tool to spit out what characters are actually part of a string: http://srsbiz.pl/utils/hexit.php

    2
  8. 19

    I’d love to see a guided tour of Unicode. I’m sure that other readers of this article would love to that as well. Anyone up for creating a project that does so? If so, I’m in!

    2
  9. 20

    Very cool the images!

    0
  10. 21

    Wow, that was an awesome primer on spacing, especially due to the gifs.

    @Marcin, how does Medium put all those spaces? Do you remember all of those entity-codes or something? Or are there shortcuts (for non-Mac users)?

    0
  11. 23

    I had never heard of these before – learnt something new today! Thank you :)

    0

↑ Back to top