Typography on the web with Mark Boulton

This week on the Boagworld Web Show we talk to Mark Boulton about the do’s and dont’s of web typography.

Skip to the interview or this week’s links.

This week’s show is sponsored by the teams at Opera, Media Temple and a lovely chocolate bar I have just finished eating.

Paul: Hello and welcome to Boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul and I am joined by Marcus. Hello Marcus.

Marcus: Hello Paul. I am very happy today.

Paul: Why?

Marcus: Because it’s Friday.

Paul: Is that it?

Marcus: But it’s not Friday.

Paul: But it’s not Friday… oh I see, it’s Thursday and it’s the Bank Holiday weekend.

Marcus: Yes, four days off, whooo!

Paul: See I am very unhappy.

Marcus: Aww.

Paul: Do you want to know why? Two reasons, one – taken on too much work, so don’t have time for a Bank Holiday weekend. Two – spending Bank Holiday weekend at my In-laws.

Marcus: Are we safe to talk about this? They are never going to listen to this.

Paul: They are never going to listen to this. And anyway, it’s not my in-laws. I actually really quite like my in-laws, they are nice. What I don’t like… oh I need to be careful, I just realised something – my sister-in-law transcribes this podcast. Shit! Meg, you are not to tell Pat and Norman about this situation. I need to get you to sign an NDA agreement.

[Laughs]

Marcus: Yes. It’s business.

Paul: Damn. Damn, damn, damn.

Marcus: So what don’t you like about going to the in-laws?

Paul: No, it’s lovely and all wonderful!

[Laughs]

Marcus: I think I know what you are going to say. It’s the same at Christmas. I refused fifteen, twenty years ago basically to go out visiting on my long holiday. I want to stay at home.

Paul: That’s a big part of it, and the other thing to be fair is it’s their fiftieth Wedding Anniversary. And so what my real problem is, is they are going to have a big party. And they’ll just be loads of people there I don’t know. And you know I don’t like people at the best of times and they are even ones I know.

Marcus: Free drink and food, Paul.

Paul: Yes, that’s true.

Marcus: That kind of makes up for most things.

Paul: It does but I am going to have to help decorate and actually it won’t be… oh no I don’t know whether we are paying for the food or not, but we are contributing. Can you imagine being married half a century? That’s pretty impressive.

Marcus: Well I’ve been married a quarter of a century.

Paul: That’s not bad.

Marcus: Half that, basically same again.

Paul: Wow. Scary stuff.

Marcus: Yes, that’s a long time. My Mum and Dad didn’t quite make it. Forty-nine years when my Dad died.

Paul: Aww.

Marcus: Yes, never mind.

Paul: That’s very inconsiderate of your Dad.

Marcus: My Mum’s eighty next year and she keeps making hints like… ‘It’s down to you this year’. And I am like, ‘Erm, I don’t know… what?’

Paul: Let’s face it though, you are the little boy aren’t you? I bet your sisters organise it all and you won’t do anything.

Marcus: Yes.

Paul: Yes, exactly.

Marcus: And I’ll swan in at the last moment and my Mum will talk to me the whole time.

Paul: Yes, because you are the golden little boy.

[Laughs]

I bet that’s true as well, isn’t it?

Marcus: Yes.

Paul: Damn.

Marcus: I don’t feel like much of a little boy anymore but yes, that’s how it was. I have two much bigger sisters.

Paul: What are you saying they are fat?

Marcus: Older sisters. They were bigger when I was little. Moving on…

Paul: I had my Birthday yesterday.

Marcus: You did! I wished you Happy Birthday in the usual manner.

Paul: Yes…

Marcus: Reminder on Facebook? Oh it’s Paul’s Birthday, better say Happy Birthday.

Paul: Yes, or Skype. Skype insists on telling you about everybody’s Birthday whether you want to know or not. There is no way of turning it off. And so yes, everybody gave me the normal cheap-arse Birthday greeting online. It was the worst Birthday I ever had. I had to work, because I was so busy.

Marcus: I bet it wasn’t as bad as my Birthday.

Paul: Why what’s your Birthday?

Marcus: My Birthday this year was on a Saturday. I was like ‘Oh a Birthday on a Saturday!’ I basically dragged myself out of my sick bed to go and see my friends for about an hour and then went back to bed again.

Paul: Aww, do you know that at the age of forty-three, that’s only the second time in my life, I’ve ever worked on my Birthday.

Marcus: Well that will teach you to go off and run your own business.

Paul: It’s going really well mind, I’ve got some really cool clients.

Marcus: Excellent.

Paul: I am working with charities. I like working with charities.

Marcus: So am I.

Paul: Yes! In fact we’re working on the same charity in one case, in fact both cases.

Marcus: Yes. I’m working with other charities – Headscape’s done a few.

Paul: Oh have you got your own? See I share my charities with you. Both my charities I’ve shared with Headscape, why aren’t you sharing them back?

Marcus: Existing clients.

Paul: Oh right.

Marcus: RAF Benevolent Fund is one we are working with at the moment and we’re doing a refresh of the design for the Royal Hospital. Things like that, so existing stuff. There is one potential that I am waiting to hear on.

Paul: I can’t wait, because I want to talk about that one.

Marcus: No, another one.

Paul: Another one?

Marcus: Another, other one.

Paul: Oh I thought you meant the one we’re waiting for a signature on the contract.

But I’ve been working with start-up’s too.

Marcus: Yes, not that scares me.

Paul: See no, that’s cool and trendy.

Marcus: I know it’s cool and trendy, but you know what Chris and I are like, ‘Oh no, I’m not sure about that’.

