10 considerations when working with web typography

This week on the Boagworld Show we look at how web typography can transform a site and what you need to do to get the most from it.

Paul Boag:
This week on the Boagworld Show we look at how web typography can transform a site and what you need to do to get the most from it.

Add your own suggestions or view the links mentioned in this weeks show.

Hello and welcome to boagworld.com, the podcast for all those involved in designing, developing and running web sites on a daily basis. My name is Paul, joining me as always is Marcus. Hello Marcus.

Marcus Lillington:
Hello, Paul.

Paul Boag:
I’m feeling in a really jolly mood today.

Marcus Lillington:
Is it because the sun is shining?

Paul Boag:
Is it?

Marcus Lillington:
Is it? It is.

Paul Boag:
I don’t look out the window.

Marcus Lillington:
Yes, oh I haven’t opened the blinds yet.

Paul Boag:
No, I don’t want to do that. No, honestly it’s not shining here. It’s a bit dull and miserable. No, do you know I’m just reveling in being at home and doing work.

Marcus Lillington:
Right. Yes, instead of traveling around the world.

Paul Boag:
It’s wonderful. And last night I was lying in bed thinking, I’m really looking forward to work tomorrow, which is a good place to be I think.

Marcus Lillington:
It is, I’m normally quite good at Mondays, because Monday it’s like a new thing. Oh, new thing, Monday.

Paul Boag:
Starting again.

Marcus Lillington:
Yes, but then sort of by Tuesday it’s like meh.

Paul Boag:
Tomorrow I’m off presenting to a client – well a kind of internal organizational conference-y thing they’re doing. And that is always huge fun as well. I like that as well, because you meet lots of cool people and unlike a normal conference, you know that everyone is on the same page. Do you know what I mean? They’re all at the same point, they’re all faced with the same challenge and you can just go in there and kind of do your biz, which is really good and you get loads of information beforehand. So you can make sure your presentation is really relevant to the audience and it’s wonderful. So I’m off to do that tomorrow, an insurance company.

Marcus Lillington:
There you go.

Paul Boag:
We’ve not done any work with insurance companies, have we?

Marcus Lillington:
I don’t think so.

Paul Boag:
We’ve done a lot in the finance sector really, have we?

Marcus Lillington:
No.

Paul Boag:
Well you never know.

Marcus Lillington:
Maybe we’re a bit too jolly.

Paul Boag:
Too happy? No, we’re not most of the time. I think we’re very grown up, compared to a lot of web agencies anyway. I know we joke and mess around on this podcast, but we are old and decrepit.

Marcus Lillington:
Yes. And very sensible and tie wearing.

Paul Boag:
And we’ve – well – Chris is tie wearing and we’ve got the grey hair, that always goes a long way I think.

Marcus Lillington:
You’ve certainly got lots of that yes.

Paul Boag:
So here we go. So yes, what’s been going on in your world, Marcus? I don’t feel like I’ve spoken to you since last – I haven’t spoken to you since last week.

Marcus Lillington:
I’ve been doing lots of work, Paul. I’ve got – I’m – we are about to kick off a project where I’m having to do lots of interviews. So they’re kicking off tomorrow lots of – it’s the kind of thing which is – it’s kind of half an hour probably for each phone call, but they kind of disrupt your day and when you’re trying to finish off huge proposal documents in between them, it kind of does your head in.

Paul Boag:
Oh it drives me nuts that does.

Marcus Lillington:
I’ll live.

Paul Boag:
Stakeholder interviews are – they’re quite – yes, they’re just very disruptive. They’re really important, but very disruptive. Are these internal people or end-users, who are you talking to?

Marcus Lillington:
These are end-users over the phone …

Paul Boag:
Oh, that’s a bit more interesting.

Marcus Lillington:
… and I’ve got a – all day next Monday doing internal people.

Paul Boag:
And is that – that’s all over the phone?

Marcus Lillington:
No. The internal lot are all up at their offices.

Paul Boag:
Okay. That’s good.

Marcus Lillington:
Yes.

Paul Boag:
Because it’s really hard over the phone, because sometimes especially I mean even doing end-users interviews over the phone is not ideal, is it? Sometimes you’ve got no choice, but I always think you want to be in the room because sometimes people pull faces. Have you noticed that?

Marcus Lillington:
Yes.

Paul Boag:
When you ask a question they pull a face, and you think aha, now we’re getting somewhere.

