Interactive Guide to Blog Typography | Hacker News Reader

Interactive Guide to Blog Typography

kaikkonendesign.fi

299 pointsstevoo45 comments

The interactivity here makes this guide a really great resource. People who would normally just scan (Like me) end up clicking the buttons on each step and can then read the sections that sparked an interesting change.

Would be nice to see it extended with some screens on using constructs like footnotes/sidenotes/captions etc.

I like the "p + p" trick to not text-indent initial paragraphs:

http://kaikkonendesign.fi/typography/section/7

Looks like that's an "adjacent sibling selector":

http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

And it looks like it's well-supported since IE9:

http://www.quirksmode.org/css/contents.html

I'm often using it to select stuff like h2+div { ... }, label + textarea { ... } or (LESS-style) label { & + input, & + select { ... } }.

I'm always conflicted on reducing contrast by making the text very slightly grey instead of black (or the background very slightly grey instead of white).

The problem with this is, as so many times, that on the web you have no control over what people use to display your content. On an awesome display with tons of contrast I would very much agree: straight black on straight white can be unnecessarily harsh and toning it down a bit (a bit being important here) makes everything look more pleasant.

However, on a bad display with low contrast further reducing contrast can be a bad idea.

On balance I would argue that screen technology is by now good enough to allow for slight reductions in contrast that at least have no ill effects in the vast majority of cases and have a positive effect on above average displays.