Paul: Well we get money up front. That’s the answer, is get money up front. No these guys are good, really lovely. It’s called Fleep. F-l-e-e-p, and because they are a trendy start-up they have the .io domain name.

Marcus: Fleep.io.

Paul: They are like…

Marcus: They are something to do with fleas?

Paul: No it’s nothing to do with fleas. It’s a bit like Slack actually, but cooler. I like it.

Marcus: Slack is really cool so…

Paul: I know, but if you think about it, this is going to turn into an advert for Fleep, which really they are not paying me for, so I should shut up really. But what I like about it is… I mean, you guys just use Slack for goofing off, basically.

Marcus: No, no. We have client channels as well.

Paul: Oh do you?

Marcus: We do.

Paul: That’s new.

Marcus: No it isn’t Paul. You obviously didn’t join any of them.

Paul: Now I am just embarrassed. Well with Fleep you can do a couple of things. You can take one of the messages and turn it into a task or you can pin it for future reference. You don’t have to try and remember who said that and when.

Marcus: That sounds interesting, you can turn it into a task. So what do you mean, you can manage your tasks via Fleep or does it get posted into Basecamp for example?

Paul: No it’s got the potential, it’s not quite there yet to kind of bring together Slack and Basecamp into one thing but there’s another aspect that I like about it which is that you can get clients using it, without them ever opening it. So you know in Slack if you want to write to a few people, you add people to a channel, in Fleep you do the same but you can also include email addresses and they’ll then receive everything via email. So they will see it as an email and they can reply via email and that kind of stuff and then that gets posted into Fleep. So it’s actually very cool, I really like it.

Marcus: Sorry this is important, a text has just come in and my daughter has told me…

Paul: …her waters have broken?

Marcus: Golly, no, I hope not as she’s only six months gone. No actually they’ve got the house they were going for.

Paul: Wohoo!

Marcus: That is brilliant news.

Paul: That is really good news.

Marcus: Yes.

Paul: Hey, we haven’t actually started the podcast yet.

Marcus: No I was going to say something as well, but I got distracted by my daughter. Oh I know what it was, the idea of bearing in mind what is discussed in the general channel of Slack in Headscape, the idea that clients somehow being connected to that, even in a way that you can lock it down, horrifies me.

Paul: Yes, basically, the fact that the content in Slack even touches the internet in anyway, worries me. Hackers hack in and take your credit card information, they can have my credit card information, that’s alright. They just can’t have what I write about things in Slack. That’s it.

Marcus: Yes, honestly I am not even going to go there.

Paul: No. I bet Dan’s got worse has he?

Marcus: Dan? Err, yes. Dan’s a constant isn’t he? A lovely constant.

Paul: Sorry, none of this is interest, I was about to go off on ‘Oh I hear you got to work on your first project with Dan?’ and ‘How did it go?’ and stuff. But really nobody cares.

Marcus: Me? I’ve worked on loads of projects with Dan.

Paul: Chris said it was your first project working with Dan.

Marcus: Dan and I worked on the project with Nestle where we went to Switzerland together about two years ago.

Paul: Yes, you are aiming for that again as well, according to Chris. He’s dished all the dirt on you when we went up to London yesterday.

Marcus: Yes that’s on the cards, and Lee too.

Paul: Anyway, can we talk about Opera?

Marcus: Yes, yes you can!

Paul: Our sponsor.

Marcus: Yes because I downloaded Opera Coast.

Paul: Yes and you agreed with me about the logo!

Marcus: Logo is hideous, looks like something from a fashion store. But I like it as a browser and I now use it. Unfortunately you can’t set anything other than Safari as default browser on your IOS.

Paul: I know! I know, and it drives me nuts! If you choose to change to another browser, every now and again you get vomited back into Safari.

Marcus: If anyone sends you a link and you click on it, it opens in Safari.

Paul: I know! And it’s wrong. Now back in the day, the European Commission ruled against that with Microsoft, didn’t they, with Internet Explorer.

Marcus: They did. But then Apple don’t care.

Paul: Apple just own the European Commission.

Marcus: Apple own everyone.

Paul: Yes. Anyway, talking of Opera… in fact I don’t really care about this week’s sponsor slot. Something about Opera being available on Android.

Marcus: You know what? I’ve had this conversation with various people who are either not happy with their iPhone or have moved to an Android device, one of these new fancier ones and just say it’s so much better.

Paul: Well they’ve just got confused.

Marcus: Well I haven’t tried one, so I just go ‘Oh, OK’.

Paul: Well neither have I. I haven’t tried one, but I am just going to be bigoted.

Marcus: Well you know, it’s like these are people that aren’t stupid.

[Laughs]

Paul: I don’t know where to go with that. Anyway, let’s get this over with. Opera on Android, who cares. On the cusp of releasing Opera 29 for Android. Don’t care. Based on Chromium so highly compatible and compliant. Now you see, now I care a bit more. Because this is the trouble isn’t it, with any browser. I believe, but I might be wrong, that any browser in IOS has to be built on Safari. Basically it’s just kind of putting a different top over Safari. So based on Chromium, see yes that’s now annoying. See they got something good there.

Marcus: And I bet you can set your default browser.

Paul: I bet you can. Bastards with their cool operating system that is flexible and nice. Damn them. Right lets what else they’ve got. If android ends up having a load of stuff that’s better than IOS then I am dropping Opera as a sponsor.

[Laughs]

Text-wrap mode. Can be turned on in settings so that no matter how much you zoom in on the site, the text you are reading wraps so you don’t have to scroll horizontally to realign. Oh see, that sounds cool as well. Don’t have that either. But I don’t know, I reckon that will be fiddly. I am going to decide that I don’t need that as a feature even though it sounds quite good.