Marcus Lillington:
I’ve done it so far – I’ve done it for so long now, though I know when I can even prompt people with certain questions.

Paul Boag:
Yes, I know. There is a definite art to it, isn’t it? It’s really interesting. How – at how different people respond in different ways and how you have to tease information out of it, you’re much better at it than I am. You’re good at that kind of stuff. I find it fascinating.

Marcus Lillington:
Very kind of you, Paul.

Paul Boag:
Well, there is not much you’re better at me than.

Marcus Lillington:
That’s true because you’re good at everything.

Paul Boag:
Because I’m good at everything.

Marcus Lillington:
This is what we discussed last time.

Paul Boag:
I mean obviously if I put the effort in, I would be much better at it than you.

Marcus Lillington:
That’s right. The only thing that I could think of that I might be better than you – only might be is playing the guitar.

Paul Boag:
Oh no, you’re definitely better than me at that. I can’t even clap in time.

Marcus Lillington:
That’s what I’ve been doing quite a lot of though lately, because I probably said this last week, but I’ve been doing a bit of recording with the band, because we might be – we’re trying to get into a festival on the Isle of Wight.

Paul Boag:
Oh yes, you mentioned that last week.

Marcus Lillington:
So I’ve been kind of in between writing lots of proposals and the like, I’ve been sort of mixing this and getting that together and sending tracks off to other people. So it’s all been a bit busy, busy.

Paul Boag:
But it’s good.

Marcus Lillington:
But that’s okay, because I’m going on holiday very soon.

Paul Boag:
Yes, when are you going on holiday?

Marcus Lillington:
Week on Friday.

Paul Boag:
Okay. So we’ve got one more podcast, so episode 17 which we’ve got scheduled in and then you’re going to be away for how long?

Marcus Lillington:
Nearly three weeks.

Paul Boag:
Right. I wonder whether we ought to just – perhaps just we take a long break until after Christmas.

Marcus Lillington:
Sounds good to me.

Paul Boag:
That is a very long break, mind. So that will be one, two, three, four, five, six, seven, eight. That’s like almost two months.

Marcus Lillington:
Yes.

Paul Boag:
That might be too long.

Marcus Lillington:
Maybe we shouldn’t do that, but obviously we won’t be able to do any while I’m away, and then we will come back maybe do a few and then we will have another break because of Christmas, but yes, whatever. I’m easy.

Paul Boag:
I need to think about that. We’ve definitely got to do a Christmas special.

Marcus Lillington:
Okay.

Paul Boag:
Perhaps we just do a Christmas special, but put a bit more effort into it, because our Christmas specials aren’t often very special are they, really?

Marcus Lillington:
No. They’re kind of the opposite of specials. They’re a Christmas average.

Paul Boag:
Well, they’re more of a Christmas can’t be arsed, aren’t they.

Marcus Lillington:
Yeah.

Paul Boag:
But we could …

Marcus Lillington:
We say the word Christmas.

Paul Boag:
Yes, we say …

Marcus Lillington:
And we have a list of top 10 presents you might buy. We’ve kind of already done that as part of this series anyway.

Paul Boag:
We’ve already done that. So I’m stuffed. So what I’m thinking is maybe we could get some different people on the show just to get to share little Christmassy stories or something, I don’t know.

Marcus Lillington:
We did that last year didn’t we? We had Andy Clarke and Sara Parmenter.

Paul Boag:
Yes, so we will come up with something special. And then, basically we’ll have a really long break, but with a nice Christmas special in the middle of it.

Marcus Lillington:
There you go.

Paul Boag:
It might even be a kind of, a couple of episodes or something, I don’t know, I need to think about it. I’m getting quite excited about that now, although I’m getting quite excited about Christmas. Is that a bit premature?

Marcus Lillington:
Little bit premature.

Paul Boag:
I will tell you why, because I went to Comic-Con over the weekend.

Marcus Lillington:
What’s that?

Paul Boag:
Oh for crying out loud. Comic-Con is one of these big kind of geeky comic book conventions where everybody dresses up.

Marcus Lillington:
Yes, right and I’m going to go to something like that.

Paul Boag:
I went to it is what I’m saying, over the weekend. You should know about these things.

Marcus Lillington:
Why?

Paul Boag:
Get hip with the kids.

Marcus Lillington:
That’s – kid’s aren’t into things like that.

