¶ Back in January I was part of a double bill with Jon Tan, entitled Skillswap goes typographic. It went down really well so I thought I’d better tie it all together here.
My talk was on “Facing up to Fonts” the blurb for which went as follows:
Browser support for the typographical aspects of CSS is gradually increasing. Things are on the up. Richard will be trouncing the myth of web-safe fonts, demonstrating how to go beyond bold, detailing the technicalities of font embedding and exploring the commercial and ethical minefield therein. The introduction of font embedding in particular is a long-awaited step in the right direction. However it brings with it a host of complications; technical, ethical and aesthetic.
The take home points were:
- Think about typefaces beyond the core web fonts
- Make sure your font stacks make sense and are useful
- There’s more than regular and bold
- Font embedding is here and now
Jon’s talk was on “80% Science, 20% Art” and was described thusly:
Web typography is a toddler in the big bad world of competing displays, browsers and operating systems. Jon takes it by the hand, and discusses the science that comes before the art. It’ll be a celebration with lots of opportunity for questions and discourse. From exploring how fonts are rendered, to a quick refresher on typesetting and with a little history thrown in for good measure, it’s time to get your glyph on!
- My slides are on Webtypography.net
- My audio is on Huffduffer
- Jon’s slides are on his blog
- Jon’s audio is on Huffduffer
Comments
1
Thanks for posting your slides and notes. I just went through them and it was really informative. It is pretty hard to believe that it’s taken ten years for
font embedding to get to the point we're at today. It really makes me wonder where web typography will be in 5 to 10 years from now.A side note, it seems font-embedding is working on firefox 3.0.8 on OS X. I'm able to read your Museo heading at http://www.clagnut.com/blog/2234/ . I thought this wasn't supposed to be working until 3.1?
2
Cheers for the post, very useful info. Jon Tan are you a lecturer?
3
That’s a really interesting topic. Thanks for posting your slides and notes.
4
Surely you did a good review about this font typing. It will bring a new vision of blogging world. People are looking through the font we type on our web/blog. A great fine artistic font will catch more readers.
5
That topic sounds really interesting and posting your notes and slides is also very helpful and informative. So thanks for that.
6
Thanks for posting these slides Rich. It’s much appreciated. I didn’t realise quite how much I have to learn!
7
Hi Richard,
Please excuse me for clogging up this post with, probably, an irrelevant comment – I typed ‘typography’ into your site search and ended up here.
On http://clagnut.com/ you use the ‘classic’ web type scale:
/* size headings using classic scale of 14, 16, 18, (21), 24 */
Can you tell me what makes this so classic?
In an effort to key down my web type I referred to this post you made on 24 Ways last year: http://is.gd/3ipF
I’m back there this morning as a reference because I’m, yet again, changing my type framework. I’ve been using 18px baseline with this scale:
P(body) = 12px
H1 = 36px
H2 = 30px
H3 = 24px
H4 = 18px
H5 = 14px
H6 = 12px
But I’m finding that I’m not getting enough content above the fold, and clients are starting to kick up a fuss about it.
I’m at my wits end, thinking that simply my scale is to blame, as, to my understanding, this will have knock on effects (going by your 24 Ways article) on line-heights and margins.
Thanks for any help you can swing my way mate.
Lewis
mail@ldexterldesign.co.uk
8
It’s not a classic scale specifically for the web, but for typography in general. For further explanation check out Mark Boulton’s Five simple steps to better typography
Ah the fallacy of the fold. Your clients need to be aware of three things. Firstly there is no ‘fold’ (see the seminal article Blasting the Myth of the Fold. Secondly placing stuff higher up the page in lieu of having a readable text size or a scannable page makes no sense at all – unless your clients would rather their users can’t read the page well. Thirdly people scroll. At least they do if the text is worth reading and can be read easily (see point 2).
9
Wow! Thanks for the quick reply. Was just having my lunch, but thought I would have to come back to this another day :]
Man, thanks for Mark’s link. I have been meaning to get hold of some of his books – just been broke as hell recently (I could spend hundreds on books most months TBH)
When I initially set out to devise a type framework I (thought I had) used the scales from Adobe Illustrator (I had to start somewhere) Obviously I’ve made a mistake from the start by skipping a note in the scale:
P(body) = 12px
H1 = 36px
H2 = 30px – Invented this from somewhere?!
H3 = 24px
Skipped 21px
H4 = 18px
H5 = 14px
H6 = 12px
The question now is should all headings be larger in scale than the standard body 12px typeface? Logic would say yes, but there are often times when you want smaller type than the body.
Wordpress uses <small>, for instance, and you can obviously play with special classes – would you do that yourself?
Thanks mate, really appreciate the help. That’s cleared that up nicely.
Best,
L
10
No reason at all why headings should always be bigger than body text. Sometimes they can justifiably be smaller and the same size (and possibly inline rather than on a separate line).
The important thing, as is so often the case, is to be consistent.
11
Cheers Rich – legend!
I’m pretty happy with this:
/* px / baseline = em */
/* font size (px) / baseline = line-height */
/* Baseline/line-height: 16px */
body{font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1em;}
p{font-size:.75em;line-height:1.33em;margin:1em 0;} /* 12px */
h1{font-size:2.25em;line-height:2.25em;} /* 36px */
h2{font-size:1.5em;line-height:2em;} /* 24px */
h3{font-size:1.3125em;line-height:1.3125em;} /* 21px */
h4{font-size:1.125em;line-height:1.125em;} /* 18px */
h5{font-size:.875em;line-height:.875em;} /* 14px */
h6{font-size:.75em;line-height:.75em;} /* 12px */
Always nice to have a framework under your belt. Feels good.
Thanks again dude,
L
12
Scrap that last one. I think I’ve sussed it:
/* px / baseline = em */
/* font size (px) / baseline = line-height */
/* Baseline/line-height: 16px */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
} /* Scales body font down to 12px */
p {
font-size:1em;
line-height:1.33em;
margin:1.33em 0;
} /* 12px */
h1 {
font-size:2.25em;
line-height:.44em;
margin:.44em 0;
} /* 36px */
h2 {
font-size:1.5em;
line-height:.66em;
margin:.66em 0;
} /* 24px */
h3 {
font-size:1.3125em;
line-height:.76em;
margin:.76em 0;
} /* 21px */
h4 {
font-size:1.125em;
line-height:.88em;
margin:.88em 0;
} /* 18px */
h5 {
font-size:.875em;
line-height:1.14em;
margin:1.14em 0;
} /* 14px */
h6 {
font-size:.75em;
line-height:1.33em;
margin:1.33em 0;
} /* 12px */
This web type business is harder than programming to grasp!
L
13
About to cry…
I’m starting to think your 24 Ways article is misleading Richard. Would you be so kind as to lead by example here:
I have a baseline of 16px.
h1 {
font-size:2.25em;
line-height:-;
margin-top:-;
margin-bottom:-;
} /* 36px */
???
And how have you worked out the line-height and margins in the above example?
Thanks,
L
14
Lewis – remember that the line-height and margins, when specified in ems, are relative to the type size of the element to which you’re apply the line-height and margins. Font-size however is set relative to the parent element.
So in your last example, you have the H1 as 2.25em. Assuming that the parent element has a font size of 16px, the H1 will be set at 36px.
For large headings, I would recommend setting the line-height as close to the font size as possible. So set line-height:1.111em (40px, which is 2.5 times your baseline).
The margins are up to you, but setting a top margin of 1.111em (40px) and a bottom margin of 0.5em (16px) may serve you well and keep the heading working the 16px baseline.
15
Hi Rich,
Thanks for the response. I understand everything you’ve said in the last comment. One thing I was doing badly wrong was getting the BASE FONT SIZE and the BASELINE muddled up. If I could relay the horrible maths I was doing I would, but I’d like to draw a line under it. Plus there’s no point in repeating it here on your pages either.
Now, for example, in this example below, I have a BASE FONT SIZE of 12px and a BASELINE of 18px:
/* Conversions (px=em) sourced from: http://pxtoem.com/ */
/* Base font size: 12px (default) */
/* Font size (px) / baseline (18px) = font size (em) */
/* Baseline / font size (px) = line-height */
/* Total margins must equal to line-height, or multiples thereof */
body{font-family:Arial, Helvetica, sans-serif;font-size:75%;}
html>body{font-size:12px;}
p{font-size:1em;line-height:1.5em;margin-bottom:.75em;margin-top:.75em;} /* 12px */
h1{font-size:3em;line-height:1em;margin-bottom:.5em;margin-top:.5em;} /* 36px */
h2{font-size:2em;line-height:1em;margin-bottom:.5em;margin-top:.5em;} /* 24px */
h3{font-size:1.75em;line-height:1em;margin-bottom:.5em;margin-top:.5em;} /* 21px */
h4{font-size:1.5em;line-height:1em;margin-bottom:.5em;margin-top:.5em;} /* 18px */
h5{font-size:1.167em;line-height:1.285em;margin-bottom:1.285em;margin-top:1.285em;} /* 14px */
h6{font-size:1em;line-height:1.5em;margin-bottom:.75em;margin-top:.75em;} /* 12px */
If you could OK this for me (it looks fine in a browser) I think I’ll have it sussed this time.
Cheers for your patience mate.
L
16
Correction*
h1{font-size:3em;line-height:1em;margin-bottom:1em;;} /* 36px */
Looks beautiful so far! :]
L
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.