Marcus: Paul, I’ve decided. You have to have both!

Paul: What? Have a dual boot phone?

Marcus: No, just two phones. So you can play with one, one day and then the other one the next day.

Paul: Oh that sounds good. Now I am even more enthusiastic.

Marcus: And it gives you the excuse to buy something, the new latest Sony or LG or whatever, Samsung…

Paul: I need ALL the phones.

Marcus: All the phones.

Paul: Then I can be running Opera 29 which has an off-road mode. I mean what does that mean?

Marcus: I’m err… that annoys me.

Paul: Right let me read. Off-road mode replaced by Turbo mode. Oh I see, so they had something before called Off-road mode, and they moved to the cool Turbo mode. Oh we already had that on IOS, which includes a new compression mechanism which preserves full web experiences making your site faster on slow networks.

Marcus: Have you noticed I am awake this week?

Paul: You are which is good. But they have a very nice feature where you can tap the ‘O’ menu and you can see how much data you have saved which is very satisfying when you are abroad and the data costs a fortune. So I like that.

What else have they got? Oh in Opera 29 Beta you can synchronise tabs with the Opera desktop. Oh we have already got that in IOS. In Opera 29 Beta you can swipe the speed dial left to see discovery features, created content in a range of languages in various selected categories such as Art, Business, News, Games and Sport. I don’t think they’ve got that on IOS have they?

Marcus: Don’t know, wasn’t listening.

Paul: Ok so we’ve done a good job on the Sponsor this week.

Marcus: I was reading what my daughter was saying about the house.

Paul: Thank you Opera for sponsoring the show, despite our rudeness.

Marcus: You were more rude than me.

Paul: Well no, I was just saying I prefer Opera on IOS than I do on Android. It’s all Opera, what more do they want?

Marcus: Well I am sure you agreed to buy an Android phone as well.

Paul: Yes that’s true. Well no, because I have to pay for it myself now. It’s not like Headscape pays for it for me.

Marcus: Well I don’t know – they are a lot cheaper now, aren’t they? I don’t know, I haven’t got a clue.

Paul: You’re such an Apple fan-boy.

Marcus: I am surrounded by Apple gear currently…

Paul: Yes, so am I. Right anyway, let’s move onto the interview. Because that’s really all people care about on this show.

Marcus: Who’s on this week Paul, I really can’t remember.

Paul: Mark Boulton.

Marcus: Oh he’s good.

Paul: He’s awesome. We like him.

Marcus: Yes.

Paul: I had one of the best grumpy old men, drunken conversations I’ve ever had with anyone with Mark Boulton which is always good. So Mark has spent years running Mark Boulton Design and he’s worked with clients such as Al Jezeera, Cern and Monotype and then Monotype went and bought his company.

Marcus: Yes.

Paul: Partly because they are all typographic geniuses as is Mark. So he’s now the Design Director at Monotype. So we decided to talk to him about photography. No we didn’t. We talked to him unsurprisingly about typography.

Marcus: Yes, and also lots of philosophical stuff if I remember correctly.

Paul: That tends to be the way things go with Mark. I quite like that about him.

Marcus: Old men in general sitting around talking. That’s what happens.

Paul: He’s a very cool guy, and here’s our rambling interview with him.

Interview with Mark Boulton

Mark Boulton
Mark Boulton shares his thoughts on the state of web typography.

Paul: Thank you so much for coming on the show, Mark. It’s great to have you here. Whenever I get to speak to you I just go back to drunken Conferences in my mind, of us sitting around and putting the worlds to rights.

Mark: Ranting and raving about this, that and the other.

Marcus: Last time I saw you Mark, was in a really swanky pub in London somewhere.

Mark: Yes, that was for ‘Future of Web Design’. Again after one or two drinks. There seems to be a pattern here. I’m not drinking right now, I hasten to add.

Marcus: I am drinking tea.

Paul: Well I presumed I was meant to. I am sitting here drinking cider. Is that wrong?

Mark: It’s never wrong Paul.

Marcus: Cider is quite often wrong, let’s be honest.

Paul: Oh that’s true. So yes, Mark it’s a pleasure to have you on the show. We’re going to be talking a bit about typography because that is what you’ve become known for. For better or worse. But you come from a very traditional graphic design background, don’t you really?

Mark: Well yes, if you mean by that, that’s what I went to school to do. Design School, that’s what I learnt to do.

Paul: Yes, you actually trained, like myself as a graphic designer.

Mark: There aren’t many of us around. Well no, that’s not true, but maybe in the contemporary web-world, there aren’t that many. Because I think a lot of us found it just a horrible place to begin with. So we went off and made pretty posters which is a lot more interesting at the time rather than banging your head against IE for however long. But I didn’t work in print for very long.

Paul: Oh did you not?

Mark: No, not really. I worked at an Ad Agency for a while, I worked in branding and a print place for a little while and then I’ve pretty much been working on the web since 1998. So I went from being very traditional schooling and then a bit of an abrupt welcome to the real world in advertising and marketing design, and branding. And then just straight into web design. I was the young guy in the studio and they had projects where they proposed a website and I was the person who they said ‘Oh you know all this new-fangled stuff, you go and do that’. That was a while ago, but yes traditionally I mean my University training was really quite traditional. I trained in typography, book design for a couple of years. That’s what my degree is in.

Paul: Now that’s really interesting, because that is so reminiscent of myself. I did a graphic design degree then went pretty much straight into the web. No, I went first of all into Multimedia, CD-Roms and that kind of thing.

Mark: Macromedia Director?