Paul Boag:
Oh, they are.

Marcus Lillington:
Old men are into things like that.

Paul Boag:
They were all teenagers there.

Marcus Lillington:
Really?

Paul Boag:
Yes, Cath felt very old and out of place. It was huge fun and there is so many cool things to buy. It was very exciting, which is what got me excited about Christmas.

Marcus Lillington:
Yes, okay. Well, I like Christmas because it’s time off. But…

Paul Boag:
That’s true. I like Christmas because I always have a Christmas video game that I then play all over Christmas. I just sit there, drinking coke, eating crap food and playing video games. That’s my life.

Marcus Lillington:
If I can find a game I like, then I do the same. But, they’re few and far between games I like.

Paul Boag:
Well, I tried – that’s – at Comic-Con, I tried out Far Cry 4, which is coming out soon.

Marcus Lillington:
See that just sounds complicated.

Paul Boag:
It wasn’t. It was a first person shooter and it’s a lot of fun.

Marcus Lillington:
Well that sounds dull then…?

Paul Boag:
No, no it’s really good, really good. Although I learnt a valuable life lesson, don’t shoot an elephant in the arse with a cross bow. They don’t like it. There you go, so …

Marcus Lillington:
Okay.

Paul Boag:
That’s – I pass that …

Marcus Lillington:
I will bear that in mind.

Paul Boag:
I passed that word of wisdom on to my son afterwards. He was incredibly jealous, because you had to be over 18 to play all of these games you see. So he couldn’t play any of them, haha serves him right for being young. Shall we kick off the show?

Marcus Lillington:
Yes. I’ve looked at the show notes and I’m thinking not sure I’ve got an awful lot to add this week.

Paul Boag:
Probably not, but that’s okay, because we’re going to be talking about web typography. I think you will, because you care about design.

Marcus Lillington:
Oh, I do yes.

Paul Boag:
So I think you will be surprised. So this one has been inspired by Jason Pamental, who is a great speaker and writer on all things typographic. And he has written a book as well. Can’t remember what the book’s called, let’s find out.

Marcus Lillington:
Yes, he is really good. We met him earlier this year.

Paul Boag:
He is a nice guy as well. I like nice people.

Marcus Lillington:
But knows his stuff.

Paul Boag:
That’s probably the most inane…

Marcus Lillington:
I like nice people.

Paul Boag:
I like nice people, the most inane comment ever. So his book’s on responsive typography, which I didn’t even realize was a thing until Dan and Ed educated me when they did stuff on the Boagworld site. And now I’m really into it. But we’re going to broaden it out a bit further than just responsive typography. We are going to look at web typography as a whole. So he suggests – Jason suggested this as a topic. He made a whole lot of recommendations of points we might want to cover. I’ve obviously ignored a lot of those, mainly because I …

Marcus Lillington:
Because you’re better than everyone else.

Paul Boag:
No, no actually – precisely the opposite, because I didn’t entirely understand all the things he was suggesting.

Marcus Lillington:
Oh right, did he use long words?

Paul Boag:
And didn’t feel like I could talk intelligently on them. So instead I’ve kind of mixed his stuff with my stuff and created this hybrid monster. A Frankenstein of web typography.

Marcus Lillington:
I’m so excited.

Paul Boag:
So should we kick off for number one then?

### Fonts are not the limit of web typography [one]

So number one is that fonts are not the limit of web typography, because ever since there was a good – in the good old days, Marcus, when we were young, alright.

Marcus Lillington:
The internet didn’t exist.

Paul Boag:
We were younger then.

Marcus Lillington:
Yes, younger.

Paul Boag:
Well, when you didn’t – you couldn’t embed fonts, right. So there was this time, when you were basically stuck with the safe web fonts.

Marcus Lillington:
Yes, yes. You kind of knew where you were. There is that.

Paul Boag:
Yes, and actually I almost think in some ways that created some better typography than we see today. And the reason was is because you had to concentrate on the other elements of typography, other than the selection of font. And that meant you put a lot more attention into line height and spacing and kerning and all of those kinds of things, which are really important to creating nice typography and typography that has a real impact. But now when you can kind of just throw fonts at the problem. I think sometimes it – not always, but sometimes it can lead to lazy typography and typography is so important. I know you agree with that, because that’s what you have always wanted for the Headscape and Boagworld sites isn’t it, just nice clean typography.

Marcus Lillington:
Yes.

