Simple rules for good typography | Hacker News Reader

Simple rules for good typography

freddesign.co.uk

53 pointsmadh36 comments

Bullet points, should ideally be in the page margin. Not indented.

Really? To me that's "ugly", as in "that's not how it looks anywhere, so it jumps out at me". The reason given in the linked text seems to be a design one ("it looks ugly") and not something to do with usability (which is a major goal of typography).

The description in the article makes both look ugly, because there isn't uniform line height. This might at least provide a slightly better visual comparison:

      This is a paragraph of text, and it
      continues onto the second line here.
    
       - This is one bullet
       - This is a second bullet
       - This is a third, longer bullet.
    
      And it ends with a final paragraph.
      
      -----------------------------------
    
      This is a paragraph of text, and it
      continues onto the second line here.
    
    - This is one bullet
    - This is a second bullet
    - This is a third, longer bullet.
    
      And it ends with a final paragraph.

Independently of line height, it still looks much better indented.

As far as I know, the rationale for placing bullets in the margin is the same as the one for hanging punctuation: we've trained our eyes to return to the beginning of the line and breaking up that rhythm forces you to work a little harder when reading.

That said, sometimes it can be worth it to sacrifice ease of consumption for the extra hierarchical boost you can give an element with a more distinct separation from surrounding copy.

Also, with client-side rendering on the web, I think many of the "rules" of typography just don't apply in the same way that they do to book design, etc.

The post was a good beginner's guide to typography though!

Bullets are supposed to break up the natural flow. That is what they are there for! If you look at nicely typeset material, the bullets are typically indented slightly rather than lined up exactly with the left margin, which gives a visual cue like the indent on the first line of a new paragraph (or a vertical space between paragraphs).

