

Interactive Guide to Blog Typography - stevoo
http://kaikkonendesign.fi/typography/

======
michaelmartin
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.

------
whit537
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>

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

------
arrrg
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.)

~~~
stan_rogers
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.)

~~~
arrrg
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?)

------
josscrowcroft
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....](http://www.pearsonified.com/2011/12/golden-ratio-
typography.php)

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

~~~
Silhouette
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.

~~~
pknight
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 .

~~~
lloeki
> _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.

------
cooperadymas
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.

------
dagrz
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.

~~~
sdoering
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.

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

~~~
leephillips
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?

~~~
vanni
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.»

~~~
leephillips
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.

~~~
vanni
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.

------
rciorba
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)

~~~
jrajav
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.

------
gnyman
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.

~~~
tommikaikkonen
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...](http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp)

------
phenomenon
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.

------
um304
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!

------
aymeric
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.

------
SkyMarshal
Great tutorial.

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

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

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

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

~~~
fadeyev
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.

------
cfontes
Very nice...

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

~~~
zootm
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.

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

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

------
morefranco
This is really awesome! Great site and info!

------
indiecore
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.

~~~
tommikaikkonen
I'll look into it. Thanks!