Paul Boag:
I thought you might expand on that point a bit.

Marcus Lillington:
Yes, Paul, that’s correct. Yes, well, when we first started working with John Hicks on the Headscape logo and kind of corporate ID for want of a better way of saying that, but he did some mood boards for us, didn’t he? He did loads, he did about …

Paul Boag:
Yes, he did.

Marcus Lillington:
… eight or nine, and one of them was really kind of black-and-white and gray serif type fonts that kind of thing and I just thought that’s, I love that, that’s my kind of style of design, but at the time it wasn’t right for us. We needed something that was a bit more …

Paul Boag:
Fun?

Marcus Lillington:
Yes.

Paul Boag:
Well, now we’re not fun.

Marcus Lillington:
Yeah we’re not fun anymore and we’re gray…

Paul Boag:
We’re fun and gray.

Marcus Lillington:
… a gray web site, yes.

Paul Boag:
So our web site, or not fun and gray so our web site has now become serious and gray and black and white.

Marcus Lillington:
But yes, and just when things are – spacing between headings and emphasis paragraphs are considered and things like that. Just to kind of get the right balance is I think – if you do it well, it’s the – one of my favorite visual types of design.

Paul Boag:
Absolutely. I think it’s – and that’s why it’s really funny, I’ve just started writing a series on Boagworld about different people in the Headscape team I thought it would be a nice idea to maybe kind of talk a little bit more about the team that we have. And the first one I wrote was on Ed, and that was one of the things I said with him is that he is so good at making typography work hard. I’ll put a link in the show notes to the article I wrote and that whole thing about getting balance of typography and getting it all to work together and he – very rarely, he will – he won’t, with the choice of fonts, it’s very minimalistic and sometimes he does just stick with web safe fonts, he doesn’t always feel the need to kind of go out and get another font and add it into the mix, because he can do such incredible things with just the most basic of fonts, because he kind of – takes typography as a whole rather than just think of it in terms of fonts.

I’ll tell you something else he is really good at, but that is point number two. So let’s move on to point number two.

Less is more

Yes, the other thing that Ed is just brilliant at is this idea of less is more. Do you know what I mean? I think when it comes to typography. Sometimes you can completely ruin a design by using too many fonts or too many different weights or just having too much typography all going on at the same time. And Ed is brilliant at kind of reducing stuff to its bare minimum, reducing it enough to be good, but not so much is it becomes stark, if that makes sense.

Marcus Lillington:
Yes, totally. Yes, it’s a definite skill because obviously I put together a lot of documents and when we were changing the style of the website, we changed the style of our documentation to match. And I thought well, yes I can easily do that. I can easily translate that over and I mean it was sort of okay, but I don’t have that eye that he’s got…

Paul Boag:
No.

Marcus Lillington:
…so it’s interesting.

Paul Boag:
I don’t with typography either. As a designer, I mean, I don’t think I was ever an amazing designer. I wasn’t kind of Ed’s standard of designer, I was good. I could do the stuff, but I would often have to rely on other things to make my design work, color or imagery or whatever else. And I think it takes a particular skill level to be able to just use design very, very – not design, sorry typography really, really subtly to use it with a light hand. I was always a very heavy-handed designer. I’m a very heavy-handed person. I think that’s probably where it comes from. And I really admire people that can have such a light touch, on design or typography. Another example of that is, another person that’s really good at that, is Cameron Moll, link to him in the show notes, who has got this very subtle, light hand with design. I mean, he does the most incredible things with typography. I mean, he creates entire pictures from typographic elements.

Marcus Lillington:
Yes, I have seen those.

Paul Boag:
So he does real beautiful things with typography. But when it comes to the web design, he doesn’t do so much of that anymore, but when it comes to the web design that he always produced, it was always this less is more attitude, this kind of laws of simplicity kind of thing, which again is a topic I’ve written about. I will put a link in the show notes to that as well. So yes, when it comes to typography, don’t get carried away. Don’t start using too many fonts or too many different weights. Pare it back all the time, pare it back to its minimum and see if you can get it to work. So there you go, that’s the second point.

Let’s move on to the number third. Number third – what the hell was that?

Make use of extended families