Paul: Yes! And then of course exactly the same situation. The web came along, none of the grown-ups wanted to touch it because it was boring and you couldn’t do very much and so it got given to the most junior person, which was me.

But what I’m interested in is how you felt. Because going from this huge freedom typographically of book design and advertising and then suddenly it was all taken away from you when you started to do web stuff?

Mark: Well, actually it wasn’t because we used Flash to do whatever we wanted to. So it was actually not much different. It wasn’t really until I started CSS and HTML because I wanted to appear in a position of knowledge to counter some of the arguments that were coming back my way for why I couldn’t have my design built and made, from the developers. Probably because it couldn’t have been built. I realise that now, I wasn’t designing stuff that was easy to build. So I learnt HTML and CSS and therefore fell into the restrictions of what you can and can’t use typographically, that way. Before that, I was doing what everyone else was doing, which was either working in Flash or making text from images in Photoshop with whatever font I wanted to use. Then web standards came along and changed all that.

Paul: And then of course, web fonts came along and changed all that again.

Mark: Yes, and changed it all again, exactly. I don’t know though, I am of the mind that actually a lot of designers when using just Verdana, Arial and Georgia—in particularly Georgia—we developed a really good typographic craft by being limited to what we had to work with. Because those are typefaces where you can work them really hard and they can look pretty different for different brands and for different circumstances. Georgia in particular can look very different in different circumstances. And you only really get that by being heavily constrained. Like when I worked at the BBC we were heavily constrained corporately. We could only use a few typefaces and you get to learn them really, really well and know what sizes they work at and know the real limitations and the real little nuances of the characters. And that’s how I felt how we got to with Georgia and then the floodgates were opened and Web Fonts came along, and Web Fonts are great of course, but I can’t help feeling that we’ve come almost full circle. We’re now attracted to the shiny fonts in the same way our print design cousins are and I fear for the loss of the bit of craft which came with being heavily constrained.

Paul: I must admit, I set you up a little bit for that.

[Laughs]

Mark: I was led into that one.

Paul: I knew you would go down this route, which is really good. Not that you are predictable Mark. But it’s fascinating, because I totally agree. I always get annoyed at designers that complain about constraints because I think constraints is what makes you a designer and not an artist, in my opinion. And especially with typography, I think it is a really interesting area. I am really interested at what those kind of nuances of design – you talked about how you made fonts work harder, that you got them to do more. What do you mean by that? What are the big differences in terms of typographic quality that isn’t all to do with fonts? Do you know what I am getting at?

Mark: Yes, let’s take Georgia as an example. Georgia and Verdana are two of the classics. So when you work with those fonts for a while, you know that Verdana is grotesque when it’s large, it’s disgusting. It doesn’t work well, it was never really designed to be that big. But it worked really, really well at 11px, 12px high. You know with Georgia the italic is very soft and feminine, particular at larger sizes. It looks almost a completely different typeface when it is rasterised in Photoshop than when it was rendered in pixels in a browser at a smaller size, you know that the italics break down at anything below 12 point. You just get to learn how the type renders at different sizes, in different environments and in different ways. Even just different colour affects how Georgia, in particular, where some of the contrast between the strokes and the letter forms start to break down in a smaller size and if you introduce a lighter colour it affects legibility. It’s just about familiarity. I think that you’ll see a lot older real traditional designers, I am talking about people like Vignelli, Paul Rand, people like that and even going back to some of the lecturers that I was taught by. One of my lecturers did a lot of work by Factory Records but they have a handful of typefaces that they use throughout their career and they go back to them time and time and time again because they know them. They are like an old pair of slippers. You know the ins and outs of them and when to apply them to their best advantage.

And then you get other people who say ‘Well that’s ridiculous, there is as many typefaces out there as there are… ties. And one typeface is appropriate in a given circumstance when another isn’t. It’s about familiar with the plethora that’s available and it’s about doing your work to determine the best type for the best job’. So there are two schools of thought. There are people who will go through that process of finding and evaluating and applying and testing and trying. And then there are designers who will just have six or seven typefaces they will use for everything.

Paul: I think another big factor in this is that typography is more than just typeface selection. I am quite interested in the days where you were much more constrained, in the terms of fonts that were available to you, typefaces that were available. What other things were you using to influence the typographic feel of a design?

Mark: So that’s where I draw heavily on what we go through in University, so just using scale and space, using white space and using form of the layout, width of the line. Using blocks of colour, imagery so it was much more traditional graphic design. It’s not necessarily typographic design because a lot of typographic design was taken away from you because the constraints were so harsh. So it was using just good typesetting. I think that was what it boiled down to, it was one of the things that attracted me to HTML when I realised HTML wasn’t coding, and it wasn’t programming and it was just typesetting. Then it became a non-scary place and actually it aligned really, really well with how I thought about typesetting. So it was just applying good typesetting rules to content and then to be honest if you do that, you are halfway there. There is very little you have to do to a body of text to make it read well if you have typeset it well.

Paul: So are there any kind of reference material in terms of typesetting, you would point people at?

Mark: Yes there are. There is the old Hart’s Rules of Typesetting – I don’t know if the Hart’s Rules is published anymore. I think it’s been rolled into the Oxford Guide to Style. And that is a big tome of a book. One of the interesting things about typesetting is that it very quickly gets into English or any of the written languages. So if you are typesetting in Russian it will very quickly get into Russian language and punctuation and grammar. It’s the same with the English language. Any typesetting requires—this is where I become a terrible typesetter as I am not very good at English—it very quickly gets into those realms. So the Oxford Guide to Style is a huge style guide for Oxford University Press and the Hart’s Rules were rolled into it. And in the US there’s the Chicago manual, which has got a bunch of that stuff in as well. So those are good ones.

