Blog Improve It

The common denominator

Posted by Leandro Mello over 5 years ago.

On the web, even if you can't show an image, you can still speak the thousand words.

Last Friday I discovered a detail in my method of writing CSS that I intend to adopt as "best practice" for me in every project from now on: the only style sheet which, in a project that includes screen/printing/mobile, should have attribute media="all". I call it "typography.css".

Inspiration come from out of the web

I came up with this method by applying, in web design, some of the modus operandi used by advertisers and designers off-web.

In design and advertising, people are used to dealing separately with layout and typography. That's because design applied to text has itself such a strong personality, that it deserves special attention. There are lots of companies which devote themselves to typography only, and spend days, even weeks, to give birth to a single, complete, beautiful font. The looks of the text hold their very own power.

On the web, we suffer from serious constraints regarding typography. It's impossible to use unique typefaces in a website because they may not exist in the user's computer. Using fancy images for text implies some risks to accessibility, and embedding one's own set of fonts in the code has issues of its own. In a nutshell, patience: we'll just use the cards we're given and know how to play with them. Which is fine, since this article isn't really about typography itself, but what we can learn from the habit of putting it apart from the layout.

Consistency and visual identity

The good thing about CSS is that it ensures consistency throughout one's site pages. One little change in a single selector and voilà, thousands os pages updated at once! That's all about what we call visual identity.

A company that respects its own visual identity demands that, at least, its corporate typography be consistent in every communication medium, whether print or electronic, and as much as possible. Layout schemes may be subject to little adjustments every now and then, because of the diversity of surfaces they can be applied to, but the way text looks must respect an even more global, thorough consistency across media — the designer might one day find him or herself having to make a piece of design that relies solely on typography, and people have to be able to realize just which company such piece belongs to. On the web, relying heavily on text is something that happens quite often.

The common denominator

Imagine your site is whole: printable, mobile-friendly, presentation-ready, almighty. Now strip off all the fancy stuff. Images, layout luxuries and everything. What's left? Text. On the web, even if you can't show an image, you can still speak the thousand words. And can as well spread them to other media. So, why not creating a style sheet that deals only with what regards text?

How it happened to me

As the projects I've been working with were growing, it got more and more complicated to browse through the sea of selectors. Since I write CSS in an incredibly regular fashion, with every property always obeying the same pattern and order (ok, call me maniac), I realized text properties came always grouped before layout properties. To decrease file size, I decided to throw all those text properties on a separate file, which I called typography.css.

So, for an example:

.rss_links a, 
.podcast_files h4 a {
    font-size:              80%;
    text-transform:         uppercase;
    text-decoration:        none;
    padding:                .3em 1em;
    background:             #F7F7F7 url(/images/background/gradient_light_to_dark.png) repeat-x bottom left;
    border:                 1px outset #F7F7F7;
}

... was split in a part that went to typography.css:

.rss_links a, 
.podcast_files h4 a {
    font-size:              80%;
    text-transform:         uppercase;
    text-decoration:        none;
}

... and another one that remained in the original application.css:

.rss_links a, 
.podcast_files h4 a {
    padding:                .3em 1em;
    background:             #F7F7F7 url(/images/background/gradient_light_to_dark.png) repeat-x bottom left;
    border:                 1px outset #F7F7F7;
}

And so on, with all of the selectors. The splitting was quite easy. The decision of making the split and the name of the new style sheet was more due to my old habits as a graphic designer — and a slight hope that it actually decreased file size — than to having any idea of what it would result in (I barely knew, but there would be pretty interesting results).

There is a moment when it's time to make a print and a mobile CSS. On my first experiments since I began using the "typography" method, I decided applying the same principle to the print and handheld media, thus creating style sheets called application_print and typography_print, and application_handheld and typography_handheld.

My "stylesheets" folder then became like this:

Beautiful! But, boy... six style sheets just because I was all into this putting-typography-apart-from-layout designer fuss? "There has to be a better way to do this", I thought. And there was. With the subtle perception that typography (as said a little before) must be global.

Refactoring, results and advantages

I came to realize that the selectors on all of the typography files were very alike. So I mixed up typography, typography_handheld and typography_print into a single typography.css. End of duplication: it would now take care by himself of everything text-related — font size, typeface colors, italics, bolds, capitals and so on. On the print CSS, since people usually prefer printing text in black, I just wrote html * { color: #000; } to make sure everything got black (and made the same to some stubborn selectors that were left).

After all that, in the HTML head, I gave typography.css the exclusive attribute media="all". Other style sheets should concern their own specific media. Thus, all these sheets would inherit the same text properties, which would in turn ensure consistency not only among every page in a website, but across the many media available by a given company and its website. All about visual identity, fellow reader!

This method brought up some other advantages:

The new practice has been bringing me good results. Sure, there are exceptions: in a small project one doesn't intend to print or see in a handheld device, it's just not worth separating typography and layout. On the other hand, a huge project, even one that may have a typography.css, has more chances of having additional style sheets which would probably discredit my "n+1" count. But all in all, working my CSS out is a lot easier when I take care of one thing at a time. That's something I'm going to adopt as best practice on my future projects, that's for sure... until better practices come up! :)

This was my first entry on Improve It's blog. I hope the information shown here has been useful somehow, and inspire designers and programmers some good practices. Up to what I've experienced, this method was one to really make work easier here. Sure, either I haven't read enough about CSS, or this topic about separating typography is already old history around the world, or both of them. That's why I invite you designer fellows to join the discussion (and to aid me with my rusty english!). Who knows how much improved this methodology (and my english skills) can get? :)

Tags  | 1 comment

How did you like it? Write your comments and suggestions below!

Follow up this page’s RSS.

Comments (1 up to now)

  1. Helder Ribeiro said 4 months later:

    wow, great article! i'm not a designer and usually don't deal too much with css myself, but it's great to see that some common principles (like refactoring) apply everywhere :)

    talking about typography, if only linux had as good typography as mac os x... i keep on hoping :)