Yes number three, here we go. After saying less is more, when it comes to selecting your fonts, it is worth looking for a font that has an extended family to it, because – so for example, Ed has picked for the Boagworld and Headscape site, a lovely font called Merriweather. And Merriweather is great, because, for a start, it’s got lots of different weights to it that you can use, if you want to, it’s got italic and black and bold and all those kinds of things, which gives you more flexibility without necessarily adding more families into the mix if that makes sense. But also Merriweather has got a Sans Serif version that we could draw upon if we wanted to, not that we’ve ever felt the need because Ed being the genius that he is and that less is more thing means that we don’t feel the need to, but you’ve got the option there. There is a kind of a set that you can work with. And that I find is so useful to have those different weights that you can draw upon as you need them. I don’t think there’s much more to say on that one really.

Be careful how you pair your font choices

Talking of pairing fonts, this is a real art. If you do use more than one font, be careful what you pair it with, because you can take two really nice fonts put them together and it looks awful …

Marcus Lillington:
Yes.

Paul Boag:
… which is a challenging one. I’ve noticed actually I was – I had to go to Google fonts, because obviously I don’t design a huge amount anymore and I don’t claim to be a designer. So a lot of these tricks and tips I’m talking about are either stolen from Jason or learnt from other designers. But I’ve noticed that if you go to Google fonts now, and you look at that – you go through to a font, it actually suggests sometimes fonts that you could pair it with, which I think is really nice. And there are other – I believe there are a whole variety of different services out there that you can basically say, well I’ve got this font, what font goes well with it? Some people can do it instinctively, but I’m not very good at it. So it’s nice when there are tools out there that can help you. I will put a link in the show notes to a tool that maybe can help you do that. It’s almost like pairing a wine with your dinner.

Marcus Lillington:
I can do that.

Paul Boag:
Can you?

Marcus Lillington:
Yes.

Paul Boag:
See I can’t do that either. I just don’t have – I am just not sophisticated enough basically.

Marcus Lillington:
Yes, no problem with wine. I think with choosing fonts, I think fonts should, and this is relating very much to kind of – what’s the word I’m looking for, functional web sites, functional documents that kind of thing. I like the idea of having a font for all of your copy and having a different font for captions and stuff like that. So rather than maybe the way a poster designer might view pairing different fonts for – to get across a message here and a message there, which I have not a clue about. I think this idea of all my captions and all my – all the copy within tables is going to be – off the top of my head, Helvetica, something really plain, whereas all of the kind of body copy, if you like, will be something a little bit more interesting maybe. So basically saying for a kind of rules-based thing. This is when we use this font and that’s when you use a different font, rather than a kind of more artistic approach like a poster designer would use.

Paul Boag:
Yes, because there are very different ways. You’re right there. You’ve hit on something which is quite important which is there are very different ways of using typography. There is the kind of using typography as a communication element. In other words, for a document or a web site and stuff like that. And then there is using typography as a design element. And when you’re using it as a design element, I think the rules for pairing those fonts together is very different. It’s more of a – an artistic decision.

Marcus Lillington:
Yes, I have no clue on that one. They always look rubbish, because occasionally I’ll design a ticket or something like that for a gig. And I’ve just – they look like they’ve been done by an amateur, because they have been.

Paul Boag:
Yes. And it’s fascinating. But when you’re trying to pair fonts for more of a legibility, readability kind of thing, then you face different kind of challenges, it’s a different process. But it’s definitely something, if you’re a designer, you should be looking carefully at pairing fonts together and how to do that. And if you’re not a designer, I hope what all of this discussion leaves you with because obviously you’re not going to be massively interested in all of this stuff. But it should leave you with be very careful before you start telling a designer what to do.

Marcus Lillington:
Yes. And the designer isn’t just coloring things in.

Paul Boag:
Yes, because there is a lot of complexity in something like web typography that is really easy for you to go, oh yes, well I want the site to look more fun, so can I have Comic Sans please. Okay, that’s a really extreme stupid example, but it’s very easy to start saying oh, can we do this with the font and that with the font and you’re going to ruin the whole balance of everything, because everything balances and fits together, including the choice of fonts and what’s paired with what.

Talking about legibility and readability, that brings us on to number five.

Legibility and readability must come first