And then of course, Bringhurst as always is a good reference guide – Elements of Typographic Style, that’s got some good typesetting stuff there. The other one that’s really good is a book called Designing Books and that has got some great stuff in there for typesetting. More on the macro thing, so not necessarily typesetting individual words, but more like typesetting a page, heading hierarchy, that kind of thing. So there are a few old school books that people should probably get and read. They are very useful.

Paul: Yes absolutely.

Marcus: Can I go back to the questions Paul?

Paul: Yes, yes, if you want to?

Marcus: No, but it related to what I was talking about a little bit earlier on. The fact that you were saying Mark, that everything’s gone full circle now. And we’re back to the days of bad design effectively. And because designers—and I have air quotes up when I say that word—have the choice of pretty much any font available to them, I suspect that those in the know are seeing quite a lot of mistakes out there. So I was wondering what sort of mistakes are there that set your teeth on edge?

Mark: Oh there’s lots that set my teeth on edge.

Paul: Oh, go rant! To your heart’s content.

[Laughs]

Mark: I was ranting about this the other day. We are seeing a convergence in style. Everything is starting to look the same. Some would say that’s a web aesthetic. I don’t agree. I think it’s a symptom of not necessarily doing the due diligence on selecting the right typeface or necessarily marrying the content to the type to the design. I think it’s ‘Oh we’ll set this in Proxima Nova and that will do’. I think the steps that you go through to decide the typeface for a web site, there aren’t many. Whereas I think if you were choosing a typeface for a large design system for transportation or a big corporate thing, you go through an awful lot of decision points to arrive at a solution. And my fear is that the people are quickly deciding on a typeface and then when a service grows or a product grows or something is that the type becomes ingrained very, very quickly that it becomes not useful for the job and it’s not refracted as a decision. So you end up with something that is not appropriate. And also you end up with something that looks like everything else and I think that, I don’t know why that happens, I mean the curmudgeon in me is kind of like ‘Meh people are just not doing what they are supposed to do, not spending their time or not having the skills to do it in the first place’.

What was the original question again?

[Laughs]

Paul: What annoys you?

Mark: What annoys me?!

Paul: Yes, generally about the Universe, anyway you want to go.

Mark: Well, so one of the things that annoys me is people not looking at the origins and the history of the typeface before they choose one. So no necessarily looking at alternatives. An example to this would be my blog. So I picked Charter which is a typeface by Matthew Carter, from my blog which was designed in the ‘80s. And was designed with real limitations of low end resolution displays. And the reason I chose that was because at the size I was going to be using it, the various sizes as well as italics which I wanted because my site is just purely text—there’s barely any images on there—is that I wanted the particular characteristics of the type. So I wanted to make sure that the serifs were pretty chunky and there was a large x height and I knew there would be a large x height as I knew it was designed for really large terrible displays and then used small. So it had to be a large x height really for it to be legible. And what that does is that it gives you a nice friendly approachable easy-to-read face that you don’t necessarily have to set with large leading in between each line height, in between each line because the x height is large. So there was all these decision points and then I would just see some terrible stuff, designs out there and really half the time I am not even sure it’s the fault of the designer. I think there is a lot more at play than makes people make bad decisions and I think type is just one of those really easy decisions to make in the wrong direction. So it becomes something immovable. The type selection is one of those things that you can’t increase in fidelity over time. It’s either the typeface or not.

Paul: Yes, I know what you mean.

Mark: When you talk to somebody, when you are presenting a design or something like that and you have chosen the typeface, that IS the typeface. It’s not going to get any better or worse, it is what it is. My concern with that is that if you don’t do the right work up to presenting it, then that’s it. You present it, and if it’s agreed upon then that’s it. It’s very difficult to roll back.

Marcus: So true.

Paul: The thing that kind of scares me a little bit about what you just said is that Ok, you need to do your due diligence and find out an appropriate typeface and the rest of it. There’s such overwhelming choice, where do you begin? How did you begin to settle on that font? You could spend weeks, months, and years just endlessly picking over fonts.

Mark: Yes, well first of all I think is that you just have to immerse yourself in it. It’s easier now in the job I am in at Monotype, I am surrounded by type every day and it’s really nice because it interests me and I get to see type at various stages of its production from conception to finished thing. And also all of the libraries that Monotype owns, I am surrounded by type and I think that immersion is really important because the more exposure you have to type, the more informed you become. Whether that is through using it, or just seeing it or whether or not you are looking at specimens or you get just email like the emails from My Fonts, they just come into your inbox, you read them, and you take your time.

So… I’ve forgotten the question.

Paul: No, to be honest I think you’ve answered the question, which was you’ve got to immerse yourself in that kind of world.

Marcus: It’s being a professional. If you are a professional designer you need to know this stuff.

Mark: Well it is mind-blowingly amazing how many typefaces there are out there. Tens and hundreds of thousands and I understand , I mean every time I do a workshop on design and I teach a lot of developers design and have done over the years, it’s the single thing that comes up time and time again. Its how do I make that decision? How do I know what to use? This is where those constraints on web fonts, you know system fonts was actually never very useful to begin with. That was it, you had a few, so pick. But now there are thousands, this is where there needs to be better tools that help educate you as you go to make a good decision. There are a few like that. Typekit was one that introduced a filtering mechanism on their web service that help you decide ‘Oh well, do you want to use this for paragraphs, do you want to use this for headings, do you want a large x height or a low x height?’ And it explained it with the interface, and that was very smart, because it gave just enough education to make an informed decision and it filtered the results. So I think there are more tools like that, that are around to just very low level help you make a good choice and help you filter down to what you need.

