Web typography for non-designers
presslabs.com
presslabs.com
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
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.
By the way, your website is beautiful!
It's worth a read: http://practicaltypography.com/
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:
http://practicaltypography.com/
PS Gill tried to shag sheep and his typography was really rather good.
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.
And Gill's my favourite BECAUSE of his antics! What a weird guy, and so supremely capable of creating beauty.
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.
Do as I say, not as I do.
This is a beginner's guide. You need to learn the rules before you can break them.
Case in point:
http://mesosyn.com/pp-e1.jpg Early Picasso
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).
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.
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. :-)
Yet this article is full of novelty fonts.
Perhaps the author meant to say that script and novelty fonts shouldn't be used for body text.
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.
[0] - http://practicaltypography.com/
[1] - http://practicaltypography.com/typography-in-ten-minutes.htm...
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.
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.
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.
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.
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.
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.
For me, Typekit is a godsend, but the fact is that for most people it's not necessary.
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.
> 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.
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
> 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.
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.
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.
> it’s another area where you can vastly improve
> legibility in some particular cases.
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.
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.
> A natural and pleasing size variation will make a web
> page beautiful on its own while keeping everything nice
> and legible.
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
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?
> When it comes to fonts, workhorses are all the rage.
> They’re like the AK47s of typefaces.
> They’re great also because they come in a huge variety
> of weights and styles (bold, italic etc.)
The new cry "Just zoom out" is less discriminatory.
In general I prefer big fonts with a 1.5 line spacing.
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.
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.
https://github.com/r4vi/block-the-eu-cookie-shit-list
Just add this to your filter list:
https://raw.github.com/r4vi/block-the-eu-cookie-shit-list/ma...
It was intended to forbid using tracking cookies without user approval, and this is the intent of the law. Nothing more.
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.
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.
With JavaScript and cookies blocked, the site worked fine. I never saw a warning.
Is that an error, or is that "by design"? It looks really ugly to me.
I'm using an rMBP with the latest Chrome and Mavericks.
The consumer is also apparently a male.