So I think that this is a really important point that legibility and readability must come first certainly with web design, I accept that there are lots of situations where legibility and readability isn’t as important, but I think when it comes to working with web typography, it’s got to be at the heart of everything you do. If you can’t – you can have a lovely font that is beautiful, but if it doesn’t work well when it’s reduced to a small size, then you’ve got a problem, because the trouble is you don’t know what someone is going to do with the – you can’t fix type sizes in the same way as you would with print. So it’s perfectly possible someone might be looking at it on a mobile device, a really high screen resolution that makes your font look much smaller and becomes much more difficult to read, you’ve got to worry about blind people like Marcus, there is – and also you’ve got to consider screens that aren’t as high resolution where your fonts start to break up and the fact that windows is shitter, anti-aliasing text and all of these kinds of different things that need to be considered about the legibility and readability of your font choices. So …

Marcus Lillington:
Yes, I think that’s a really good point that I think we’re guilty of or our designers are guilty of. They have lovely shiny Mac screens and they design on them and often – I mean, I use a Samsung separate monitor and I will often see initial versions of designs and something that is clear on the big Apple screen, doesn’t come across clearly on the Samsung one. So testing is not just about browsers, it’s also about screens and how legible stuff is on those screens.

Paul Boag:
I always find that the fonts that are the most problematic are actually the most attractive fonts as well. They are the fonts that are very thin, have got these thin lines to them that looks beautiful on a good high resolution display, but just kind of breakup and look horrible on a – not a good display. And unfortunately we can’t go and give everybody the displays we want them to have, which is a bit rubbish. I think everybody should be given a nice Mac – actually, everybody should have a new iMac with the gorgeous 5K retina displays.

Marcus Lillington:
They’re not that much money actually.

Paul Boag:
So – we’re going to – so you’re offering to buy everybody in the world one of these Macs?

Marcus Lillington:
No, I’m just trying to make the case for me to have one.

Paul Boag:
Oh, wouldn’t it be lovely. Anyway, so that’s legibility and readability. Really make sure that’s at the top of your list. It should have been number one in our list, but it was number five instead.

So let’s move on to number six.

Always watch site performance

So number six is a boring, but important one. Boring, if you’re a designer, important if you are a user, which is always watch your sites performance. Boy, fonts can become huge. Can’t they? Very, very quickly. If you start adding loads of fonts on to your Web site, it is just going to absolutely hammer the performance of your web site. And that’s another thing I like about the Google free fonts is that as you add things to your font – the fonts that you want to deliver, it tells you how much they’re going up in size and you get this like red warning light if you go up too high.

Marcus Lillington:
I didn’t know. I haven’t notice that.

Paul Boag:
It’s really very good, actually, because of course you want to – you’re not just adding one font. Even if you’re just using Merriweather like we are on our site, that isn’t just one font, because each of the weights are individual fonts. So all of it begins to add up very, very quickly and then you add a second font in and the third font, and you’re doing this and that and the other, and before you know it, it becomes massive. So really be very selective as you add your fonts. If you’re using something like a Google fonts or whatever, then make sure you only put – select the weights that you need and only the character sets that you need. Don’t start putting in the Greek character set, if you’re not going to be delivering it – to that audience. And just be really, really selective and careful, because it’s important.

And it’s not just – that actually it’s not just about what fonts you select, it’s also about how you’re delivering those fonts as well. So, what service are you using to deliver them? Are you using Google fonts or are you using Typekit or FontDeck or – because that matters as well, because obviously it’s got a – the time it takes to pull back that font from wherever it is that you’re using it. So be very careful over that as well. One of the reasons why I like Google fonts quite a lot, other than the fact that they are free is because so many sites use Google fonts. So that means if someone has visited a web site previously that has got your font in, in other words, he is using the same font as you, then that’s – may well be cached for the user, which means it will download faster. If you’re using a less well-known service, then that might not be the case. You might not get the speed performance from that as well.

Also, there is just the – there is even the technology that is used to embed the font in your – on your site, things like FontDeck and Typekit, they have to put various protections to stop people getting at the font, because these are fonts that are owned. While something like font – Google Fonts, they’re giving you direct access to the font, because it’s an open source one that they’re giving away. And so that again has benefits in terms of performance that need to be considered. And I’m not saying don’t use these other services, I’m just saying think carefully about how you’re using them, because it will have an impact.

