Simple steps to better typography | Hacker News Reader

Simple steps to better typography

markboulton.co.uk

66 pointsdaralthus21 comments

In Part 2 of the series, the author recommends "hanging punctuation" (no indentation on the left side, bullets and quotation marks pushed out into the left margin) because indentation on the left side "interrupts the flow of text".

But I don't think that's right. When you switch from a regular paragraph to a list, and then back to another regular paragraph, you usually want to interrupt the flow of text. You want the reader to know that what follows is a list, not just a continuation of the last paragraph. Similarly, when you put a quote in its own paragraph, it's usually because you want the reader to notice that what they're reading is a quote from somebody else. Or if it's a novel, you want the reader to know that one person is done speaking and another person has begun to talk.

Texts have structure, and typography should make the structure clear to the reader. Not indenting on the left side at all might make your blocks look prettier, but I would much rather have large margins around lists so that they stand out from the surrounding text. Large gaps and indentations are much more effective at conveying interruption than some symbols in the left margin.

His example of lists as hanging punctuation was poor in my opinion. Lists are a separate element and there should be extra line spacing in front of them to signify this. I agree that typography should be used to better define the structure of the text but I don't think hanging punctuation is a problem. I thought the example was better illustrated here:

http://www.artlebedev.com/mandership/120/

It can be considered a "perfectionist's touch" as it usually takes some form of manual intervention to set up. Hanging punctuation can be thought as the difference between Typophiles and type aficionados.

I never understand examples like that. The point of hanging routine punctuation (or letters and numbers, for that matter) is to give the margins a nice, even look to the human eye. The adjustment is too subtle to notice when reading, but tidies up the overall design of the page.

However, arbitrarily shoving an entire symbol outside the text body doesn’t achieve that. If anything, it is often worse than just mechanically aligning everything: instead of slight indentations, which the reader’s brain will “fill in” up to a point, you’ve now got glaring protrusions, which break the pattern in a way we don’t gloss over so easily.

I think the article you cited gets it right when talking about hyphens: they can usefully move out a little, to even up the “indent” effect, but in most fonts they shouldn’t move over the whole way. However, the same advice holds just as much for any other symbol.

Designer here. I recommend aligning your bullets with the paragraphs above and below for inline text, and hanging to reinforce the grid when you have blocks of content next to each other horizontally -- say, two paragraphs and a list.

I hope this makes sense.

I had the same doubts as the parent poster, and I couldn't make sense of your example. I'm very intrigued, and would appreciate further details.

This is an example I threw together to demonstrate:

http://i.imgur.com/0z73s.png

I hope it helps explain.

Also, lbotos posted an excellent example of hanging quotes and other non-bullet punctuation.

If you find yourself liking typographic details like these, consider checking out The Elements of Typographic Style by Bringhurst. Old editions are cheap, and it's the best book on typography I've come across.

That is perfect, thank you very much!

I was also confused - and this clears it up nicely.

I think this makes perfect sense and is excellent advice! Typography and typographic style do not have rigid rules that exist in isolation but merely guidelines to better display and define groupings.

Mark has a publishing company "Five Simple Steps" (http://www.fivesimplesteps.com/) that has some interesting books. Has anyone read any of the books? I discovered him on the Web Ahead podcast, which I highly recommend:

http://5by5.tv/webahead/9

As someone with a fair amount of experience with design and type I know these posts aren't targeted at me. However, they always read a bit like a quick weight-loss scheme or a secrets of remodeling kind of thing. Perhaps the better analogy would be something like 'Write great Python in five easy steps!' — which would likely never climb very high around here. Specific thoughts on typography are interesting, but these "shortcuts" always bother me since they sell short the nuance of the craft.

I realize this kind of thing is useful to people with little design experience, but I would encourage those people to keep in mind that there's no shortcut to writing great code nor making great design.

A simple rule is your leading should be wider than your word spacing.

As a developer, this is the type of post I find very informative. But, what is leading?

Leading (pronounced ledding) is the spacing between lines of text. It was originally adjusted using strips of lead (Pb) between lines of type; thus the name.

And in our world of pixels on the web you might think of it as the line-height property in CSS.

"The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography."

Is there a good solution to the first problem? I constantly find myself confronted with the problem which font I should use. Is there maybe a service that suggests fonts based on a visual design? Or even based on the 'purpose' of a site?

I find it funny how HNers always want everything to be a "service". It's not a service, but I did write a blog post that might help you out: http://sachagreif.com/more-google-webfonts-that-dont-suck/

The point of the article is that the first problem is not so much a problem and more of an afterthought compared to the more fundamental issues of spacing, proportion, weight, characters per line, and placement on the page, which all equal readability. Once you have considered those, you can more or less drop in whatever typeface you like and then ask yourself whether it improves or detracts from readability and whether it matches the overall tone you are trying to set with your design.

I strongly disagree. These decisions are never independent in practice, but if anything, I’d say the specific font(s) used in a design would influence choices of spacing and layout more than the other way around. For example, I don’t think you can choose leading or justification settings well without taking into account factors like the x-height and typical character widths in your text.

Picking the right typeface is hard, never mind pairing fonts or crafting typographic details.

You should try out http://beta.typecastapp.com — a tool for experimenting with type. It lets you visually compare web fonts from Typekit, Fonts.com, Google Web Fonta then export your work as HTML & CSS (disclaimer: sorry for the shameless plug. I'm one of the Typecast team).

Recommended Tool: Golden Ratio Typography Calculator http://www.pearsonified.com/typography/

Incongruous Feline

Reply on news.ycombinator.com