‘Tis the season to be jolly, so the carol singers tell us. At 24 ways, we’re keeping alive another British tradition that includes the odd faux-Greco-Roman building dotted around the British countryside, Tower Bridge built in 1894, and your Dad’s Christmas jumper with the dancing reindeer motif. ‘Tis the season of the folly!
The example is not an image, just text. You may wish to see a screenshot in Safari to compare with your own operating system and browser rendering.
Like all follies this is an embellishment — a bit of web typography fun. It’s similar to the masthead text at my place, but it’s also a hyperlink. Unlike the architectural follies of the past, no child labour was used to fund or build it, just some HTML flavoured with CSS, and a heavy dose of Times New Roman. Why Times New Roman, you ask? Well, after a few wasted hours experimenting with heaps of typefaces, seeking an elusive consistency of positioning and rendering across platforms, it proved to be the most consistent. Who’d‘a thought? To make things more interesting, I wanted to use a traditional scale and make the whole thing elastic by using relative lengths that would react to a person’s font size. So, to the meat of this festive frippery:
There are three things we rely on to create this indulgence:
HTML & Descendant Selectors
The markup for the folly might seem complex at first glance. To semantics pedants and purists it may seem outrageous. If that’s you, read on at your peril! Here it is with lots of whitespace:
<div id="type">
<h1>
<a href="/">
<em>2
<span>4
<span>w
<span>a
<span>y
<span>s</span>
</span>
</span>
</span>
</span>
</em>
<strong>to
<span>i
<span>m
<span>pre
<span>s
<span>s
<span>your
<span>friends</span>
</span>
</span>
</span>
</span>
</span>
</span>
</strong>
</a>
</h1>
</div>
Why so much markup? Well, we want to individually style many of the glyphs. By nesting the elements, we can pick out the bits we need as descendant selectors.
To retain a smidgen of semantics, the text is wrapped in <h1> and <a> elements. The two phrases, “24 ways” and “to impress your friends” are wrapped in <em> and <strong> tags, respectively. Within those loving arms, their descendant <span>s cascade invisibly, making a right mess of our source, but ready to be picked out in our CSS rules.
So, to select the “2” from the example we can simply write, #type h1 em{ }. Of course, that selects everything within the <em> tags, but as we drill down the document tree, selecting other glyphs, any property / value styles can be reset or changed as required.
Pixels Versus Ems
Before we get stuck into the CSS, I should say that the goal here is to have everything expressed in relative “em” lengths. However, when I’m starting out, I use pixels for all values, and only convert them to ems after I’ve finished. It saves re-calculating the em length for every change I make as the folly evolves, but still makes the final result elastic, without relying on browser zoom.
To skip ahead, see the complete CSS.
Absolutely Positioned Glyphs
If a parent element has position: relative, or position: absolute applied to it, all children of that parent can be positioned absolutely relative to it. (See Dave Shea’s excellent introduction to this.) That’s exactly how the folly is achieved. As the parent, #type also has a font-size of 16px set, a width and height, and some basic style with a background and border:
#type{
font-size: 16px;
text-align: left;
background: #e8e9de;
border: 0.375em solid #fff;
width: 22.5em;
height: 13.125em;
position: relative;
}
The h1 is also given a default style with a font-size of 132px in ems relative to the parent font-size of 16px:
#type h1{
font-family: "Times New Roman", serif;
font-size: 8.25em; /* 132px */
line-height: 1em;
font-weight: 400;
margin: 0;
padding: 0;
}
To get the em value, we divide the required size in pixels by the actual parent font-size in pixels
132 ÷ 16 = 8.25
We also give the descendants of the h1 some default properties. The line height, style and weight are normalised, they are positioned absolutely relative to #type, and a border and padding is applied:
#type h1 em,
#type h1 strong,
#type h1 span{
line-height: 1em;
font-style: normal;
font-weight: 400;
position: absolute;
padding: 0.1em;
border: 1px solid transparent;
}
The padding ensures that some browsers don’t forget about parts of a glyph that are drawn outside of their invisible container. When this happens, IE will trim the glyph, cutting off parts of descenders, for example. The border is there to make sure the glyphs have layout. Without this, positioning can be problematic. IE6 will not respect the transparent border colour — it uses the actual text colour — but in all other respects renders the example. You can hack around it, but it seemed unnecessary for this example.
Once these defaults are established, the rest is trial and error. As a quick example, the numeral “2” is first to be positioned:
#type h1 a em{
font-size: 0.727em; /* (2) 96px */
left: 0.667em;
top: 0;
}
Every element of the folly is positioned in exactly the same way as you can see in the complete CSS. When converting pixels to ems, the font-size is set first. Then, because we know what that is, we calculate the equivalent x- and y-position accordingly.
Inheritance
CSS inheritance gave me a headache a long time ago when I first encountered it. After the penny dropped I came to experience something disturbingly close to affection for this characteristic. What it basically means is that children inherit the characteristics of their parents. For example:
- We gave
#typeafont-sizeof 16px. - For
#type h1we changed it by settingfont-size: 8.25em;. Than means that#type h1now has a computedfont-sizeof 8.25 × 16px = 132px. - Now, all children of
#type h1in the document tree will inherit afont-sizeof 132px unless we explicitly change it as we did for#type h1 a em.
The “2” in the example — selected with #type h1 a em — is set at 96px with left and top positioning calculated relatively to that. So, the left position of 0.667em is 0.667 × 96 = 64px, approximately (three decimal points in em lengths don’t always give exact pixel equivalents).
One way to look at inheritance is as a cascade of dependancy: In our example, the computed font size of any given element depends on that of the parent, and the absolute x- and y-position depends on the computed font size of the element itself.
Link Colours
The same descendant selectors we use to set and position the type are also used to apply the colour by combining them with pseudo-selectors like :focus and :hover. Because the descendant selectors are available to us, we can pretty much pick out any glyph we like. First, we need to disable the underline:
#type h1 a:link,
#type h1 a:visited{
text-decoration: none;
}
In our example, the “24” has a unique default state (colour):
#type h1 a:link em,
#type h1 a:visited em{
color: #624;
}
The rest of the “Ways” text has a different colour, which it shares with the large “s” in “impress”:
#type h1 a:link em span span,
#type h1 a:visited em span span,
#type h1 a:link strong span span span span,
#type h1 a:visited strong span span span span{
color: #b32720;
}
“24” changes on :focus, :hover and :active. Critically though, the whole of the “24 Ways” text, and the large “s” in “impress” all have the same style in this instance:
#type h1 a:focus em,
#type h1 a:hover em,
#type h1 a:active em,
#type h1 a:focus em span span,
#type h1 a:hover em span span,
#type h1 a:active em span span,
#type h1 a:focus strong span span span span,
#type h1 a:hover strong span span span span,
#type h1 a:active strong span span span span{
color: #804;
}
If a descendant selector has a :link and :visited state set as a pseudo element, it needs to also have the corresponding :focus, :hover and :active states set.
A Final Note About Web Typography
From grids to basic leading to web fonts, and even absolute positioning, there’s a wealth of things we can do to treat type on the Web with love and respect. However, experiments like this can highlight the vagaries of rasterisation and rendering that limit our ability to achieve truly subtle and refined results. At the operating system level, the differences in type rendering are extreme, and even between sequential iterations in Windows — from Standard to ClearType — they can be daunting. Add to that huge variations in screen quality, and even the paper we print our type onto has many potential variations. Compare our example in Safari 3.2.1 / OS X 10.5.5 (left) and IE7 / Win XP (right). Both rendered on a 23” Apple Cinema HD (LCD):
Browser developers continue to make great strides. However, those of us who set type on the Web need more consistency and quality if we want to avoid technologies like Flash and evolve web typography. Although web typography is inevitably — and mistakenly — compared unfavourably to print, it has the potential to achieve the same refinement in a different way. Perhaps one day, the glyphs of our favourite faces, so carefully crafted, kerned and hinted for the screen, will be rendered with the same precision with which they were drawn by type designers and styled by web designers. That would be my wish for the new year. Happy holidays!
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
17/12/2008
Snap! Nice bit of typographical trickery. Enjoyed the article. Thank you!
Vote Helpful or Unhelpful
17/12/2008
Um. Doesn’t look like your reference image in any of my browsers, Safari included:
http://informationage.co.nz/temp/folly.png
Tested in newest public versions of IE, FF, Opera, Safari, Chrome on 32 bit Vista
Vote Helpful or Unhelpful
17/12/2008
You may just need to do a hard reload to make sure you have the latest version of this site’s stylesheets.
Vote Helpful or Unhelpful
17/12/2008
Jon,
what a beautiful play with type ;-)
Thanks for sharing your technique.
and happy holidays to you, too :-)
Vote Helpful or Unhelpful
17/12/2008
One can learn more from this little typographic eye candy than from some heavy CSS books on Web Typography.
Thanks, Jon, you didn’t disappoint—rocking type on Web, as usual :)
Vote Helpful or Unhelpful
17/12/2008
That’s great! I also experimented with something similar to this and must say it does get confusing at first, but once you wrap your head around it it becomes really easy to understand. Great job!
Vote Helpful or Unhelpful
17/12/2008
Looks fine for me on first load, running firefox in leopard.
So this is very impressive, a great example of some useful practices, and something I might try sometime. But I wonder – do you think that this has any real world application? There’s all the trouble of doing something like this, or you could just use an image replacement. You could even remove all of the nested spans if you did that.
Vote Helpful or Unhelpful
17/12/2008
This is lovely! Thank you for sharing.
Vote Helpful or Unhelpful
17/12/2008
@Andrew first thing that comes to mind is that if it were an image you wouldn’t be able to select it to copy-paste it into a text editor.
Besides, it IS a folly :)
Vote Helpful or Unhelpful
17/12/2008
Folly indeed.
Watch out for singing vikings when writing your rules
(span span span span…)
Vote Helpful or Unhelpful
17/12/2008
It’s quite nice, but it makes it pretty unreadable. If you didn’t know what the title of this site was before you saw that, you wouldn’t have a clue what it was supposed to say.
To me, that could say either ’42 to impress your ways friends’ or ’42 to impress ways your friends’
Vote Helpful or Unhelpful
17/12/2008
Fantastic tutorial, Jon!
@ Andrew: I think Jon’s personal site demonstrates that this does have real-world application. :)
Vote Helpful or Unhelpful
17/12/2008
Great article as always mate. 100% behind you regarding us designers/developers improving web typography.
I was shocked to read from your bio that you have left Gr0w Collective. A great asset lost but one gained at OmniTI.
Vote Helpful or Unhelpful
17/12/2008
Jon, remarkable article. Just like your logo made a remarkable impression on me when I first saw it a few weeks ago.
One might argue that some follys have more than just “decoration” purposes since they send an actual, vivid message. This one says: You care about typography. Right off the bat.
Great work. Thanks for sharing the technicalities of this with us. Although, I hope you’re prepared to start seeing follys like this throughout the web. I think you can just see them as tributes to the great piece of web-art that is your logo.
Congrats & thanks.
Vote Helpful or Unhelpful
17/12/2008
Is there any reason you used nested spans rather successive spans with classes?
Vote Helpful or Unhelpful
17/12/2008
@Andrew, @Elliot: I think the trouble is that there is no longer a real-world application – if I saw a site carrying a header like this, I’d immediately be thinking ‘Ah, that’s from Jon Tan’s site’ :)
So Andrew, there probably isn’t a direct real-world application of this tutorial. But that’s really not the point! This tutorial isn’t something to be taken directly and reproduced, but rather an insight into a different way of thinking about how type can be manipulated with CSS rules. It’s a primer which shows that you don’t necessarily have to think about formatting text in paragraphs or even words, but can really deconstruct it and do whatever you like. The end result of this tutorial and a bit of careful thinking about the type in your life could easily look very different – but no less special!
Take care, Andi
Vote Helpful or Unhelpful
17/12/2008
Quite impressive indeed. Its great to see all what people do with CSS. Really nice article and your logo is just kick ass
Vote Helpful or Unhelpful
17/12/2008
Super! You got me triggered to try it out immediately. I might just have created a new header for my website.
Thanks!
Vote Helpful or Unhelpful
17/12/2008
Jeff, Prisca, Vivien, Patrick, Vasily, Matijs, Elliot, André, Andi, Johns: Thanks for all the kind words, guys; I very much appreciate them.
Andrew: An image replacement wouldn’t be near as much fun. :) In some ways, the folly is just an extension of the very real-world and useful h1 at Happy Cog , which breaks up the copy into logical chunks. This example is just an extreme version, evolved from one I did in 2006.
Steve: You could say that Grow has been assimilated into the OmniTI borg – much of what we were is being ported there.
Frankie: Classes would make it the HTML even more awkward than it already is. You could use sequential elements with adjacent sibling selectors if they had full historical support. In fact, child selectors could also be useful, too. Descendant selectors require nesting.
Chris: Typography is about legibility, but not always. This is one of those times.
Vote Helpful or Unhelpful
17/12/2008
Friggin’ sweet. It’s more simple than it appears initially, but it’s still not an exercise for the faint of heart. Very cool stuff Jon – thanks for sharing!
Vote Helpful or Unhelpful
17/12/2008
@Jon I guess that depends what your definition of awkward is. I’d prefer:
<span class=“2”>2</span><span class=“4”>4</span> <span class=“w”>w</span><span class=“a”>a</span><span class=“y”>y</span><span class=“s”>s</span>
…as being more readable and workable. But maybe that’s just me.
You could also then use the nth-child CSS selector (although that only works in more advanced browsers).
Vote Helpful or Unhelpful
12/01/2009
Awesome, I just downloaded safari for windows so I could experience typographical bliss for a while.
Very cool
Vote Helpful or Unhelpful
27/06/2009
This site own header is a good example, too, only a lot simpler and cleverer than this acrobatic folly :) Another real world example may be to mark some unpublished posts for admin where the huge 72px “UNPUBLISHED” word is rendered absolutely underneath the post contents.
With the lack of font embedding, shall I think this is a low-tech approach against the Scalable Inman Flash Replacement (sIFR) technology? Yet, very inspiring, thanks.
Vote Helpful or Unhelpful
Impress us