The other thing you need to think about is how that font is loaded into the page as well. Are you going to stop the whole page rendering, because that font isn’t in place or are you going to show an alternative font, that’s a default font that’s already on the system before you then load in your own font. And I actually – I’m a great fan of doing that. Not forcing the user to wait, but use an alternative font, because with a little bit of kind of tender loving care, you can actually not have this huge jump, jarring experience when it goes from the default font across to your kind of normal font, because you have adjusted the kerning, etcetera so that things don’t suddenly jump from one line to another. So with a bit of attention, you can actually load the page very fast and then bring in your additional font afterwards. So all of that can kind of help with the performance in terms of how you use your fonts. Talking of using default fonts, and not just using web based fonts, but actually having another font first.

That brings us on to the subject of font stacks, which is our number seven.

Consider the whole font stack

So I think sometimes people can get hung up on this idea of oh, I’m going to use this fancy web font. And then they kind of forget, oh well if I am loading in this font, I don’t need to have a font stack. But there are all kinds of reasons why that font might not be delivered for whatever reason, either the …

Marcus Lillington:
Yes, that was stuff – something that all of this kind of thing was, if I remember correctly was what Jason Pamental was talking about on his talk. Because I thought – oh, I’d never thought of that and actually went back and talked to Dan and Ed and Chris about it, this idea of you should be falling back onto font stacks and you should also be matching, them like you were saying, a bit of love and attention. If you match up the closest, non-Google or non-FontDeck font or whatever, then you can get a kind of in-between stage that doesn’t look a million miles off and all this kind of thing.

Paul Boag:
That’s where I heard it. I knew I heard it at some presentation somewhere. It was Jason was it?

Marcus Lillington:
It was.

Paul Boag:
Now were was that?

Marcus Lillington:
It was at – it was in London.

Paul Boag:
That doesn’t narrow it down very much.

Marcus Lillington:
At FOWD.

Paul Boag:
FOWD was it?

Marcus Lillington:
Yes.

Paul Boag:
I’ll see if I can – I’ll have a look and see if I can find that presentation, because it was an absolutely excellent one, wasn’t it? And it was really quite impressive how he took a really nice web-based serif font. And then he said well look this is what the page would look like if you take that serif font and just fall back onto Google and it was – everybody went ugh, that’s horrible! Because – and you get this flash of Georgia coming in, I said Google didn’t I? I meant Georgia. So you get this flash of Georgia for a minute and then the font loads in and you get this oh, oh really uncomfortable jarring jump. But then he went on to just say well if we mess with the kerning and if we do this and we do that to the Georgia-based version of it, and then suddenly it just didn’t look too bad at all. It looked quite a good transition, didn’t it?

Marcus Lillington:
Yes, it was just something I’d never thought of and I always like that when I go to a conference and someone says stuff that you just think, oh yes, bloody obvious really.

Paul Boag:
Yes and he really encouraged us to pay attention to the whole font stack and it is really important, because sometimes there is all kinds of reasons why that font might not get loaded in. And you still want your web site to look good even if your first preference of font is not there. So absolutely always have a fallback to a kind of safer font somewhere down the line as well. So that’s – yes, there is not much else to say on number seven.

So let’s move on to number eight.

Make your typography proportional

This is where you’re really getting to Jason’s territory, which is making sure your typography is proportional or responsive. And this is the thing that I love the most about the Boagworld design that Ed and Dan did, is as you scale that, the typography adapts to the available space. So you don’t end up with this thing, which – it sounds so obvious, but so many people don’t do it. Okay, you scale your web site down to mobile size, for example, and you’ve only got like two words per line, because – on the headlines, because they’re made too big and they haven’t been set to resize accordingly. So it’s really important to make your typography proportional as well as your layout and that they both adapt together. We actually talked about this, didn’t we on when we did the advice for responsive web design?

Marcus Lillington:
Yes.

Paul Boag:
And I actually talked about that there is CSS properties that allow you to do this really easily and I put a link in the show notes, and I’ll put a link in the show notes again that actually allow you to make your typography proportional to the view port that’s available. And that allows you to kind of get round all of these problems. So you don’t need to create hundreds of breakpoints for – to adjust the typography at different stages, it is quite a simple process to get that – your typography to scale down really nicely as the browser resizes.

Marcus Lillington:
It does make designing responsively or those point – choosing where things break. It makes it more difficult, because it’s not just a case of line length anymore. It’s like oh, that line length is too long, so we should break it there, because actually if you’re changing that then it’s going to happen later or earlier, my brain can’t work that out. But yes, it just makes it more complicated.

Paul Boag:
But then that – responsive design is not as easy as everybody makes it out to be. There are complexities into – in it that you do need to worry about and consider and typography is one of them, I’m afraid to say, just the way it is.