Hanging quotes fully in the margin is poor, too. The point of hanging punctuation is to optically align the margins so that they look straighter to the reader, because small glyphs like quotation marks and hyphens don't fill the space as much as typical letter forms. The idea is to avoid a distracting "bump" where the text appears to have a small indent, even though mathematically it doesn't; thus the technique complements the sort of thing you should be doing with bullets. But this is a subtle effect, and hanging punctuation fully in the margins like that certainly doesn't achieve this goal: in fact, it's probably just as bad as not hanging at all. (If you want to do it as a stylistic/aesthetic thing on block quotations or something, I'm not complaining, but this article presents it as an absolute rule for normal text.)

The whole Fibonacci/golden ratio thing is just silly, too. Who says these things have a natural elegance? Where is the research, or even the study of more than the three people in the room, to back this up?

Then there's what should have been a good point about emphasis, which completely misses the point of different typographic effects. Italics are subtle effects that show emphasis as you read without grabbing the attention, so useful for indicating things like stress or distinguishing foreign words. Heavy type, on the other hand, affects the typographic colour and draws the eye across the page. This makes it very bad for the uses of italics above (which are unhelpful out of context) but excellent for highlighting key words being defined or headings. Underlining in printed material is almost always a mistake (it distracts the eye and slows reading speed, and is unnecessary when we have proper italics available anyway) and on web pages should probably be reserved for hyperlinks since anything else clashes with user expectations.

I'm sorry, but this really isn't a guide to good typography at all, beginner or otherwise. It's just yet another list of dogmatic rules that have no sound basis, and the typography world has more than enough of those already.

I disagree. I think it's a nicely succinct collection of relevant guidelines that, if used by a beginner, would yield a more aesthetic result than if they just winged it. I'd rather someone read Bringhurst (there's a cool version of the book applied to the web here: http://webtypography.net), but unless a person is serious about getting into design I doubt they'd spend the time.

I'll concede it's not the best - but most of it is decent advice. The only real exception I take is with his suggested practice of underlining text for emphasis; obviously that's a no-no, especially on the web.

Also, I think we can reduce the author's assertion that one should use Fibonacci numbers as a model for type size down to something more basic and useful: choosing to use a mathematical sequence to inform structural design decisions can assist one in creating work that has stronger internal relationships. If there's a rhythm and harmony to type size that is congruent with the spacing of the underlying grid, I think the work will tend to feel tighter and more elegant than if there's no underlying intelligence informing those decisions. Not to say that one can't shoot from the hip and win a few, or that a little chaos isn't beautiful - but using a regular system will tend to produce more regular results, particularly if it's one (like Fibonacci numbers) that are visible in the world around us and have been informing art for hundreds of years.

Common sense says that a culture's views on what is aesthetic and acceptable are largely informed by its environment and history. I don't think we necessarily need a study to tell us that the Fibonacci/golden ratio thing has a certain inherent beauty; the evidence is out there in all the art that's been produced using those numbers as a foundation.

Perhaps we will just have to agree to disagree then. Personally, I would rather someone did wing it (or just use the defaults in their application/browser) rather than shove all kinds of marks out into margins, force overly small type with overly narrow leading, set lines too short for optimal reading in any standard book or screen format, use underlining for emphasis, and start choosing things like text sizes based on arbitrary mathematical patterns rather than what is most legible and readable, all of which are the direct advice given in that article.

I've seen this recommendation quite often. Each time it looks odd to my eye. Indenting nests the bullet points, which I've always seen as a feature.

Please don’t use underlines as emphasis on the web. That’s just confusing. Underlines should be used for links, nothing else. I think that should be self-evident but some people still get it wrong. Clicking on underlined words – expecting further explanation or additional material – with nothing happening always makes me sad :)

(As an aside, I personally don’t like underlines even in print. I much prefer the subtle use of italics. But that’s very much a question of taste.)

Most style guidelines strongly recommend against using underlines in print. Underlining used is for emphasis in handwritten material, because it's difficult to hand-write italics, much less bold. In a printed context, it just looks... unprofessional.

Of course, this is a stylistic preference and not a normative linguistic imperative, because I detest such things. But it's a very common one.

Kerning is the spacing between letters. Again, like leading this seems like an obvious one, but still needs careful attention. Consider if your typeface generally needs spacing out more, or if it looks better with tighter kerning.

It sounds to me like the author might actually be talking about tracking, rather than kerning. From wikipedia: "While tracking increases the space between characters evenly, regardless of the characters, kerning increases the space based on character pairs".

I think he means kerning, but the way he describes it, he gives the definition of tracking... and if we're talking about this in the context of the web, well, you really can't kern on the web. Adjusting the tracking (with letter-spacing in the CSS) is about all you can do. So really, it depends on the font. If the font has nice ligatures, I think it often looks better left as-is. You wouldn't encounter this problem with proper kerning... which is why I hope that's what he's referring to. :)

The author is definitely talking about tracking. Kerning has to be done within the font/typeface itself, and yes the standard web fonts in major browsers/OSs are kerned.

http://en.wikipedia.org/wiki/Kerning

But his example is two letters, rt in Helvetica. Perhaps he's referring to create text as an image for headings (bleurgh!) like in his very ugly background graphic.

I feel as if the trend in type size for body text is shifting towards larger text. I just see it happening all over the internet on websites I visit. A few years ago, 10-12 pt used to be the norm, but now I often see 14pt being used.

Monitors have a much higher resolution these days. When a few years back, 1024x768 on 17″ (75dpi) was the norm, nowadays 1680x1050 on 22″ (90dpi) or 1920x1200 on 24″ (~94dpi) are mainstream. (I'm even at 125dpi with 1280x800 on 12.1″)

No wonder a larger font size is needed to get the same experience as a few years ago. I find myself scaling the font when reading longer texts, because too many fonts are just too small.

Decreased readability is a subtle byproduct of the increasing number of monitors, as well.

I have three monitors, and because of how they're arranged, the distance from my chair to the monitors is 3-4" back from where my single monitor used to be. 3-4" makes a noticeable difference.

Before that, I had a huge CRT monitor, which sat closer to me by necessity because of the tube size. Without the tubes, we push monitors back to free up desk space. This also increases the distance from your eyes to the monitor.

Lastly, there's the issue of laptops versus desktops. What is comfortable for me to read on a laptop sometimes looks microscopic on a desktop. If you design web sites on a laptop, make sure you check the look on a desktop.

Agreed. This layout felt so refreshing when it was on the frontpage earlier: http://evhead.com/

Body copy is 16px on the homepage, 17px on post pages.

I agree. I still like 9-12pt for print, but for the web, the trend has definitely been toward 12-15pt and it has been a change for the better, IMHO.

I'm beginning to see the opposite. I find myself zooming in most web pages, because otherwise I can't read comfortably. I had to zoom thrice the page with the article in order to read it (I have a 1920x1200 24" monitor).

Fully-justified text can actually be more readable than ragged-right (although ragged-right is definitely better for some contexts like narrow lines, and can apparently help readers with dyslexia). I believe this is because justified text makes it easier for the eye find the end of the next line and then track back to its start. Here's a reference to one study in which justified performed better than ragged-right (there are others too):

http://eserver.org/courses/w01/tc510/hades/kaltenbach1.htm

The advice to use ragged-right is almost always correct on the web, where it's not generally possible to reliably hyphenate or manually typeset your pages. But in print I would use justified text more often than ragged-right. There are reasons that almost all books and newspapers are set justified.

You can do a lot better hyphenation than most people realize.. e.g. http://code.google.com/p/hyphenator/

The main problem with something like hyphenator.js is that to do a proper job, you first have to detect the language. I can't read Polish, but I imagine trying to hyphenate Polish text with an algorithm designed to work on English wouldn't work well at all, and ditto the reverse.

If that's the main problem, then I've got to use it more often!

I'm guessing most websites know what language they're serving up.. and for those that don't, you can detect it reasonably well in javascript too (e.g. http://whatlanguageisthis.com/). I'm guessing the cost of misidentification is a minor one, and if it's not, it seems easy to add a confidence output to a language identifier.. just don't hyphenate when you're not sure.

I would've said the main problem is you add a big JS file to your requests, but my web ideas are probably stuck in 1994.

Regardless of hyphenation browsers could also do a much better job at implementing line breaking (affecting ragged left, right, centered, and justified text.) I've done some experiments with implementing the Knuth & Plass line breaking algorithm (as used in TeX) in JavaScript, and it seems to outperform the browser line breaking algorithm on quality. I guess browsers use a simple line breaking algorithm for performance, but I hope that choice is revisited some day because a good line breaking algorithm makes text much easier to read.

If you're interested you can find my experiments at: http://www.bramstein.com/projects/typeset/myfit.html

Maybe I'm getting older, but I much prefer a font size larger than 10-12pt.

For the web, I strongly agree. I like to site back, a few feet away from my monitor, when the font is 12pt or any less I have to lean in.

13-14pt are nice, and there a bunch of sites with body copy set in 15pt+.

It's easier to create a visual grid with smaller font blocks tho. But.. that just benefits looks.

Indeed. Those are the font sizes I'd go with doing print typography. On the web I almost always use 14-16px for body type. It's much easier to read.

This is exactly why my[1] app (which will be going into beta Any Day Now) uses clear, legible, 12pt text, and it supports zooming up to a shockingly large font size without breaking the layout.

Doing this has had an additional benefit: We can't just cram everything on to the screen, and instead need to think more about whether or not we're showing information that is truly important.

[1] Okay, my-plus-cofounder. :)

Maybe it's just me, but that blog doesn't look right unless the browser is > 1600px wide.

Anyone have a simple rules for good web design link handy?

Interesting that he suggests no more than three fonts; the rule when I was poking around was more like two, one for headlines (if you must) and then a good proper body font for almost everything.

What about blockquotes/pull quotes and the like?

I usually set those in the body text in italics or something, perhaps with the display version of the typeface if I am so fortunate. But I guess that's not the way people do it these days.

Good post! When you think about it, most of these are brain-dead and so intuitive, that you'd think everyone follows them by default. Often, I see over-use of emphasis (italics, bold, or underlined) and abrupt font size changes without reason.

Seems like there is a contradiction. What set of font sizes meet the two constraints (3-4 different font sizes and size them according to the Fibonacci sequence / Golden Ratio) and look great on a web page?

The fibonacci sequence sounds good in theory but I can't imagine this actually looks nice in print. Or notably more 'natural' than using standard sizes, for that matter.

Reply on news.ycombinator.com