Oh, and another advantage of not using straight white or straight black is that you can add color (a slight tint, don't touch color if you are inexperienced) to it.

(Also, I would recommend searching out the worst display you can find to test your designs. That helps with more than just whether you picked the right contrast.)

I don't know much of the science behind this, but monitor backlights tend to exaggerate pure whites and blacks, artificially creating contrast that wouldn't be expected by simply looking at the color value.

This becomes especially visible if the user is in low-light conditions (eg in a dark room). The apparent difference between blinding white light (hsl(0,0,100)) and a lukewarm almost-white (hsl(30,10,96)) can be startling.

http://hslpicker.com/#ffffff (0, 0, 100) http://hslpicker.com/#F6F5F4 (30,10, 96)

On an even awsomer and properly calibrated display, it also reduces the contrast below acceptable levels a lot of the time. (The high brightness sells in the stores, but it's pretty horrible for actual use.)

I was also talking about properly calibrated displays. I should know. I’m using one. (Though realistically, no one uses a calibrated display. They can be ignored for all intents and purposes.)

I find that if you use a good display, straight black on straight white is just too harsh for me. Slight reductions in contrast do most certainly not and never will lower the contrast below acceptable levels on those displays. They do have the ability to display plenty of contrast for the human eye to work with.

(Did you only want to annoy me with your pedantry or what’s going on with you?)

This is just lovely and very well-timed for people starting new year's resolution blogs next month :) Congratulations to the author.

Would supplement it with this: http://www.pearsonified.com/2011/12/golden-ratio-typography....

And the super-handy related tool: http://www.pearsonified.com/typography/

As someone with a background in both mathematics and typography, I'm still trying to figure out how people come up with that sort of nonsense.

There are times when constants like the Golden Ratio are relevant and the exact value matters or some useful property doesn't apply. This is not one of those times. There is absolutely nothing "perfect" or "optimal" about the typography you'll create from this "solid mathematical basis", no matter how much TeX you use to typeset your equations or how many colours you put on a chart. In fact, with a lot of popular web fonts today, you'll get very dubious results.

That entire article is just a glorified troll, which I'm only responding to in case anyone impressionable reading your post otherwise thinks it's worth anything.

Ok, ok, congrats on a very clever response, but you're missing the point. The key thing (and why I prefer the related tool, linked above) is whether or not the result looks good.

Is the article pseudo-intellectual and kind of wanky? Of course it is. It's the internet.

Does the resulting typography look good?

Is the article pseudo-intellectual and kind of wanky? Of course it is. It's the internet.

And yet there are many good articles on typography you could have linked to instead: try the typography section in A List Apart or even some of the more recent stuff on Smashing Magazine for basic ideas in small doses, or read the likes of Matthew Butterick for a lot of thoughtful and more detailed comments.

Does the resulting typography look good?

No, it often won't. That's why I challenged your link.

What a poor comment and wholly unnecessary. Even though I agree that the golden ratio article here is fanciful to a fault, the whole premise here is to put some thought into typography and calibrate text to look its best.

The math here is entirely relevant: knowing what the measure / font size should be, or at least figuring out minimum and maximum dimensions, that makes a difference. Got a responsive text container? Make sure it doesn't become hard to read. And the type of font you use (different fonts have different metrics, character widths, etc) makes a difference, it adds considerations that can lead to better design. People should put more thought into making their texts as readable as possible - it benefits everyone.

The waxing lyrical about golden ratios is a cheap way to drive interest and add allure, it gets the eyeballs. I think it's clever and it makes an otherwise dull topic interesting .

> Even though I agree that the golden ratio article here is fanciful to a fault

This is, dare I say, the mistake. What's emphasised in those articles about the golden ratio is that it is golden where what actually matters is that it's a ratio, and therefore creates patterns and introduces consistency.

Really great guide that seems to nail some of the basics. I can tell the difference between a great reading experience and a mediocre one, but I can never seem to pinpoint the reason for that difference.

Is there a tool that "evaluates" a page for some of these typography basics on a live website? Maybe a bookmarklet. I know at some point it becomes a matter of looking with a trained eye and personal preference, but many of the parameters could easily be computationally evaluated. E.g. measure, line height and paragraph spacing, color/contrast, maybe even visual hierarchy.

This is awesome. I don't know much about typography but every time I try to learn something, I give up pretty quickly because of the overwhelming amount of (boring) information. I love how this guide is set out in easy to read and consume chunks that flow well from each other.

Even knowing some little things about typo, this guide is a pretty good example for an interactive tutorial.

Thanks to the author, as it reminded me of some things, I should change on my personal site.

Can anyone give some tips for using text on a dark background?

Don't, because my eyes hurt.

Dont use too much contrast, instead try different hues.

I've been wondering why people seem to prefer to code with a dark background, but read prose with a light background. Or am I wrong?

When coding, you usually fine-tune your editor color scheme: light text colors on a not too dark background are relaxing for my eyes.

When reading, instead, you cannot easily change the color scheme of web pages with black background and painfully high contrast.

Example of a website with color scheme alternatives:

http://www.textfiles.com/directory.html

«AAAAH! MY EYES! Click here if you prefer a black and white color scheme.»

http://www.textfiles.com/wdirectory.html

«This is a special "black on white" version of the directories in textfiles.com for people who, for various reasons, have issues or trouble with the green on black color scheme of the site.»

So it would seem that the ideal color scheme for a website would be moderate contrast with light text (perhaps in various colors) on a dark background, rather than what appears to be the web designer consensus of dark text on a white or nearly white background.

I don't know. The two scenarios differ because when coding you often stare at one line, whereas when web surfing you often skim the text. It sounds as a subjective feeling.

I prefer not to code with a light background because it hurts my eyes. Strangely enough, my eyes don't complain when typing with a white background in a word editor.

Maybe it's because text editors come with lots of color?

A good general rule of thumb is to use a heavier weight for the light text, which makes it more legible. You might also think about picking a typeface which has good contrast in the letterforms in this kind of situation.

my god man, i guess it's just me but the contrast on this page is so bad i can't read a damn thing (it fades to gray 1 second after loading)

Did you try out the interactive part (by clicking "Begin")? The greying is a cue that the right column is actually the presentation itself.

This is probably a good argument for using more nonsensical lorem ipsum text.

Very nice, I am just missing some references to some of your claims, for example that 65-90 characters is the perfect width . I can of course google it and find it but I think it would still be good to include it on the site.

I think he mentioned 50-80 as the ideal measure. Here's one source that's pretty close in agreement (45-75, with 66 as an ideal): http://www.webtypography.net/Rhythm_and_Proportion/Horizonta...

The measures you can try with the buttons (40, 65 and 90) are to see how the text looks on the edges of these guidelines (which I've written as 50-80 characters).

It's not a scientific number by any means, rather a general "consensus" derived from all the typography literature and articles I've read. The measure is not as simple as it seems, though; Readers seem to prefer a shorter measure while reading speed is actually increased with a longer measure, like shown in this study:

http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

I just started working on side project for a better blogging platform for myself and this information will really help be have some good defaults for the app. Thanks for this very informative and very well done demo.

Excellent guide! I always wondered about the science behind typography but could never muster up courage to read boring theories. This was quick and fun!

I wish someone created something like that for web design. How to turn a crappy looking website into a great one, step by step, interactively.

Great tutorial.

One question - What's hinting? Wasn't explained as clearly as it needs to be for a tutorial aimed at non-designers.

Wow... that's exactly what I needed for a small site I'm building right now. Thanks, author(s); thanks, stevoo; thanks, HN!

The subheadings should be closer to the paragraph underneath it. Otherwise it looks freely floating between two paragraphs.

Agreed. I'm going to fix this in an update.

The margin under the subheading should be the same (or at the very least not smaller) than the bottom margin of each paragraph, otherwise you end up with the subheadings looking like they're attached to the paragraphs that directly follow them, creating a false hierarchy with a single paragraph rather than a selection of paragraphs. If you want to give each section extra separation increase the margin above the heading instead of decreasing the one below it.

Very nice...

Also I am very happy to see that Twitter Bootstrap has a lot of the things in this site already there.

This is true, although I find the default body text size in Bootstrap way too small, and often wonder if others do too. It seems to fit the "text wedged into elements of a Web tool" use-case it originates from better than longer body text.

Great site, good read. Definitely will come back to it when I design another blog.

An excellent presentation, the interactivity really gets the message across!

This is really awesome! Great site and info!

Section 11 seems to be broken (I popped it open in the inspector). Looks like it's not connecting the toggleBlack method up to the text.

Chromium 18 on Xubuntu 11.10

PS: This is an awesome resource. I've always noticed the things that you talk about but I never knew why I noticed them.

I'll look into it. Thanks!

Reply on news.ycombinator.com