The Future Of CSS Typography

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:

1 .post h2 {
2 font-weight: bold;
3 color: red;
4 }

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 in The Future Of CSS Typography
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 in The Future Of CSS Typography
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-and-tell in The Future Of CSS Typography
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 in The Future Of CSS Typography
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:

1 p + p {
2 text-indent: 1em;
3 }

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:

1 blockquote {
2 text-indent: -0.2em;
3 }

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


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 in The Future Of CSS Typography
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:

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

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:

1 h2 {
2 font-family: Museo Sans, sans-serif;
3 }

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.


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 in The Future Of CSS Typography
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:

1 p {
2 text-shadow: #000000 1px 1px 1px;
3 }

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

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

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.

Nyt-app in The Future Of CSS Typography
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:

1 li {
2 white-space: nowrap;
3 width: 100%;
4 overflow: hidden;
5 -o-text-overflow: ellipsis;
6 text-overflow: ellipsis;
7 }

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 in The Future Of CSS Typography
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.


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):

1 div:lang(fr) {
2 background-color: blue;
3 }
5 div:lang(de) {
6 background-color: yellow;
7 }

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

1 div[lang|=fr] {
2 background-color: blue;
3 }

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.


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!

38 Comments to “The Future Of CSS Typography”

  • Henriette Karpf March 10, 2010 at 7:27 am

    I like the layout of your blog and I’m going to do the same thing for mine. Do you have any tips?

  • WP Themes April 3, 2010 at 7:44 am

    Genial dispatch and this post helped me alot in my college assignement. Thanks you as your information.

  • Debt Settlement April 22, 2010 at 4:49 am

    Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.

  • Nogedaydaybap May 17, 2010 at 12:15 pm

    Just want to say what a great blog you got here!
    I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

    Thumbs up, and keep it going!


  • vishal August 3, 2010 at 4:27 pm

    Thankz for sharing it.
    I like it..

    Ram Ram

  • Odis Menk November 12, 2011 at 1:28 am

    I’m extremely inspired with your writing talents as smartly as with the format for your weblog. Is this a paid subject or did you modify it yourself? Either way keep up the excellent quality writing, it is uncommon to look a nice blog like this one today.

  • as are complementary to each other December 1, 2011 at 6:56 pm

    There’s three different types of hair.

  • Scott W August 3, 2013 at 5:03 am

    I have a very good base in xhtml and css – what would be the next thing to learn?

    JAVA, PHP, …??

  • Praveen August 3, 2013 at 9:35 pm

    For the last 10 years, I have worked as a graphic designer or web designer. Beyond HTML and CSS I haven’t really taken the time to learn any development/programming languages. I have always been on the typography, layout, and aesthetic side.

    My question is, out of the numerous languages out there to be learned, which should I focus my training? PHP, Ruby on Rails, SQL, Perl, Javascript, or some language that I don’t know about?

    Which would be the most valuable to an employer in this day and age? I don’t want to start learning a language that’s on it’s way out.


  • lildevilgurl152004 August 7, 2013 at 10:47 pm

    i want to study web design. but i just want to know if there’s a difference between web design or web graphic design?

  • encyclopath August 9, 2013 at 1:10 pm

    So I tend to measure elements in pixels rather than ems, but this is because I don’t understand ems but hear they are the future.

    Can you explain them to me please?

  • Cole August 9, 2013 at 1:44 pm


  • vanvark83 August 25, 2013 at 6:46 am

    I know, best is a subjective and arbitrary term. But I have certain stipulations for these books. They are not in any particular order:

    Color. I prefer to learn from colored resources. But if you have a really good book that you just have to recommend but is not in color, by all means, do so.

    Projects. Quizzes. I enjoy learning through application, so I want books that actually have work not merely questions and text.

    Technical Jargon. I am a neophyte. Please recommend books that actually explain all the technical terms to the reader as if he or she is a human. Just make sure the explanations are not oversimplified.

    I believe that is it.

    Thank you,


  • Gamer959 August 25, 2013 at 6:47 am

    I am planning on attending a community college for 2 years, and taking my general education courses during that time. After that I’m going to transfer to another college and take all the necessary classes for graphic design. Going to a community college won’t affect my jobs in the future or anything, will it? I know they have a bad rep because they’re not hard to get in at all, but this plan will work great for me. Do employers really make decisions based on which schools you go to?

  • wwwavid360gamercom September 19, 2013 at 2:00 pm

    I do not mean inserting a photo in the Photo Box. I mean pasting an image file in the Entry Content Box.

    The Ask Yahoo! 360° Help file says that you can, as it points out the following (when clicking on Learn More, placed next to the View HTML Source, in the compose blog)

    Can I use HTML tags or CSS properties in my Yahoo! 360° blog?

    Ask Yahoo! 360º answers: Yes! You can use a variety of HTML tags and CSS properties in your blog posts. Then it mentions the following:

    A special note on image tags:
    To use an image tag in your blog post, you must specify a height and width for the image (for example: ). Images without specific height and width attributes will not display. However, there is NO example written. Please help.
    Sorry for the typo: I meant “How can I ……. in the compose blog – not compose bolg! My apologies.

  • EzioAuditore1459 October 3, 2013 at 3:25 am

    I added a body background image to an HTML page using CSS, but the image tiles a bit.

    What do I put in the CSS tag so it will stretch or shrink to fit the browser screen?

  • toast October 3, 2013 at 4:21 am

    In my case, I’ve designated links as Century Gothic, 16, black in Page Properties. I want most of the links on my page to be like that. However, there is one link that I’d like to look different (I want it to be size 12). How would I change that without changing the other links?

  • Joey 01 October 9, 2013 at 9:04 am

    I need to position my divs on top of a header picture. I have played with z-index in the css rule definition properties but i can seem to do it.


  • isk8at818 October 10, 2013 at 3:11 pm

    I want to change a CSS style-sheet to hide an element that is designated id=’site-title’ I know I can use { display: none; } , but I am not sure how to format it. Anyone have any ideas? My CSS skills are a little rusty.

  • nitin October 16, 2013 at 7:11 pm

    When you make a link in a website, how do you make it so it doesn’t have the underline? Is there a way to do it with CSS?

  • RichT October 25, 2013 at 11:11 am

    Right now I’m on Opera mini browser. My Boost web browser has error logings like this. CSS NO PROPERTY OR UNKNOWN PROPERTY. HTML Unknown Attribute xml:lang? Is this normal error logging. Remember it is a call phone Sanyo Incognito. I do not have a home computer.
    The error loggings are on the web browser that came with the phone. It Is Boosts web browser that is getting the error loggings NOT my opera mini.

  • nyyankees1123 October 26, 2013 at 3:33 am

    Let’s say that I have a sidebar on the left with a bunch of links. What I want is the following:

    When a user hovers their mouse over one of the links, the text on the page changes. I would do this by showing the div filled with text on mouse over.

    Is this possible to do without using JS? Or is there a good CSS solution?

  • addmeonxbox360myuserisfallior October 28, 2013 at 9:50 pm

    My Css works property in FF and IE8 but not IE6 or 7
    some css don’t work like Floating an element.
    Is there anyone who knows how to resolve that IE bugs?

  • Peter October 29, 2013 at 10:20 am

    I am very new to web design as I have no prior experience and know little HTML.
    I just want to know what the best software is to purchase to design blogs. I have downloaded CS5 Design Premium with Dreamweaver and Photoshop, but I realize this is a little advanced for me and expensive!!!
    Does anyone have suggestions of software or ways to build blogs and websites easily and inexpensive?


  • jordenkotor October 30, 2013 at 10:03 am

    I need to center a background image, the problem is that I can’t use CSS in order to do it. The image can’t tile, and it has to be centered. So what would be the proper code in HTML?

  • Jairo November 1, 2013 at 12:02 pm

    I have 10 images on the screen. When a user clicks the images, it puts a text item over them.

    What I want to do now is add a variable to the css property of the image, through javascript, that will keep a count of how many times each image was clicked.

    So I want an integer variable for the image element. How can I do that?

    Thanks for any suggestions

  • Kaylla November 1, 2013 at 12:02 pm

    I have a section in my website where a user can type an answer to a Question. For example the questions states:

    Movie I have watched the most times:
    Answer: Wedding Crashers

    I have an edit button next to the question. When the user clicks on the edit button I want the website to open up a text-box with Wedding Crashers in it in the same place as the original answer box. The user can edit the answer and change it to another movie. There should be a save and cancel button below the text-box. Once the user changes the answer from Wedding Crashers to another movie and clicks save, the text-box disappears and the new answer is displayed on the website. For now I only want to be able to edit the hard-coated HTML content. I will connect to a database later and put a query to update the users database as per his/her answer. I think it is something to do with javascript and the CSS properties of display:block and display:hide. Can anybody help?

  • Kobe November 2, 2013 at 2:51 am

    I have an image with a box on it and I need the css code to position the text box on top of the image. I used to know how but I can’t remember. Does it have something to do with text wrapping?

  • Xbox Gamer November 4, 2013 at 11:12 pm

    I want to add an image at the top right side of blog header. What is the CSS for this? I seem to be getting it wrong, nothing happens. Help please!

  • tjpimpin November 6, 2013 at 6:21 am

    I’m trying to overlay an image on top of the other elements on my web page, so I’m using position:fixed properties for that image, but I can’t for the life of me figure out how to centre the image on the page. Can anyone give me some help?
    Centering via margins doesn’t work for fixed elements.

  • Rkmc November 14, 2013 at 1:48 am

    I have two lists on a page. How would I separate them in CSS to give them different properties. For some reason my tags don’t seem to have that ability.

  • mukesh November 16, 2013 at 12:25 am

    Have seen such way of writing CSS and do not really understand what this means.
    For example:

    p {
    _font-family: ………;

    instead of
    p {
    font-family: ……..;

    What can the underline as shown above affect the CSS?
    @chrisduff: Thanks, that was what I was toldm but which way is better?
    To put underline in front of a selector as above
    to add comments in

    (I have never tried any.)
    @Geoff: An “R”…..? LOLLLL!

  • unbleevable39 November 19, 2013 at 3:33 pm

    If I have:

    How do I force the ‘body’ div to extend beyond the left and right columns that are within it? I end up with the body cutting off the longer of the two inner columns.

    Do I need to apply css properties to all 3 divs?

  • _marky_mark_ November 19, 2013 at 3:34 pm

    I really, really, hate the dotted lines that appear around links when you click on them when using firefox. I have looked around for an answer, and many sites mention something about CSS. What is it and how do I find it so I can get rid of those infernal lines?

  • everydayGuitarist November 26, 2013 at 5:10 am

    I am seeming to have problems with having a special font on my website. I first install it on my computer then I add it to my CSS page in Dreamweaver. I then try to view it on another computer and it is just regualar? I have no idea what to do about it?

  • Delores December 26, 2013 at 5:31 am

    Hi, all is going well here and ofcourse every one is sharing information, that’s truly fine, keep up writing.

  • commercial carpet cleaning san diego April 17, 2014 at 1:43 am

    I love what you guys are usually up too. This sort of clever work and reporting!
    Keep up the terrific works guys I’ve incorporated you guys to our blogroll.

  • roof repair Vancouver April 17, 2014 at 2:19 am

    Thank you for the auspicious writeup. It actually used to be a leisure account it.
    Glance complex to far added agreeable from you! By the way, how could we
    keep in touch?