Okay. Number nine

Get creative with typography, be inspired by print

So far we’ve kind of concentrated very much on the practicalities. But I just wanted to put one in that I think is a really important one, which is to get creative with your typography. And I think print design is a great place to look with this. Print design does some beautiful things with typography of typography overlapping one another or coming in at angles or being rotated or doing all these really fancy things and they do all these gorgeous stuff that for such a long time was beyond us as web designers and I think we have kind of, you fall into patterns of behaviors when you have a constraint for long enough, that even if that constraint is taken away, you kind of carry on in the old way of doing things. And I think this is a great example of that that we’ve got CSS transform now. We can rotate typography. We can even 3-D transform photography do all – photography? Typography! You can do all kinds of really clever things now, but we’re stuck in these very kind of rigid constraints that are no longer there. And so go and have a look at great typographic design in print. And if you go and do that, you’ll be absolutely inspired because there is some really wonderful stuff and I would love to see some more creative uses of typography and web sites than we’ve got at the moment. So yes, be inspired, get out there and do some really cool stuff.

Okay, let’s wrap up then with number 10. I’ve inspired you with some creativity, but I do want to leave you with just one final little piece of practical advice.

Consider your typographic hierarchy

Which of course Marcus did ruin earlier, because you talked about this. You talked about the need for typographic hierarchy.

Marcus Lillington:
I mentioned it. That’s all.

Paul Boag:
In passing.

Marcus Lillington:
Yes .

Paul Boag:
But it’s really important to get that kind of different weighting. I think one of the most newbie mistakes when it comes to typography is not having a bigger differentiation between different levels of typography. So your headings need to be considerably better – sorry, different weighted or different sizes between each version, because it’s that, that hierarchy that adds a real weight and effectiveness to your typography design. And tells the user what’s important and what’s less important. And that’s not just about weight and size, it’s about spacing and lots of other things, but create that hierarchy, do a bit of a reading about it. So there is some great stuff written about typographic hierarchy and it will really bring your designs alive and make them so much more. So that’s really all I wanted to say about typography. I know for some people that listen to this show who are not designers. You know, that might not have been the best show for you, but I hope it’s shown you how complex typography is. And how incredible it can be, it can be really, really beautiful and it can make such a difference to a design. And typography is easy to dismiss. But it is fundamental to the web because the truth is that the web is still primarily a typographic medium. And so we kind of need to give it the attention and love it deserves. So that’s all I want to say on that. Marcus, do you have a joke for us?

Marcus Lillington:
I do. This I think yes this was Leigh. So let’s all blame Leigh, who hasn’t been on the show for a while.

Paul Boag:
Yes, we need to get him back in.

Marcus Lillington:
But anyway, here we go. Why couldn’t the sesame seed stop?

Paul Boag:
Why couldn’t the sesame seed stop? I don’t know, go on.

Marcus Lillington:
Because he was on a roll.

Paul Boag:
Okay, Leigh. Leigh, is not coming on the show again. That’s like five-year-old humour.

Marcus Lillington:
It is five-year-old humour. And that normally – I mean, it’s even I was thinking oh no, but it’s the only one I had.

Paul Boag:
It’s the only one you had. So you need some more.

Marcus Lillington:
Yes, send me more jokes people.

Marcus Lillington:
Yes. Alright, so that’s good stuff. You can send Marcus jokes at marcus@boagworld.com.

Paul Boag:
Suggestions for this season, actually I don’t need any, because there is only one more to go. Wow! One more of this season and then finally we can get away from the top 10 things.

Marcus Lillington:
Yes, some of them I think have been good. Some of them have been sort of a bit like stretching it out a bit.

Paul Boag:
What, like this one?

Marcus Lillington:
Like this one.

Paul Boag:
Next season mind, we’re going to do something really cool. We are going to do masterclasses where we’re going to get in different experts to push us in specific areas, because let’s be honest Marcus, we’re pretty generalists, aren’t we?

Marcus Lillington:
Yes.

Paul Boag:
So what I thought we would get, we’d get in some real experts in different areas to kind of – to teach us a thing or two.

Marcus Lillington:
Sounds good.

Paul Boag:
Which I think would be a really great season. But we’ve got one more of this season to go and I will make sure it’s a good one and meets Marcus’ approval. That will be next week. So we will talk to you then.

Boagworks

Boagworld