We do a lot of user research and we’ve been doing a lot of work on type specimens recently and most people have a task in mind, they may not be able to articulate it, I think that is one of the challenges with any type library, presenting it to people who aren’t typographers or type designers or graphic designers, is trying to present it in a way that they can make a good decision without them having to know the difference between a grotesque and a neoclassical. Nobody cares or knows about that unless you are a type designer. So if the tools have enough good information in them then people can make good decisions.

Paul: I like that, I like the idea of building it into the tools.

Mark: Yes, because otherwise you are just going to try and teach people and nobody’s going to learn unless they take the time to learn.

Paul: Yes, but you are right. Marcus is right as well. If we’re going to call ourselves designers—I say ‘us’ even though I am not a designer anymore—if you call yourself a designer, then that is part of the job. It’s getting to know and getting familiar with typography. There is something to be argued as well for taking the approach that you talked about earlier, that you have a suite of a dozen fonts that you return to that you know very well and you know their different roles for different scenarios and you focus down than rather starting from scratch every time I guess as well.

Mark: Yes and you see typefaces that end up in the contemporary palette and you’ve seen that happen throughout graphic design history. Type is trendy like Rotis was in the ‘90s, with the giggle that says it all. Proxima Nova now, Gotham… you could list half a dozen that regularly make appearances. For good reason – they are workhorses.

I don’t know where I am going with that.

Paul: You’re right. It’s ok if you are making those kinds of decisions intelligently. It’s alright to go with Proxima Nova if it’s something you have thought through and considered rather than ‘Ok that’s a trendy font at the moment, I’ve seen it on this site – I’ll use it’.

Mark: That’s the thing as well, is to just think about the DNA of the site or the product or whatever you are working on. Is it’s probably going to mostly be words, it’s going to mostly be long font and words that people read which is going to be set in a typeface and that typeface is going to be the visual language of the words. So people soak it in and one of my concerns is that some typefaces are characterful enough. So for example, one of the great things about Helvetica is that it’s got no character. But that’s one of the wonderful things about it, is that it can be… well no, it has got some character. But it can be applied in different ways and you have to rely on other things within the design, within the design language to give the feeling of individuality in a product or a service.

If you get a characterful typeface, so something that is instantly recognisable, like Proxima Nova, then all of a sudden the differentiation between products and services starts to degrade because the character of the type is punching through the words and that’s the antithesis of a lot of what I was taught, which was that the type is there to support the words, not the other way around.

Paul: Yes, absolutely. I totally agree with that. Hey Mark we need… I am sorry, but we are going to need to draw back a little bit now from the design and type side of things and talk a little bit about the technology.

Mark: Go ahead.

Paul: I know this isn’t so much your thing. You kept saying to me before ‘Don’t talk to me about technology’.

Mark: Yep, don’t.

[Laughs]

Paul: But I am going to anyway.

Mark: Yep, go ahead.

Paul: This is where you can make all kinds of statements but we’ve done a disclaimer at the beginning that this is not your area of expertise. But you can’t talk about things like web fonts without coming on to things like performance. Which is such a big thing.

I’ve seen some people do some dumbass things when it comes to just the amount of fonts and the performance issues that they have. You work for Monotype now, so you work for a company that has a series of these web font libraries. What kind of things have you picked up in terms of improving performance so that if by adding these kinds of fonts into your website, you are not absolutely knackering the performance of your site?

Mark: Well there are a few things I could talk about on that. I can’t really talk about the JavaScript side of things, I can’t really talk about the DOM – there’s a whole bunch of really smart engineers that deal with that and they’ve written loads of stuff about it. Anyone listening to this, go and read that stuff because that’s not my expertise.

Paul: Do you know where they can read that kind of stuff?

Mark: Oh well, Typekit write about that kind of stuff on their blog – in the past they have certainly. Fonts.com as well, My Fonts I think to a degree have done some of that stuff, so there are lots of places to look for that technical side of things. But certainly some design aspects I can talk about.

One of the things that increases the font size… fonts are just made up of lines, lines that make up the characters. If you zoom into a font it will just be a line that’s coloured in black. The lower the number of lines, the smaller the font size. So the more optimised your font in terms of points on the glyphs, the smaller the font size. So if you go for a really grungy jacquardy font it will probably have a load of points, which means it will be large in file size.

So that’s one thing to look at. This is one of the reasons why I chose Charter is that I knew for low resolution displays, the points would have to be kept to a minimal. So each individual glyph has been worked on so those points have been minimised and that keeps down the file size.

So that’s the first thing, and really that’s a designer’s thing to do, not an engineer. The second thing to do is also look at sub-setting your font. One of the things with web fonts is that they come with a whole bunch of characters to support other languages. And you can look to sub-set those down. What that means is to take the whole font and remove a whole bunch of things/characters from it. And that will also reduce the file size.

Interestingly, performance in websites is obviously key but where this is really going to start to pinch is things like advertising. So if you’ve got an ad banner that’s made in HTML and it’s responsive and it’s got a web font in it, you are going to have to get it under 65k. Now if your web font is 25k of that, that’s an unacceptable payload.

Paul: Do you know, I never thought about that, that’s a really good point.

Mark: Another side of this for sub-setting as well is foreign languages. If you look at Chinese for example, there is a whole bunch of characters in there. In fact, Monotype has been working on a thing called Fontsubsetter.com and that is a site that shows dynamic sub-setting. So that is sub-setting that basically the service scrapes your page, it analyses what glyphs are in your page and only serves them dynamically. So this would obviously work well in an ad where maybe you’ve got only twelve characters and that’s all you need.

