I applaud the effort and share the sentiment that typography is important for the web, but there seems to be quite a bit of problematic advice given.
E.g.,
1) the author suggests a range of 120-150% of leading; the upwards bounds of this is far too much (too much leading causes the eye to skip down a line). Bringhurst's suggestion is much lower---around 12/14pt (Bringhurst is referencing print, not online, so an argument could be made for slightly more leading, but not 150%).
2) The discussion of kerning doesn't mention kerning tables that are built into the font: one doesn't manually kern body text.
3) Tracking, aka, "letterspacing". There's some debate about it, but one doesn't typically letterspace lowercase (body) text (the exception may be very small text). F. Goudy may have said that "anyone who letterspaces lowercase would shag sheep" http://practicaltypography.com/letterspacing.html
While this article is a bit of a mess in many ways (structure, content, design), and I wouldn't take it seriously as a guide to design, you can use leading to give emphasis to things like an intro paragraph or pull quote, in which case 150% is totally fine and you might even go over that. They should probably have mentioned the context in which their advice might have been used, and given examples of different usage. 150% on main copy would usually be way too much of course. Even for main text, personally I find 12/14 to be pretty tight - Indesign for example chooses 12/14.4 as a default, and how tight it feels depends on a lot of factors (face, line-length, weight, density of text (is it head, pull-quote, long body?)). There's a lot of variables there and I'd be careful about making sweeping statements about leading.
I agree the kerning examples are pretty absurd, if anything automatic kerning usually gives you too much space - I've never seen automatic kerning make such a mess of spacing as in their example, and as you say it's something you'd only do manually on heads (and even then rarely in web typography as the tools just are not there to do it well, unless you want to litter your code with manual spans).
The practical typography link you gave is great - that's a much better resource for online typography, and beautifully done:
> 150% on main copy would usually be way too much of course.
I think this is true in general, but fonts that are typically used in web design tend to have pretty tall x-heights (designed that way to compensate for low monitor pixel density). As the x-height goes up, I find the leading can too.
I like the rule of thumb that the line spacing (i.e. distance between baselines of successive lines) should be about 3x the x-height.
But I also do tend to like my lines a bit more spaced out than most. Some sort of weird compensation for suffering through years of painful single-spaced Word documents and old web pages.
It's difficult to make generalisations about line spacing, because so much depends on the typeface you're using. On the web, we normally specify a line-height relative to the font's size, but factors like x-height (or, if you prefer, how prominent ascenders and descenders are) and the line length are also important.
As for tracking, not letterspacing lowercase is a reasonable rule of thumb, but a lot of rules need to be bent when you're setting small text. A lot of the same arguments for bending the rules also make sense if you're displaying text on low resolution media like computer screens (less so on modern high-dpi technologies like Apple's Retina products) and sometimes also if you're setting inverted text (light against a dark background). As always, you have to take the whole picture into account and adjust your typography to your content and your medium.
The comedy 1.5 line gap between paragraphs was what defeated me. I was distracted by the sound of Tschichold turning in his grave.
1. "too much leading causes the eye to skip down a line" usually considered to be the opposite. Small leading causes skips. Which is why many copy editors prefer to work with texts at 200% line-height.
3. Goudy was talking about blackletter. But that is sheep-shaggingly bad for the same reason as lowercase, so it fits, I think. Tschichold (again) said that, conversely, nothing should be set in all caps or small caps without at least a little letterspacing.
Thanks. With due respect, what level of expertise is this advice coming from? (It's also not clear what expertise the author of the Pressla article has.)
The link he gives there isn't his own site, it's an online typography ebook by Matthew Butterick, a professional typographer. I expect most of the knowledge in his comment comes from there as well.
The picture in the "measure" section has a red "x" over 99 characters per line and suggests 45 to 75 characters per line. But the article's paragraphs have about 95 characters per line.
Or not. Such experimental evidence as we have on this point -- which isn't much for a sensible scientific/evidence-based debate -- doesn't necessarily support a claim that wider line widths will objectively reduce reading speed or comprehension/retention, at least not until you get a lot wider. There may be an argument that readers subjectively prefer mid-width lines, though.
In any case, it may be that the optimal comfort width is dictated by more physically-based factors, such as the angle we can comfortably scan moving only our eyes and not also turning our heads, and that letter counts are just a proxy for this based on typical text sizes and reading distances (meaning that it may or may not be a good proxy since the recent shift to much larger web fonts).
It's almost impossible to say anything definitive about line width on web pages because the experience depends so much on viewport aspect ratio, device rotation, and surrounding content.
The x-words-per-line standard derives from print, which has different traditions. Calling them rules is probably unwise. (See e.g. small column widths in newspaper and magazine layouts, vs paperback novel layouts, vs etc.)
Blog pages seem to have standardised on a single central column between a half and two thirds of the viewport width. Text sizing covers a huge range from ~12pt up to 16pt or even 18pt.
Modern product pages seem to have standardised on a selection of standard Bootstrap layouts, but with a lot of holdouts - e.g. Amazon - who do their own thing.
I'm not aware of any hard evidence about comprehension/retention metrics for these layouts. But they're very popular, and visitors don't seem to hate them.
There's actually more evidence for unexpected conversion rate increases from apparently insignificant changes to button positioning, icon colours, and such.
Much as I love beautiful typography, I think it's only a deal-breaker when it goes horribly wrong. For many sites, other design elements are likely more important.
It's almost impossible to say anything definitive about line width on web pages because the experience depends so much on viewport aspect ratio, device rotation, and surrounding content.
I agree. We know that margin width seems to make a difference in other contexts, so it seems likely that on small mobile devices where there is very little margin the other characteristics for optimum readability might need to be adjusted to take that into account. Clearly there is an inherent limit on the physical width of lines we can show on such devices anyway.
Blog pages seem to have standardised on a single central column between a half and two thirds of the viewport width. Text sizing covers a huge range from ~12pt up to 16pt or even 18pt.
It would be nice to see some real evidence about the effectiveness of single-column blog layouts, but first we'd have to choose some plausible alternatives to compare them with. There don't seem to be many "standardised" ones today, as other heavily text-based sites that use things like multi-column layouts tend to be in fields like news or e-commerce, where they aren't trying to present a single piece.
It would also be interesting to see a proper study about the effectiveness or otherwise of very large fonts and of thin/light fonts, as widely used on trendy blogs today. I suspect they would not be a resounding success, but I have nothing beyond anecdotal evidence to back that up.
Much as I love beautiful typography, I think it's only a deal-breaker when it goes horribly wrong.
Sadly, that is true of much design work. When you get it right, your site works well and no-one notices. When you get it wrong, it can be disastrous. Such is life. :-)
This article is a badly assembled collection of other people's ideas. Taking most out of the content out of its original context is why it doesn't make much sense.
I agree. It seems very heavy on pictures, and light on explanations or reasoning for the rules given.
I find a much better resource is "Butterrick's Practical Typography"[0], which is a very accessible. If you want just the absolute bare essentials, the first section of the book/site "Typography in 10 Minutes"[1] is fantastic.
This article falls for one of my major designer pet peeves: using heading tags as style tags.
Having a fixed relative ratio of font sizes for h1-h6 makes no sense because heading tags (as all html) are structure, not style. They are used to indicate the relative importance of heading text within a page and/or section, and should have a semantic css class appropriate to their role applied.
Depending on how a page is structured, a h2 may be a section heading, or an article heading, or a page sub-heading, or many other things, and each of those roles may call for very different styling relative to a h1 page heading.
Lots and lots of typos in this article. I eventually clicked off because it was getting too distracting. I would suggest to the author that proper grammar and punctuation is even more important than typography.
Realising that different font sizes need to be in proportion to each other (e.g 3:4 or golden ratio) made the cake for me when I briefly studied typography a while back. This article touches it as well.
Although the article immediately loses points for proposing an absurdly precise ratio for font sizes based on a mathematical constant whose interesting properties are utterly irrelevant here.
What matters is that your range of sizes are visually equivalent or clearly distinct when you need them to be, and that the text looks good at each size in your chosen fonts. Generating a geometric scale of 7 or 8 different sizes by just multiplying some base value by a random ratio will not achieve those goals with any screen fonts I have ever worked with.
This was a good read - i struggle with fonts, and found it insightful. I'm always big on usability but its interesting to think that in the end they're often readers above all else, and to optimize around that.
But I do not agree with paying for a webfont library - Not that its a bad idea, but its likely not appropriate for most people.
Google fonts is good - if you stick to the popular ones its hard to go wrong.
I also use this to get some ideas for combinations, all from google-fonts: http://femmebot.github.io/google-type/ if you suck at typography but want your site to look nice, this is a great way to clean things up without much thought.
For me, I've tried to focus on the tone, feeling and readability when looking at fonts. You have to really trace over the letters and feel everything out - or compare how different fonts portray a given letter and which style you want. Also, what font weights are available? if you want bolder or thinner text you'll need a font that has several weights - not all do.
I feel that it can be argued that paying for a font library is a good idea. It is far cheaper than buying individual fonts, which can get expensive quickly. I feel that the Typekit library is ahead of the Google library. The Google library always has felt very stale and bland to me. The Typekit library has a better variety if they dont have as many available fonts as the Google library.
Also their systems to include the fonts into your pages also eliminates the headache for many people of how to include the various font files for a particular family, as well as by which method to include them.
That github link is very useful for people getting their feet wet in typography and seeing how things work together.
You're not wrong - its just that most people aren't THAT serious about it. People that pay for it, or even think about paying for it, give more focus to that area. But for many devs that's simply not going to happen. They'll just go with whatever is free, and to be honest thats perfectly fine.
I would say, if you want to take your sites typography to the next level... pay for a font library. But if you just want it to be better than defaults, plenty to be had for free.
I would say, if you want to take your sites typography to the next level... pay for a font library.
That was the theory, but I'm still waiting to be convinced about it in practice. I check in on all of the major rent-a-font services from time to time, and I'm rarely impressed by their results.
Consider TypeKit's home page. Personally I would not consider some of the fonts and typography they use themselves to be acceptable for professional work.
For example, they're currently using Adobe Clean for a lot of the text, but it has more hinting glitches than an excited child the week before their birthday. They get away with it -- up to a point -- because many visitors probably still have a default browser font size of 16px, but if your default is a bit larger or you zoom the page, the text rendering is awful. (Actually, their whole layout breaks if you set your default font size a bit larger, but that's a separate problem.)
Notice how in the font showcase section, under "THE BEST ARE ON TYPEKIT", all the examples are actually screenshots and almost exclusively of very large text? What happens if you actually look at the samples of a popular Adobe font, say Minion Pro, which they feature there? Well, in tests based on TypeKit's own specimen screen, 3 out of 3 main Windows browsers render it with nasty weighting issues, and even significant gaps in the letter forms in narrow areas. This isn't a problem with either Minion Pro or the hardware I'm using to display it; it renders just fine at the same physical size in InDesign or Adobe Reader. It's a problem with Minion Pro served as a web font by TypeKit.
The quality of web fonts from Cloud.Typography generally seems to be better, but again, even their own home page shows plenty of fonts that either appear blurry or have hinting problems and appear with uneven line weights, uneven spacing, counters closing up, etc. The blurring might be acceptable to Apple users who are used to that style of rendering, but unless your target audience doesn't include anyone who uses other platforms, it's going to look very odd to a lot of people. The other hinting glitches might be unavoidable results of trying to render fonts designed for print faithfully on screen, but they are glitches all the same.
I just don't understand why anyone who cares about the quality of their work would voluntarily choose these options, and pay for them, when you can have similar or better looking rendering for free with native system fonts on most platforms these days and with several of the standards from Google Fonts if you want a change.
Whenever I give web typography advice to people, I tell them they should listen to me because I'm a huge type nerd, but I also tell them that they shouldn't listen to me because I'm a huge type nerd.
For me, Typekit is a godsend, but the fact is that for most people it's not necessary.
Man, I can't believe I'm feeling this cranky on Friday but this is just rubbing me all sorts of wrong ways. I really like the author's intent here. Getting more people to care about type is great and can make a real difference in the usability of the world. But, as with type itself, the devil is in the details. And in the details, this post really falls short.
This is a common problem with designers. They are a lot of people who are good designers, but few are articulate about how they do design. For most, they have just internalized it and go by intuition. They can do, but can't verbalize how they do.
There's nothing wrong with that, but if you're writing about typography, it's not enough to be a good designer. You must also be a good communicator about design.
> Now since the chief design language of the web is text,
> every web designer should first and foremost comprehend
> the art of typography.
The title of the article is "for non-designers", yet it seems to assume the reader is a designer.
> So, why should one design a web page with a particular
> device range in mind when he can better target what’s
> really important for his user? Design for the reader
> not the device.
I do a decent amount of responsive design and spend a lot of time thinking about the device. That's because the device is my design's window to the reader. The most readable type on a 30-inch 96-ppi display on your desk is very different than on a 4-inch retina screen held in your hand.
You have to think about how the reader will see your design on their device. You need to consider the entire path from CSS to neurons firing in eyeballs.
> mcuh
This is just the editor in me, but it drives me crazy when posts about quality design are riddled with typos. Quality is a key component of good design.
> Use a leading that’s too small, and the paragraph is
> hard to read. Make it too large, and your reader will
> have a hard time jumping to the next time.
Narrow leading is hard to read because it makes it harder to scan to the next line. When lines are near each other, it's easy to skip too far down or not far enough while your eye is scanning to the left.
Too large leading doesn't have that problem at all. It's just that when your leading is too large, you waste a lot of space and it can make the paragraph not feel like a single conceptual entity relative to other things on the page.
Also, "time" should be "line".
> Like in the case of the leading, measure, which is the
> length of one line, also has a soft spot. This soft
> spot means 45-75 characters per line, value which helps
> the reader keep a pleasant and natural pace while
> reading without being interrupted too often by line
> breaks or getting impatient to reach to reach the end
> of the line because of its length.
The author means "sweet spot". "Soft spot" means something else. Again, the explanation here doesn't make much sense.
Long lines don't cause "impatience". It's just that, like narrow leading, they make it harder to scan to the next line. If your eye has to move farther to reach the beginning of the next line, there's a greater chance of miscounting.
The problem with short lines isn't really that they interrupt—we're pretty used to scanning lines. When you have short lines, a break before a long word is likely to be a larger fraction of the overall line length. With a narrow column, breaking on a long word can leave a big chunk of whitespace on the previous line.
That will either cause a really ragged right edge if the column isn't justified or blobs of distracting whitespace and rivers in the middle of the column if it is. Look at how distracting the wide variation in line length is in the narrow column example compared to the wide one.
> Kerning solves this problem by manually adjusting the
> space between such pairs in order not to convey the
> right meaning.
This is true, but you generally should not be manually kerning fonts in web design. The font itself contains kerning pair information. All you need to do is pick a font where the typographer did a good job with this. (This is one of the things that really sets great fonts apart from mediocre ones.)
> it’s another area where you can vastly improve
> legibility in some particular cases.
Tracking can be used for nice effect for things like headers and navigation, but you generally should not mess with it for body text. If you can make the text more legible by changing the default tracking, that font already has bigger problems. The type designer likely put more thought into the tracking than you did.
Where tracking is useful is changing the color—relative lightness or darkness of a blob of text—for things like subheadings, asides, etc. It gives you a way to control emphasis of text separate from changing its literal color (RGB values) or weight (line thickness).
It was really overused in the 90s so these days, most designers are more conservative about it. (Remember when every design l o o k e d l i k e t h i s ?)
> Almost every modern web page uses at least two or three
> to enhance it’s structure. For example, you can align a
> big heading to the right, grid-based text should be
> centered, and usual paragraphs can be left-aligned or
> justified.
Please don't do that. I don't even know what the author means by centering "grid-based text", but if you mix alignments like this, your reader will likely hate you. You can occasionally do something nice with right-aligned headers. But left-justification is the right answer almost all of the time.
The author also confuses alignment and justification, which are separate things. (Though CSS does sort of confound them.) Justification just generally doesn't look good in browsers and requires a more sophisticated line-breaking algorithm than the web supports. Look at all of the knobs something like InDesign gives you to justify text.
On the web, just align left (i.e. ragged right) and that will be the most readable solution almost every time.
> Getting these values to work well together is not an
> easy thing, but an idea might be to use the golden ratio
> between consecutive sizes with manual adjustment where
> necessary.
There's absolutely nothing magical about the golden ratio. Using any consistent ratio (i.e. making each size a constant multiple of the previous size) will pretty much get the job done. I aim for somewhere between 1.5x to 2x.
> A natural and pleasing size variation will make a web
> page beautiful on its own while keeping everything nice
> and legible.
Well, sure, but that's a tautology. That doesn't tell the designer (or non-designer) what to do. A couple of tangible guidelines:
1. Don't use more than a couple of sizes.
2. Use size to indicate structure.
Readers will automatically associate size with hierarchy so do that deliberately. Headers are bigger than subheaders are bigger than body is bigger than asides. Make the most important stuff (either content or for understanding the structure of the writing) biggest.
> Capital sins of type setting
> - Text sizes
> - Lazy handling of titles and subtitles
> - Text blocks that are not split up into enough small,
> scannable, digestible parts
> - Indiscernible links
> - Text is not treated as an interface but as decoration
> - Fancy navigation drawing the attention from the actual
> content
> - Lack of active white space
Wait "text sizes" are a sin? Should you just have unsized text?
Use of whitespace is the key to great design, but the author doesn't provide any guidance on how to use it.
> Rely on quality fonts
>
> Prepare some text and read it–do you like what you see?
How do I know what a quality font is? If I can trust my own judgement, I don't need this article, do I?
> When it comes to fonts, workhorses are all the rage.
> They’re like the AK47s of typefaces.
The author doesn't define what a workhorse is, and then uses a metaphor that is both mixed and wrong (though I do like the image of a machine-gun toting horse). AK47s are popular because of their uniformity. But a workhorse type family—assuming the author means one with a variety of styles and weights—is useful specifically because of its variety.
> They’re great also because they come in a huge variety
> of weights and styles (bold, italic etc.)
Well, that's the definition of a workhorse typeface, isn't it? If it didn't come in that variety, it wouldn't be a workhorse to begin with.
I might write an article about this, but in the meantime I'll ask for any thoughts here. I've noticed text size on the web has gotten enormous. I very often scale down websites I find on here to 50 or 60% zoom to get the article text size to be reasonable. Has anyone else noticed this? Is there some reason for this? Was there some design convention I missed where headline text size is appropriate for article text?
Web designers realised they were excluding very large numbers of people by using tiny fonts. They decided to be more inclusive. The old cry "Just zoom in" excludes a bunch of people.
The new cry "Just zoom out" is less discriminatory.
In general I prefer big fonts with a 1.5 line spacing.
Pixel density of desktop displays has been increasing pretty much forever, but web standards don't take that into account. A 16px font today subtends about the same angle of your eyeball as 12px text did ten years ago once you take typical displays sizes and resolutions into account.
Retina mobile displays further this, though there the browser does apply some scaling to take the greater pixel density into account.
1. For far too long, many web sites used sizes that were too small. Body text at 12px or 14px just isn't easy for a lot of people to read in most fonts, even if a 21-year-old designer with perfect eyesight and a good quality monitor has no trouble. But the trend-obsessed design profession tended to stick with what it knew, even when sensible people were objectively pointing out how bad the common practice was at the time. Now everyone got the memo, but the same trend-obsessed industry is fixated on giant text because it's what "everyone" else is doing.
2. On current high-resolution mobile displays, the physical size of text for a given CSS size is often smaller than on a desktop or laptop screen. Lots of people are advocating so-called "mobile first" design, and so larger font sizes follow to improve readability at the default size on mobile devices.
3. Web fonts are all the rage, but many of them just don't look very good, even the ones you get charged to use. Often this is because are trying to emulate print fonts that were never designed with a relatively course pixel grid in mind, unlike classics like Verdana and Georgia, the newer Microsoft C-fonts, and analogous native/UI fonts on other platforms that were very much designed with on-screen use in mind. That makes it hard for a lot of web fonts to look good at small sizes even under ideal conditions. And conditions usually aren't ideal, because often these fonts (again, even the commercial ones) are hinted in ways that lead to a poor appearance on-screen for at least some users. This is not helped by the very different renderings that the "same" font can wind up with on different platforms. These fonts don't look so bad on high-resolution screens like newer smartphones and tablets or Apple's Retina laptops, but to look even acceptably good and moderately distinctive on the lower-resolution screens of desktops and laptops they need to be scaled up to see more of their details.
On top of those factors, probably most users now understand and routinely use zooming and it's supported in every major browser, so setting a font too large isn't a huge risk to usability the way setting a font too small used to be. So we have a correction to a long-term trend of using fonts too small, a trendy industry that has overshot the mark, and no immediate compulsion to fix it because users just zoom out exactly as you described.
This was a great article, but the "This site uses cookies" warning struck me as a little disingenuous. It seems like there's a choice to not accept cookies, but if you click "Decline" it just kicks you out to Google. It's nice that they ask but the options really should be "Accept" or "Leave". Maybe this is standard, I usually just ignore those things.
Session cookies require no notice. Only persistent cookies and 3rd party cookies require notice, and there are no features on this site that should require them (besides remembering an affirmative response to the cookie warning). In fact there are no features that should require any cookies, save them for logged in users.
It's mostly an academic issue at this point -- European governments seem to have realised that this law is very poorly written and even the governments seem to have little interest in either following it themselves or having the relevant authorities enforce it.
That said, I think you're mischaracterising what the letter of the law says. It's not session cookies that are exempt, it's (paraphrased, read at your own risk) cookies that are essential for the normal operation of the site. In practice this probably means session cookies for things like logging in or shopping basket contents, but that's coincidental.
Laws are judged by their effect, not their intent.
Prohibition didn't intend to create organized crime, but that was certainly an effect of it, and that effect influences whether or not it was good law.
> the "This site uses cookies" warning struck me as a little disingenuous. It seems like there's a choice to not accept cookies, but if you click "Decline" it just kicks you out to Google.
With JavaScript and cookies blocked, the site worked fine. I never saw a warning.
> But if you think about it, this consumer is a very specific type–he’s a reader. The number one reason he’s visiting that web page is to read the text on that page, irrespective of the device he’s reading it on.
1) the author suggests a range of 120-150% of leading; the upwards bounds of this is far too much (too much leading causes the eye to skip down a line). Bringhurst's suggestion is much lower---around 12/14pt (Bringhurst is referencing print, not online, so an argument could be made for slightly more leading, but not 150%).
2) The discussion of kerning doesn't mention kerning tables that are built into the font: one doesn't manually kern body text.
3) Tracking, aka, "letterspacing". There's some debate about it, but one doesn't typically letterspace lowercase (body) text (the exception may be very small text). F. Goudy may have said that "anyone who letterspaces lowercase would shag sheep" http://practicaltypography.com/letterspacing.html