Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

The Future Of CSS Typography

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Keep in mind that these new properties and techniques are either new or still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects.

A Glance At The Basics Link

One of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain.

Let’s say you want to change the color of the headings in your posts, keeping the other headings on your website in the default color. Rather than add the class big-red to each heading, the sensible approach would be to take advantage of the DIV class that wraps your posts (probably post) and create a selector that targets the heading you wish to modify, like so:

.post h2 {
	font-weight: bold;
	color: red;

This is just a quick reminder that there is no need to add classes to everything you want to style with CSS, especially text. Think simple.

The Font Property Link

Instead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.

When using the font shorthand, any values not specified will be replaced by their parent value. For example, if you define only 12px Helvetica, Arial, sans-serif, then the values for font-style, font-variant and font-weight will be set as normal.

The font property can also be used to specify system fonts: caption, icon, menu, message-box, small-caption, status-bar. These values will be based on the system in use, and so will vary according to the user’s preferences.

Other Font Properties Link

A few font-related properties and values are not as commonly used. For example, instead of using text-transform to turn your text into all caps, you could use font-variant: small-caps for a more elegant effect.

You could also be very specific about the weight of your fonts1, instead of using the common regular and bold properties. CSS allows you to specify font weight with values from 100 to 900 (i.e. 100, 200, 300, etc.). If you decide to use these, know that the 400 value represents the normal weight, while 700 represents bold. If a font isn’t given a weight, it will default to its parent weight.

Another useful property, sadly supported only in Firefox for now, is font-size-adjust, which allows you to specify an aspect ratio for when a fall-back font is called. This way, if the substitute font is smaller than the preferred one, the text’s x-height will be preserved. A good explanation of how font-size-adjust works can be found on the W3C website2.

Dealing With White Space, Line Breaks And Text Wrapping Link

Several CSS properties deal with these issues, but the specs are still in the works (at the “Working Draft” stage).

White Space Link

The white-space property lets you specify a combination of properties for which it serves as a shorthand: white-space-collapsing3 and text-wrap4. Here’s a breakdown of what each property stands for:

  • normal
    white-space-collapsing: collapse/text-wrap: normal
  • pre
    white-space-collapsing: preserve/text-wrap: none
  • nowrap
    white-space-collapsing: collapse/text-wrap: none
  • pre-wrap
    white-space-collapsing: preserve/text-wrap: normal
  • pre-line
    white-space-collapsing: preserve-breaks/text-wrap: normal

This property can be useful if you want to, for example, display snippets of code on your website and preserve line breaks and spaces. Setting the container to white-space: pre will preserve the formatting.

WordPress uses white-space: nowrap on its dashboard so that the numbers indicating posts and comments don’t wrap if the table cell is too small.

Word Wrap Link

One property that is already well used is word-wrap. It supports one of two values: normal and break-word. If you set word-wrap to break-word and a word is so long that it would overflow the container, it is broken at a random point so that it wraps within the container.

International Gorilla Conservation Programme6
The International Gorilla Conservation Programme website uses word-wrap for its commenters’ names.

In theory, word-wrap: break-word should only be allowed when text-wrap is set to either normal or suppress (which suppresses line breaking). But in practice and for now, it works even when text-wrap is set to something else.

Bear in mind that according to the specification, the break-strict value for the word-break property is at risk of being dropped.

Word And Letter Spacing Link

Two other properties that are often used are word-spacing and letter-spacing. You can use them to control—you guessed it—the spacing between words and letters, respectively. Both properties support three different values that represent optimal, minimum and maximum spacing.

Show & Tell7
Show & Tell uses letter-spacing on its navigation links.

For word-spacing, setting only one value corresponds to the optimal spacing (and the other two are set to normal). When setting two values, the first one corresponds to the optimal and minimum spacing, and the second to the maximum. Finally, if you set all three values, they correspond to all three mentioned above. With no justification, optimal spacing is used.

It works slightly different for letter-spacing. One value only corresponds to all three values. The others work as they do for word-spacing.

The specifications contain a few requests for more information and examples on how white-space processing8 will work and how it can be used and be useful for languages such as Japanese, Chinese, Thai, Korean, etc. So, if you’d like help out, why not give it a read (it’s not that long), and see how you can contribute?

Indentation And Hanging Punctuation Link

Text indentation and hanging punctuation are two typographical features that are often forgotten on the Web. This is probably due to one of three factors:

  1. Setting them is not as straightforward as it could be;
  2. There has been a conscious decision not to apply them;
  3. Designers simply aren’t aware of them or don’t know how to properly use them.

Sushi & Robots Journal
The Sushi & Robots website has hanging punctuation on bulleted lists.

Mark Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic Style Applied to the Web289. These are two very good reads for any Web designer.

So, the theory is that you should apply a small indentation to every text paragraph after the first one. You can easily do this with an adjacent sibling combinator:

p + p {
	text-indent: 1em;

This selector targets every paragraph (i.e. p) that follows another paragraph; so the first paragraph is not targeted.

Another typographic rule of thumb is that bulleted lists and quotes should be “hung.” This is so that the flow of the text is not disrupted by these visual distractions.

The CSS Text Level 3 specification has an (incomplete) reference to an upcoming hanging-punctuation property10.

For now, though, you can use the text-indent property with negative margins to achieve the desired effect:

blockquote {
	text-indent: -0.2em;

For bulleted lists, just make sure that the position of the bullet is set to outside and that the container div is not set to overflow: hidden; otherwise, the bullets will not be visible.

Web Fonts And Font Decoration Link

font-face Link

Much talk has been made on the Web about font-face and whether it’s a good thing—especially after the appearance of Typekit11 (and the still-in-private-beta Fontdeck12). The debate is mainly about how much visual clutter this could bring to Web designs. Some people (the argument goes) aren’t sufficiently font-savvy to be able to pull off a design in which they are free to use basically any font they wish. Wouldn’t our sensitive designer eyes be safer if only tested, approved Web-safe fonts were used?

On whatever side of the argument you fall, the truth is that the examples of websites that use font-face beautifully are numerous.

Jonathan Snook’s recently redesigned website uses the font-face property.

The font-face property is fairly straightforward to grasp and use. Upload the font you want to use to your website (make sure the licence permits it), give it a name and set the location of the file.

In its basic form, this is what the font-face property looks like:

@font-face {
	font-family: Museo Sans;
	src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);

The two required font-face descriptors are font-family and src. In the first, you indicate how the font will be referenced throughout your CSS file. So, if you want to use the font for h2 headings, you could have:

h2 {
	font-family: Museo Sans, sans-serif;

With the second property (src), we are doing two things:

  1. If the font is already installed on the user’s system, then the CSS uses the local copy instead of downloading the specified font. We could have skipped this step, but using the local copy saves on bandwidth.
  2. If no local copy is available, then the CSS downloads the file linked to in the URI. We also indicate the format of the font, but we could have skipped that step, too.

For this property to work in IE, we would also need the EOT version of the font. Some font shops offer multiple font formats, including EOT, but in many cases we will need to convert the TrueType font using Microsoft’s own WEFT14, or another tool such as ttf2eot15.

Some good resources for finding great fonts that can be used with font-face are Font Squirrel16 and Fontspring17.

text-shadow Link

The text-shadow property allows you to add a shadow to text easily and purely via CSS. The shadow is applied to both the text and text decoration if it is present. Also, if the text has text-outline applied to it, then the shadow is created from the outline rather than from the text.

Neutron Creations18
Neutron Creations website uses text-shadow.

With this property you can set the horizontal and vertical position of the shadow (relative to the text), the color of the shadow and the blur radius. Here is a complete text-shadow property:

p {
	text-shadow: #000000 1px 1px 1px;

Both the color and blur radius (the last value) are optional. You could also use an RGBa color for the shadow, making it transparent:

p {
	text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;

Here we define the R, G and B values of the color, plus an additional alpha transparency value (hence the a, whose value here is 0.5).

The specification still has some open questions about text-shadow, like how should the browser behave when the shadow of an element overlaps the text of an adjoining element? Also, be aware that multiple text shadows and the text-outline property may be dropped from the specification.

New Text-Decoration Properties Link

One problem with the text-underline property is that it gives us little control. The latest draft of the specification19, however, suggests new and improved properties that may give us fine-grained control. You can’t use them yet, but we’ll give you a condensed sneak peek at what may come.

  • text-decoration-line
    Takes the same values as text-decoration: none, underline, overline and line-through.
  • text-decoration-color
    Specifies the color of the line of the previous property.
  • text-decoration-style
    Takes the values of solid, double, dotted, dashed and wave
  • text-decoration
    The shorthand for the three preceding properties. If you specify a value of only one of none, underline, overline or line-through, then the property will be backwards-compatible with CSS Level 1 and 2. But if you specify all three values, as in text-decoration: red dashed underline, then it is ignored in browsers that don’t support them.
  • text-decoration-skip
    Specifies whether the text decoration should skip certain types of elements. The proposed values are none, images, spaces, ink and all.
  • text-underline-position
    With this property, you can control, for example, whether the underline should cross the text’s descenders or not: auto, before-edge, alphabetic and after-edge.

Controlling Overflow Link

The text-overflow property lets you control what is shown when text overflows its container. For example, if you want all of the items in a list of news to have the same height, regardless of the amount of text, you can use CSS to add ellipses (…) to the overflow to indicate more text. This technique is commonly seen in iPhone apps and websites.

The New York Times iPhone App20
The New York Times iPhone app uses an ellipsis for overflowing text.

This property works in the latest versions of Safari and Opera and in IE6 (where the overflowing element should have a set width, such as 100%) and IE7. To be able to apply the property to an element, the element has to have overflow set to something other than visible and white-space: nowrap. To make it work in Opera, you need to add the vendor-specific property:

li {
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;

In the Editor’s draft of the specification21, you can see that other properties related to text-overflow are being considered, such as text-overflow-mode and text-overflow-ellipsis, for which text-overflow would be the shorthand.

Alignment And Hyphenation Link

Controlling hyphenation online is tricky. Many factors need to be considered when setting automatic hyphenation, such as the fact that different rules apply to different languages. Take Portuguese, in which you can hyphenate a word only at the end of a syllable; for double consonants, the hyphen must be located right in the middle.

The specification is still being developed, but the proposed properties are:

  • hyphenate-dictionary;
  • hyphenate-before and hyphenate-after;
  • hyphenate-lines;
  • hyphenate-character.

Hyphenation draf spec22
Proposed specification for hyphenation on the W3C website.

This is a good example of how the input of interested Web designers is vital. Thinking about and testing these properties before they are finalized has nothing to do with being “edgy” or with showing off. By proposing changes to the specification and illustrating our comments with examples, we are contributing to a better and stronger spec.

Another CSS3 property that hasn’t been implemented in most browsers (only IE supports it, and only partially) is text-align-last. If your text is set to justify, you can define how to align the last line of a paragraph or the line right before a forced break. This property takes the following values: start, end, left, right, center and justify.

Unicode Range And Language Link

Unicode Range Link

The unicode-range property lets you define the range of Unicode characters supported by a given font, rather than providing the complete range. This can be useful to restrict support for a wide variety of languages or mathematical symbols, and thus reduce bandwidth usage.

Imagine that you want to include some Japanese characters on your page. Using the font-face rule, you can have multiple declarations for the same font-family, each providing a different font file to download and a different Unicode range (or even overlapping ranges). The browser should only download the ranges needed to render that specific page.

To see examples of how unicode-range could work, head over to the spec’s draft page23.

Language Link

Use the :lang pseudo-class to create language-sensitive typography. So, you could have one background color for text set in French (fr) and another for text set in German (de):

div:lang(fr) {
	background-color: blue;

div:lang(de) {
	background-color: yellow;

You might be wondering why we couldn’t simply use an attribute selector and have something like the following:

div[lang|=fr] {
	background-color: blue;

Here, we are targeting all div elements whose lang attribute is or starts with fr, followed by an -. But if we had elements inside that div, they wouldn’t be targeted by this selector because their lang attribute isn’t specified. By using the :lang pseudo-class, the lang attribute is inherited to all children of the elements (the whole body element could even be holding the attribute).

The good news is that all latest versions of the major browsers support this pseudo-class.

Conclusion Link

In surveying the examples in this article, you may be wondering why to bother with most of them.

True, the specification is far from being approved, and it could change over time, but now is the time for experimentation and to contribute to the final spec.

Try out these new properties, and think of how they could be improved or how you could implement them to make your life easier in future. Having examples of implementations is important to the process of adding a property to the spec and, moreover, of implementing it in browsers.

You can start with the simple step of subscribing to the CSS Working Group blog24 to keep up to date on the latest developments.

So, do your bit to improve the lot of future generations of Web designers… and your own!


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Inayaili de León is a London-based Portuguese web designer, specialist in cross-browser, semantic HTML and CSS, and clean, functional design. She writes frequently for well-known online and print publications and also on her own web design blog, Web Designer Notebook. In May 2011, she published a book, Pro CSS for High Traffic Websites, and she speaks frequently at local and international web conferences and meetups. She is currently working as a web designer on Canonical's Design team.

  1. 1

    yea this is what i have been looking for

  2. 2

    Hi quick question I’m currently working on a website for a co-operative company that obviously uses the word co-operative quite a bit. The problem is some browsers start a new line after the dash (so you “co-” on one line “operative” on another if its close to the edge of the container) is there any way around this as this doesn’t happen in firefox but happens in browsers such as ie6 and even Safari and chrome and its a real pet peeve for the company.

    Thanks in advance for any help.

  3. 3

    Great article! Thank’s for reminding these CSS tips :)

  4. 4

    I’m a big fan of typography. Thanks for this one. great work!

  5. 5

    naeem |

    March 1, 2010 3:01 am

    Nice Article! Well written.

  6. 6

    Antoine Guédès

    March 1, 2010 3:19 am

    Awesome article!
    Typography will be really fun in the future. :-)

  7. 7

    i love this article…

  8. 8

    Ahmed Faris

    March 1, 2010 3:33 am

    As usual the article is useful :)
    Thanks Inayaili de Leon.
    Typography is very important to web designers
    and I’m too love clean & Beauty websites

  9. 9

    Great Article! This is a fantastic article . Like this:)

  10. 10

    March 1, 2010 3:50 am

    Waw. Remembering me the basic of CSS. This article very helpfull.

  11. 11

    Good article. Hopefully some of these options will make it possible to produce decent-looking justified text on the web. I was surprised to learn that a useful property like text-align-last is available in IE before the other browsers.

  12. 12

    There is a non-breaking hyphen in Unicode that may help, character 8209.

  13. 13

    Great ! Thank’s for your work !

  14. 14

    Thanx for these tips. Some properties mentioned I never used yet.

  15. 15

    Great article. However it’d be nice if it specified which bits are CSS2 or CSS3 – helps those of us in a commercial environment decide what we can and can’t use.

  16. 16

    There must be more of those kind of posts! Thanks Inayaili, thanks SM.

  17. 17

    Lucas Petes

    March 1, 2010 5:02 am

    Greeeat post! Simple, complete, useful, awesome! o/

  18. 18

    Sunny Kumar

    March 1, 2010 5:08 am

    Amazing Post !

  19. 19

    Sebastian Dubois

    March 1, 2010 5:12 am

    Excellent write up, @font-face is definitely the way forward.

  20. 20

    Thomas McGee

    March 1, 2010 7:00 am

    Thanks so much for the info. The @font-face is especially going to come in handy for future designs!


↑ Back to top