Paul: Yes.

Mark: And it will just display them, and maybe you can get your font down to like 4k. So there is a load of stuff that’s really interesting with sub-setting. Font Shop has released their sub-setter now. There’s a bunch of font services like MyFonts has a sub-setting within their service, most of the services do have it.

I’d tell people to look there and also just look at the actual design of the typeface itself. So those are the two things you can look at to help performance, to actually get the file size down.

Sub-setting itself it can be illegal! Basically you are messing with the font files. There are other sub-setters out there that are independent and if you take a font file from somewhere and put it in an independent sub-setter and then publish your own font on your own website, just be careful, because it could be breaking the ULA, the License Agreement.

Paul: Which would be bad.

Mark: Which would be bad – all kind of bad things will happen.

Paul: What about things like ligatures and those kind of things? I presume you could remove some of those with sub-setting?

Mark: Yes you could, there are a bunch of fonts that have discretionary ligatures, that are decorative ligatures rather than functional ones. FFI for example is a functional ligature, it combines the letters F, F and I together. But there are discretionary ones, ST for example or CT, they have a little swatch on the top, joining the two characters. Yep, get rid of them. Also Unicode characters. There is a whole bunch of characters, glyphs included in a font – thousands sometimes, so you can get rid of those.

Paul: See now that’s all very useful. I like that a lot. Ok, so we’ve got one other question related to technology. I wouldn’t under normal circumstances ask this question, but Mark, I trust you. I trust you to be unbiased. And I also know that nobody from Monotype will ever listen to this.

Obviously you work at Monotype and so you produce a load of different font services there. Because there are loads of them now, from Google’s web fonts which people use because it’s free and it’s Google all the way through to things like Fontdeck, there are just so many of them – are they all much of a muchness? What do you need to consider when selecting one over another other than it has the typeface you want?

Mark: Yes there are a few things. Where you work obviously, cost is a big issue. So if you are choosing a web font for a multinational that has billions of page impressions then you are going to want to look at the robustness of the service, but also cost. Most of these places charge by impression or by monthly subscription. So there’s that.

And then there are other things, so there are other services directly related to the libraries themselves. Hoefler is directly related to the fonts that Hoefler releases. And they are very good.

Paul: What do you mean by that, you’ve kind of lost me a bit.

Mark: There are font services that are multiple libraries and marketplace, like MyFonts and then there are the services that are only for certain foundries. A whole bunch of foundries have released their own services. So if you wanted Gotham or whatever then you’d use Cloud typography, so that’s what you would use as that’s where the type is.

Paul: Ok.

Mark: So to my mind, they are a much of a muchness, but it very much depends on how you are going to use them, or what client, or if you are in house, the robustness of the service obviously. Then you just get into any other kind of subscription you might have. If you are a FTSE 100 company, then you’d want to make sure the service would be sticking around and you’d get value for money and the rest of it.

Paul: Yes, that makes a lot of sense. Cool. Right Mark I think we ought to wrap up at this kind of stage. Is there anywhere you can point people at this stage? If they’re feeling inspired by you, if they’ve gone ‘Ok I need to start taking typography more seriously’, you’ve mentioned some books earlier, but are there any online resources you would point people to?

Mark: Yes, the one place that I would look at would be MyFonts. I’d sign up to MyFonts newsletters, particularly the Rising Stars, Creative Characters. Getting those every month and you get two newsletters a month – they have really great interviews. They have new releases, that kind of thing and that’s wonderful for just something that comes to you rather than you having to go out and find it. That’s really great and reading I love typography, that John writes. There is some wonderful stuff on that site, and going back through the archives, it’s really broad. It’s the only site really that reflects the marriage of web design and type design and typography. Because this is what’s so interesting about web typography, is this combining of three worlds that have always really been apart for a long time. There’s the type design, the graphic design and then there is web design. And web typography sits slap bang in the middle and it combines these three worlds in a wonderful way. It’s been pretty absent in the web design industry largely and it’s a great way of exposing yourself to new types the way that other people in other disciplines like type design and graphic design think of type and have it apply to their work and also to open your eyes to what else is out there other than these kind of staple trendy fonts that people are using right now.

Paul: Yes, I really like that idea. That makes a lot of sense. What about you? You mentioned your blog earlier. Where can people find out about you and follow your stuff?

Mark: My neglected blog. My poor neglected blog.

[Laughs]

Paul: I am looking at it – you posted in February.

Mark: Yes, I did after a long break. Well mostly kind of ranting a little bit on Twitter and my blog. There is the promise of writing a bit more there. I would say web conferences but I am not speaking at any this year. So I mean, probably my blog. I am going to start… how many times have you heard this? ‘I am going to start blogging a bit more, honest Guv’?

Paul: You should do. I like your stuff, it’s interesting.

Mark: Oh, thank you Paul.

Paul: Get your arse into gear, I need something to read.

Mark: I probably should.

Paul: Alright, thank you very much Mark, it’s great to have you on the show. Fascinating stuff and hopefully we’ll get you back on again at some time in the future.

Mark: Thank you guys, it’s been a pleasure.

[Music]

Paul: I so need to find an excuse to meet up with Mark again. Just sit in the pub. Can we do a Grumpy Old Man’s Conference? Where you have to be at least 40 to attend? Although is that sexist? Perhaps we ought to make a Grumpy Old Woman’s Conference as well.

Marcus: Or Grumpy Old Person’s? But that’s youngist isn’t it? Is there such a thing as youngist?

Paul: No I don’t care if there is.

Marcus: There is oldist isn’t there?

Paul: Young people get far too much good stuff.

Marcus: Yes like being fit and healthy.

