Adam Morse makes the case against webfonts:
Typography is not about aesthetics, it’s about serving the text. If even a small percentage of people don’t consume your content due to a use of webfonts, your typography is failing.
All this being said I care deeply about aesthetics, and I’ve found the following two sentiments to be true: System fonts can be beautiful. Webfonts are not a requirement for great typography.
I’ve argued in their defense. Also, I reveal a lot of my own biases as a type geek:
I don’t believe that all of human experience can be elegantly communicated via Helvetica, Times, Georgia, or San Francisco. And when I read that “typography is not about aesthetics” then I sigh deeply, heavily and come to the conclusion that 1. yes it is and 2. aesthetics is a problem for the reader. The more ugliness that is pressed upon us, the more lazy we become. Beauty, legibility, subtlety, these are the qualities that are possible with the help of web fonts and without them we are left with a dismal landscape devoid of visual grace or wit.
I find the argument that typography is not about aesthetics to be a rather indefensible position. Consider the number of fonts designed in the age of the printing press. Hand-crafted, meticulously detailed and arranged. They are literal works of art.
Helvetica, for example… its beauty lies in its simplicity. Its crisp, clear lines create a strong typeface that is easy to read. When Morse professes his appreciation for Helvetica he is expressing admiration for the aesthetics of the font.
So we may have to agree to disagree here. That being said, I think we can all concur that there is no saving grace to Comic Sans outside some garish design targeted to small children.
You can throw so many things into this debate. I think a gray middle ground is usually the best course of action. Using web fonts with smart intention and with respects to a performance budget. There are tradeoffs with going with both options.
Personally I think if a small amount of your audience is not consuming your content due to a failure in a webfont loading then the problem lies with your overall design/architecture, not typography itself. I would consider it the same as if your scripts and stylesheets aren’t loading due to CDN problems or timing out because mobile networks don’t work well in tunnels. Failing partially and gracefully is far more important in my view than failing pariod.
The sad fact is that generally users don’t pay for the content they consume, and marketing/branding people do care whether that particular font is used over another (‘How will people know it is the brand website if the font is the same as the default in Word!’) amongst a whole host of other things that users do not care about and they generally control the major decisions. I don’t use an Ad Blocker because I respect the right of site builders who give up their time to create content to get paid by someone if it is not me. If I visit a site and the ads are obstrusive I vote with my mouse button and click back.
There is no right or wrong, just choices and consequences. You choose bloat over traffic and usability it is up to you . Personally I love webfonts (I remember slate grey backgrounds and Time New Roman as far as the mouse can click) and I really wish there were solid options for self hosting good fonts in a way that stops people stealing them off your server.
I usually opt for Georgia for headings (serif)and Verdana for body text (sans-serif) and sometimes add Brush Script MT (cursive) to spice things up. After reading so many pros and cons I decided to use the tried and proven Georgia/Verdana combo that something like 98% of all users have available. As fallbacks I use Times, Helvetica, and Comic Sans MS respectively and of course for code I use Courier New and Courier as a as a fallback.
Google >
define:typography:Then I read the first paragraph of the linked article:
The web is about so much more than just solving problems for users.
I don’t know why anyone should own more than one color of shirt. One black shirt is plenty for clothing the upper body. And well, I’m only really interested in clothing my upper body.
I have worn my single black shirt in the presence of a number of people. In that time I have never heard one of them complain that my shirt was too black. On the flip side, I have occasionally heard people complain that someone’s shirt was an ugly or garish color.
Multiple colors of shirts aren’t worth the cost. You have to store them, which uses up valuable space, and you have to choose which shirt to wear each day, which is a waste of time and mental energy. Not only that, but each shirt costs money just to buy it in the first place.
Clothing is not about aesthetics, it’s about modesty and protection from the elements. If even one person is distracted by your brightly-colored shirt, your outfit is failing.
In conclusion:
Black clothing can be beautiful.
Colors are not a requirement for a beautiful wardrobe.
I get way more distracted by black shirts than coloured shirts, which I’m more used to see. Not just that, but I also start to wonder why they’ve chosen such an unconventional colour of a shirt, which also is a distraction.
On a purely functional level, typography has nothing to do with aesthetics. It’s about selecting and configuring the display of type to achieve the maximum clarity and legibility for your content.
But we as humans are not purely functional.
We use typography to create a point of difference, to inspire and relate to the themes and ideas behind our content and the overlying narrative we’re trying to portray. We need it to tie into an overall brand structure, the identities of the client, and the audience we intend to display our content to. While yes, these are functional duties they are tied intrinsically into the aesthetics of us the designer, the client and any member of the audience who views it.
There is nothing wrong with using system fonts, there is nothing wrong with custom web fonts. Each font has it’s own aesthetic and function. It is when we overlook those properties that the typeface itself becomes the issue. It is our capacity to make considered design decisions and execute them that is what makes our profession so valuable.
Robin, I agree with you 100%.
With all due respect who is Adam Morse and why should we even care what he has to say? I can get behind his opinion that web fonts can hinder rendering and cause slow loading. Absolutely. But so can images. System fonts can be beautiful. But he sure isn’t helping that cause on his own site. Sure it loads fast but that’s the about the only nice thing I’ll say about the design (or lack thereof).
I believe FOUI and other slowness is really a temporary problem. Browsers will get better at rendering. Connections inevitably will get faster and help make this a non-issue. I’d take the web we have now, with all of its complexity, over the one we had 10 or 20 years ago. I loathe the days of setting type in Photoshop and then using ugly hacks for image replacement. And I’m sure a lot of designers are thinking the same thing.
Typography isn’t just utilitarian. Typography brings personality to a site. In graphic design, the delivery of the message—its presentation, how and where it’s presented—is just as important as the message itself. I think that fact is lost on a lot of programmers with little design skills.
Just like any web asset, you trade size, speed, etc for the benefit it provides your users. Arguing web fonts are useless or too slow is like arguing we should never use images at all either. We might as well go back to the days of Mosaic, blinking text, and grey backgrounds. I’d gladly trade retina images for web fonts any day of the week.
Typography is like architecture–it’s a combination of both function and aesthetics. It’s such a deep, deep subject and intertwines both uses so much that it’s hilariously wrong to say it’s simply one or the other. (And I echo the above comment that if webfonts fail, it’s a problem of the site’s structure rather than the concept.)
I agree with Adam Morse. Especially on Mobile Custom fonts sucks. And when you are on 3G connection you just want to get the content asap.
Graphic design (and by extension, web design) is primarily about communication. If it does not communicate the message clearly, it has failed to be useful. Typography as an element of graphic design can most certainly function without web fonts. Some of the greatest designers and typographers of our times limit/limited themselves to only a couple typefaces. There is nothing that you can’t communicate with a couple typefaces and a thorough grasp of design fundamentals, typographic hierarchy, and gestalt principles. If you don’t agree, I would argue that you are just taking the simple and lazy way out of solving design problems.
That Robin sighs deeply when he hears someone put forth the opinion that “typography is not about aesthetics” is bizarre. Typography is not about aesthetics, it never has been. It is about communication, and the typefaces that have stood the test of time are the ones that adequately communicate (ie. Garamond, Univers, and yes, even Helvetica). The thousands of awful new fad typefaces and display fonts that come and go which one has easy access to are often about aesthetics, not about communication. Does this mean that typography or design is about aesthetics? No. It means that too many people think they can/should create typefaces and display fonts without understanding the very complex topics of type design, typography and communication.
“System fonts can be beautiful. Webfonts are not a requirement for great typography.”
I agree with Adam wholeheartedly on this and struggle to find fault his comments. You don’t NEED web fonts. Web fonts can be great, of course they can, but Adam is 100% bang on when he says they are not a requirement for great typographic design.
“Sure, but how much time do we spend on other aspects of a design? On the quality of the photography, on the editing of text? On the unnecessarily large custom frameworks we build and ship? How often have we re-written code that could be copy and pasted from Bootstrap? Good design takes a certain amount of time and great design is about figuring out the best way to spend our limited resources.”
Robin makes a lot of assumptions about how they rest of us are building for the web, and that last sentence oddly tries to associate design with page speed/size. I can say with confidence, that the quality of “good design” is not necessarily correlated to how long one spends on it, and great design is not about what Robin is talking about here.
“Are we truly naive enough to believe that everything can be said with such unnecessary restrictions to our typographic palette?
The masters of typography and design that are studied in colleges and universities around the world would say, yes. If you refer to typographic restrictions as unnecessary, it follows that you believe that unrestrained use of web fonts is necessary. That is truly naive, and is a dangerous misunderstanding of design in my opinion.
I will note: of the typefaces that I referenced that have stood the test of time, I am aware that they are not all system fonts. I was referring to them more as examples of clearly communicative type families that have stood strong, and that in limiting themselves to just those (or a few other type families), many print designers (free of web font restrictions) have created some of the most tremendous and effective designs and design systems, all with self-imposed restrictions, because more typefaces !== better design.
You seem to understand the presentation of the message is just as important a the message itself but then you retort to saying fonts are utilitarian—that the “defaults” are good enough, even though Robin has argued there’s vast differences in between what faces are actually available “natively” on each platform. So which is it?
Let’s pretend for a moment that the only typeface natively available was comic sans. Would you change your point of view now of using different fonts? It’s an extreme example but some of us are tired of simply using Times, Verdana, Arial, etc. Just like companies in the ’70s branding themselves using Helvetica, those faces lend a certain “feel” to the web. Sometimes you need to get away from that.
Not sure where you arrived at the page speed/size conclusion. And I also don’t know how long you’ve been practicing this craft but if you think time is irrelevant to quality, I have a get rich quick scheme you might be interested in.
As someone who’s sat on both sides of the hiring table, there’s a huge difference between a design that’s put together in a few hours vs a few days vs a few months or even years. The designers who crap things out are doing just that—crapping them out. Good design can be an iterative process.
There are certainly some designers who work faster than others, but give two people with similar skill sets identical problems to solve, the person given more time and resources will probably do a better, more thorough job. I’ve worked under pressure before; that can certainly motivate and stimulate the creative juices, but I’ve also gone back to that work and wish I could have tried x, y, and z too. Or maybe you come back a week alter and you realize something isn’t rendering right at a certain breakpoint. Especially when it comes to responsive design, people who tend to work fast don’t actually test their work.
You are right, design is about communication. However, it’s also about solving a problem within a set of constraints—those generally being money, time, resources, etc. If your constraints call for loading a page as fast as possible as your single priority, then you probably want to steer clear of web fonts. And images. And even complex stylesheets.
However, many people take the “middle of the road” approach here with a performance budget. If your resources don’t load within x seconds, you don’t load them at all. For example, the Guardian has one of the fastest loading news websites in the business, driven by a team motivated to make pages load quickly. However, they also understand branding and constraints. Their custom typeface, Guardian Egyptian, helps sell their brand.
If you don’t want to use web fonts, that’s your priority but one person’s “good enough” is a another person’s mediocre.
Hey Dave,
I think you misunderstand the whole time-spent vs. quality thing from my end. The original post made reference to good design taking a certain amount of time. A) this has nothing to do with arguing in favour of web fonts and B) one could spend months creating just an index page and use all the fanciest web fonts known to man, meanwhile someone else could spend a fraction of that time with only one typeface on the exact same page and come out with a much better product. I didn’t understand Robin’s rationale for pulling that in. I agree that you can’t rush design, but design quality is not directly correlated to time spent designing in any world. I’m not pushing for rushing designs and never would advise that, take your time within reason. You and I read Robin’s passage very differently, evidently.
“Not sure where you arrived at the page speed/size conclusion…”
This is a part of the conversation. Can I clarify anything for you?
“As someone who’s sat on both sides of the hiring table, there’s a huge difference between a design that’s put together in a few hours vs a few days vs a few months or even years. The designers who crap things out are doing just that—crapping them out. Good design can be an iterative process.”
I never advocated for designing quick or crapping things out. In fact I argue against that, saying that often using flashy fonts is a quick and lazy way to solve a design problem that could be better addressed using foundational, time-tested design techniques. What I am suggesting, from my experience is far from the quickest way, and reaching for display fonts as a tool is a great degree closer to “crapping things out” than spending your time solving design problems.
“You are right, design is about communication. However, it’s also about solving a problem within a set of constraints—those generally being money, time, resources, etc. If your constraints call for loading a page as fast as possible as your single priority, then you probably want to steer clear of web fonts. And images. And even complex stylesheets.”
I agree, and that is part of the issue I have with Robin’s post. He is saying avoid limitations, but limitations have always been a key component of design, and on the web they are even more so. Loading a page as fast as possibly is rarely if ever the single priority, but if progressive enhancement and responsive images/layout (including not loading everything for every connection on every device in every part of the world) isn’t a part of your build process I think you have a lot more that you should be considering than just what web fonts you want on your page. As you imply you have been around the block and know a thing or two, so obviously you know that your implication that if and when load speed is your single priority you should consider avoiding web fonts is a pretty comical thing to say.
“For example, the Guardian has one of the fastest loading news websites in the business, driven by a team motivated to make pages load quickly. However, they also understand branding and constraints. Their custom typeface, Guardian Egyptian, helps sell their brand.”
Great example of a time when using web fonts is a solid idea, especially when they can do a great job serving that up to clients effectively. Branding is an awesome example of a time when it makes sense. Someone’s blog, not as awesome. Perhaps even “unnecessary”.
“If you don’t want to use web fonts, that’s your priority but one person’s “good enough” is a another person’s mediocre.”
Again, I am not advocating mediocrity, or even “good enough”. Far from it. As I stated, I see reaching for display fonts without discretion as being the “good enough” approach to both design and serving webpages to clients.
Ian, I think I see where you’re coming from now, thanks for clarifying.
Yeh I’m not sure I agree with you that Robin was implying people who use web fonts use them arbitrarily or to avoid limitations. That can certainly happen, as it can with any technology.
If you reach for a web font, in my opinion, one of a few things are going through your head:
You care about the nuances a different face can bring (like making sure your belt and shoes match)
You’re doing it because it’s trendy
Maybe the face is already included in a list of fonts included with a “theme”
I completely agree with you on designers shouldn’t use them to reckless abandon. There’s certainly people who reach for, say, Open Sans or Roboto on all of their sites. Why even bother at that point?
Robin even mentions this to that effect in his piece:
That to me doesn’t imply someone who’s choice of font is being made arbitrarily. In fact, he counters the opposite:
Again, Robin doesn’t speak to me of someone who designs without limitations.
So a big brand can brand themselves while someone not so established cannot use a well-chosen font? I’d say it’s even more important for a small designer to do something off-the-beaten-path than a larger, already established brand.
I think what you may be getting at, without coming right out and writing it, is there’s also a 3rd group of “designers” (and I use that term loosely) who are oblivious as to what they’re really doing. Not to single anyone out but there’s certainly plenty of naivety to go around when it comes to the web design in general. I know plenty of print people who don’t know (or don’t care) what a performance budget even is— they’re used to 100 MB PDF files and maybe they know Open Sans is a web safe font because they read about it somewhere…
Web fonts just happen to be that latest casualty of someone trying to “be” professional but not quite sticking the landing. This isn’t a symptom of a particular technology, it’s a knowledge gap. I see the same people who stuff their websites full of fonts also use non-downsized images on the page (letting the browser scale down their 8 MP image).
I’ll make this one short: progressive enhancement. It was invented for situations like this, and serves both needs: readable content, with added aesthetics, where available.