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'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.
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?)
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.
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.
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.
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.
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.
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.
«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?
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.
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:
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!
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.
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.
Would be nice to see it extended with some screens on using constructs like footnotes/sidenotes/captions etc.