Paul: Yes and they are optimistic and happy.

Marcus: Well I am optimistic and happy.

Paul: Are you?

Marcus: Yes, always.

Paul: Well you can’t come to our Grumpy Old Man Conference then.

Marcus: Well I can join in those conversations…quite happily.

Paul: It needs to be the Miserable Shit Conference doesn’t it. That’s what it needs to be. Because you do get some young people. Dan should be able to come.

Marcus: I was going to say, talking about Dan again, I said to him ‘I apologise for my glass being so half full the other day’. And he said ‘My glass has fallen on the floor and smashed’.

[Laughs]

Paul: Yes, yes, that’s about right. See this is why I like Dan so much. He can come. Yes, it needs to be the Miserable Shit Conference.

Marcus: Yes, I am not allowed to go then.

Paul: No you’re not. You are banned.

Marcus: Far too cheery.

Paul: Right, Media Temple now.

Marcus: Yes.

Paul: Our next Sponsor. This appeals to me, I am a great fan of anything that involves me of not having to do stuff. So MediaTemple offer this service that’s called CloudTech Server and Admin care. Which admittedly is not the sexiest of names ever created for a service.

Marcus: No.

Paul: Little bit of a mouthful but it’s actually a good service. The reason I like it is essentially they manage your servers for you. You know if your company reaches a certain size and you’re hosting and server environment is pretty important and you end up having to hire a server admin person. Well this is an alternative approach. They will do things like review your site before launch, look for security problems, performance issues, server configuration, help you migrate between different servers, they will install your plug-ins and set up your apps and watch the site 24/7. They’ll back it up, you’ll basically get consultation with an engineer anytime you want. So it’s like basically outsourcing your server admin function. Which, when you are an organisation of a certain size, I imagine would be very appealing.

So that’s really all I wanted to point you at this week when it comes to MediaTemple because I think that looks like a damn useful service. You can find out more about that and all of the other services that MediaTemple offer by going to Boagworld.com/Media Temple. And there is, as you know a special discount for Boagworld listeners. If you use the promo code BOAG—I can’t spell my own name—you’ll get 25% off your web hosting. So go along and check that out.

But also check out those extra services such as the CloudTech Server and Admin care service thing.

Right give me a joke Marcus, and make it a funny one!

Marcus: I’ve gone for an oldie but a goodie.

‘Two aerials on a roof fell in love and got married. The wedding wasn’t great, but the reception was fantastic’.

Paul: You’ve told that one.

Marcus: Have I?

Paul: No good, try another one. You’ve got to find another one, right now.

Marcus: Ok, ok.

‘I saw that show – Fifty Things to do before you die. I would have thought the obvious one was to shout for help?’

[Laughs]

Paul: That one I like. But then I have this problem with death.

Marcus: Do you?

Paul: It makes me laugh. Which is not good. I remember once, my Grandad…

Marcus: …died?

Paul: No. Well yes, he did. I didn’t feel the need to laugh at his…actually there were one or two moments, but I remember my Grandad once, telling me a story about how so and so was not very well and unfortunately passed away. And my Uncle said ‘Well he wasn’t very well then’. And for some reason I thought that was hilariously funny. Anything to do with death makes me laugh. It’s a nervous reaction.

Marcus: Maybe sharing too much at the moment?

Paul: Sorry?

Marcus: Maybe you are sharing too much at the moment.

Paul: Am I over-sharing?

Marcus: Just a bit.

Paul: I think death is funny.

Marcus: It can be. It’s used in many a joke. Like that one I just told.

Paul: Yes. All of that was really just me stalling. All of that waffle.

Marcus: Why?

Paul: Because I was trying to work out who is on next week’s show.

Marcus: How many more have we got to go?

Paul: This is the last one next week.

Marcus: Oh ok.

Paul: Well not last one ever, obviously.

Marcus: No, but last one of this series.

Paul: So Brett Harned is on next week’s show talking about Project Management.

Marcus: I didn’t do that one, so…

Paul: No, so he used to be a Project Manager at Happycog and now Project Manages the world. No, he’s become the poster boy for Digital Project Managers. He’s the one who kind of champions the importance of Digital Project Management and he runs all the events that Pete gets over excited about.

Marcus: Pete? Sorry, I don’t know who you mean.

Paul: Just because he’s left the company doesn’t mean he ceases to exist, Marcus.

[Laughs]

Is that how you feel about me?

Marcus: Well no, we still do things together. But I obviously forget who you are inbetween.

[Laughs]

Paul: That’s just senility.

Marcus: No, Pete and I keep up on Skype usually cricket related.

Paul: Oh yes, I’m sure. So anyway, Brett is on next week. You definitely should join us for that one. The last in Season 11. Shall we talk about Season 12?

Marcus: Yes do!

Paul: Yes lets quickly mention Season 12. I’ll go into a bit more depth about it next week but that will kick off the 21st May and we are going to look at running a web design business. So Marcus might actually have something to contribute to the podcast for once.

[Sigh]

Marcus:

Paul, Paul, Paul. Yes I will.

Paul: So we are going to have different topics each week, so things like web design as a career choice, starting your business, winning your initial clients, financing, marketing, dealing with failure and so it goes on. I won’t bore you with all of them.

So we’ve got all of these kind of subjects and basically what we are going to ask is for people to send in questions relating to those different topics and we are just going to work through the questions. And we are going to have cool people come on the show with us to talk about those questions. So that’s the plan.

But we haven’t finished with Season 11 yet. Come back, come back for next week’s show, were we will be entertaining as always.

Marcus: So not very entertaining at all.

Paul: So we’ll see you then.

Boagworks

Boagworld