The Future Of CSS Typography

Advertisement

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

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

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

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 fonts, 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 website.

Dealing With White Space, Line Breaks And Text Wrapping

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

White Space

The white-space property lets you specify a combination of properties for which it serves as a shorthand: white-space-collapsing and text-wrap. 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
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

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 Programme
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

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 & Tell
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 processing 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

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 Web. 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 property.

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

font-face

Much talk has been made on the Web about font-face and whether it’s a good thing—especially after the appearance of Typekit (and the still-in-private-beta Fontdeck). 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.

Snook.ca
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 WEFT, or another tool such as ttf2eot.

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

text-shadow

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 Creations
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

One problem with the text-underline property is that it gives us little control. The latest draft of the specification, 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

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 App
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 specification, 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

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 spec
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

Unicode Range

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 page.

Language

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

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 blog 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!

Resources and Interesting Links

(al)

↑ Back to top

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

    0
  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.

    0
  3. 3

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

    0
  4. 4

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

    0
  5. 5

    naeem | Cssreflex.com

    March 1, 2010 3:01 am

    Nice Article! Well written.

    0
  6. 6

    Antoine Guédès

    March 1, 2010 3:19 am

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

    0
  7. 7

    i love this article…

    0
  8. 8

    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

    0
  9. 9

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

    0
  10. 10

    Hexacreative.web.id

    March 1, 2010 3:50 am

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

    0
  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.

    0
  12. 12

    Great ! Thank’s for your work !

    0
  13. 13

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

    0
  14. 14

    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.

    0
  15. 15

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

    0
  16. 16

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

    0
  17. 17

    Amazing Post !

    0
  18. 18

    Sebastian Dubois

    March 1, 2010 5:12 am

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

    0
  19. 19

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

    0
  20. 20

    Good article

    1
  21. 21

    Does anyone else question the use of “some of the most popular browsers do not yet support them.” I’ll assume this is a reference to IE maybe? In that case I don’t think it’s “popular” but just the browser that came with the machine for the majority of people that do not know they can use a different one or care to look into it. In that case shouldn’t we say “most used browser”?

    1
  22. 22

    For those that were wondering about browser support for the Adjacent Sibling Selector, fear not.

    Dean Edwards recently updated his famous javascript that brings IE up to par with modern browsers.

    http://code.google.com/p/ie7-js/

    His newest release (IE9.js) puts in support for CSS3 pseudo selectors in IE 5.5+.

    Selector and Property support:
    http://ie7-js.googlecode.com/svn/test/index.html

    0
  23. 23

    Great post .
    Typo is really my fav part in web design . Content ( displayed with fonts ) is the most important one when they take a look at your site and font is the lightest way to decorate your web site :)

    0
  24. 24

    I hadn’t heard of the :lang pseudo-class, so that’s the something new I’ve learnt today. Thanks for the great article Yaili, keep them coming.

    0
  25. 25

    Let’s make the web more beautiful with this cool stuff. Nice article and very helpful.

    Keep the good job.

    0
  26. 26

    Cool reference on typography as it relates to CSS! Little things like letter spacing and hanging indents can instantly improve a site design.

    0
  27. 27

    This is a great article and reference this will be bookmarked, more and more I get clients who want better typography on there site.

    0
  28. 28

    Douglas Bonneville

    March 1, 2010 10:27 am

    I have all my current css tricks more or less memorized. To mess with my “system” has a big price tag with it. Isn’t it a bit too soon, for the general public, to be making sites hideous in older browsers just to make it look nice in new ones? IE6 is still too big. Need to get close to 5% before I’ll drop it off. I’d love to ignore it, but I can’t yet.

    0
  29. 29

    Great information, thanks so much

    0
  30. 30

    thx!! beautiful article.. beautiful author too.. :p

    0
  31. 31

    I would say that even most print media not using hanging quotes.

    0
  32. 32

    This is a terrific article, very well written, laid out, and researched. I’ve bookmarked it for further reference, and I plan on spending some time on Inayaili’s site also. Thanks!

    0
  33. 33

    In my experience @font-face produces mixed results with some fonts, the type rendering is horrendous in some browsers.

    I would still stick with either cufon or sifr at least until ie6 dies and cleartype is turned on by default.

    0
  34. 34

    Great article! Wasn’t aware of the white space property!

    0
  35. 35

    Nice, I hadn’t used some of these properties.

    Great article – thanks :)

    0
  36. 36

    Pandora batteries

    March 1, 2010 9:18 pm

    I think the future of CSS typography is very bright. And I appreciate your article as it does contains some useful techniques and clever effects that use the power of style sheets.Pandora batteries

    0
  37. 37
  38. 38

    Thanks! This was really helpful =)

    0
  39. 39

    yeah, that’s good typography, fastostyle.com is my site. So that, I will want it to become that

    0
  40. 40

    Great post. Exactly what I was looking for. Thx a lot :)

    0
  41. 41

    The article make everyone remember there is a lot and lot to learn. I must seriously try to use it in my site cooljaz124.com

    0
  42. 42

    font-face at http://snook.ca/ does not work with Ubuntu + Firefox… why?

    0
  43. 43

    Thanks a lot
    Awesome

    0
  44. 44

    Insightful post Yaili, a lot of stuff in here that I forget to think about. Thanks for the reminder!

    0
  45. 45

    Great article! Especially the text-overflow is something I was looking for for ages and I’ve always used JS for that so far. Very appreciated..

    0
  46. 46

    It was interesting to read this article and I hope to read a new article about this subject in your site in the near time.

    0
  47. 47

    haven’t seen the hyphenation used yet in the wild, is that supported, I re-read it in your writeup but didn’t see if it was useable yet or just something for the future…

    brent

    0
  48. 48

    Great article! Useful tips! I love how you talk about the fundamentals of typography. Who doesn’t like typography? :)

    0
  49. 49

    MadMonkeyFactory

    March 4, 2010 8:54 am

    Excellent post. Thanks.

    0
  50. 50

    Very nice list…:)

    - Thanks Smashing…

    0
  51. 51

    Inayaili, this is a very well-researched article. Thanks for putting this together. Definitely some things in here that I was not too familiar with.

    The only small issue I have is under the section “The Font Property”. You said that when a value isn’t specified in font shorthand then it’s replaced by the “parent value”. Later in the same section you used the same expression with regards to the fall-back for the font-weight property. I don’t think “parent” value is the correct word to use in the case of font shorthand. With font weight, the element in question will inherit the font-weight given to a parent element. But with font shorthand, it does not inherit from a parent element, but instead is replaced by the “initial” value.

    Font shorthand values that aren’t specified will not inherit values from ancestor elements, which is one of the frustrating things about font shorthand (which I did a screencast on recently), and is a big reason why I pretty much never use font shorthand.

    Otherwise, great job on this. Thanks again for this great research.

    0
  52. 52

    I had no idea the font short hand property behaved the way it did (in terms of inheritance), really glad I know that now. Great article!

    0
  53. 53

    Nice post, currently working on an html basics for bloggers post. I will certainly add this as reference when I get it up. Great job.

    0
  54. 54

    I am really surprised that the work done by David Desandro hasn’t been mentionned. His project named “Curtis CSS Typeface” is awesome, he made a whole typeface using only CSS !!!You should all take a look at it!

    http://desandro.com/resources/curtis-css-typeface/

    0
  55. 55

    Great article!!

    I have found another useful tool to create the EOT font format that’s needed in IE!

    You can use the on-line version of “TTF to EOT Font Converter”.
    http://www.kirsle.net/wizards/ttf2eot.cgi

    0
  56. 56

    This one is also good :-)
    fontsquirrel.com/

    0
  57. 57

    Great article, I now know much more CSS tricks. Thx.

    0
  58. 58

    I am writing a css framework and could use a minute of your time http://bit.ly/vertical-grid-survey

    0
  59. 59

    This is a great article, the typography on the web gets better every year.

    0
  60. 60

    That was a really joy of a piece of writing!!

    0
  61. 61

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

    1
  62. 62

    Thanks Pablo worked a treat. No matter how much you know its always he simple things that defeat you.

    0
  63. 63

    @Andy, there are few in there that don’t work in FF but do in IE.

    0
  64. 64

    Well said, I agree and have use this technique in the past and the results are very mixed

    0
  65. 65

    It’s a chicken egg problem concerning the general public… if designers/developers are not going to use new techniques, the browsers will keep supporting old techniques. And if browsers won’t support new techniques, designers/developers can’t use them for the general public.

    One way or the other, someone has to take the lead in this. Imho, microsoft plays a major role in this (not a positive role at the moment).

    0
  66. 66

    Yeah same here

    0

↑ Back to top