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:
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.
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.
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:
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.
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.
"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?
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.
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).
[+] [-] kijin|13 years ago|reply
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.
[+] [-] lbotos|13 years ago|reply
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.
[+] [-] tiddchristopher|13 years ago|reply
I hope this makes sense.
[+] [-] melling|13 years ago|reply
http://5by5.tv/webahead/9
[+] [-] state|13 years ago|reply
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.
[+] [-] mzarate06|13 years ago|reply
As a developer, this is the type of post I find very informative. But, what is leading?
[+] [-] stan_rogers|13 years ago|reply
[+] [-] cancelbubble|13 years ago|reply
[deleted]
[+] [-] vpdn|13 years ago|reply
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?
[+] [-] sgdesign|13 years ago|reply
[+] [-] liamondrop|13 years ago|reply
[+] [-] paulmckeever|13 years ago|reply
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).
[+] [-] marban|13 years ago|reply
[+] [-] roymabookie|13 years ago|reply