8 ms·
Interactive Guide to Blog Typography
- dagrz 14y agoThis 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 14y agoEven 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.
- cfontes 14y agoVery nice... Also I am very happy to see that Twitter Bootstrap has a lot of the things in this site already there.
- zootm 14y agoThis 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.
- TeMPOraL 14y agoWow... that's exactly what I needed for a small site I'm building right now. Thanks, author(s); thanks, stevoo; thanks, HN!
- michaelmartin 14y agoThe 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.
- um304 14y agoExcellent guide! I always wondered about the science behind typography but could never muster up courage to read boring theories. This was quick and fun!
- josscrowcroft 14y agoThis 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.php http://www.pearsonified.com/2011/12/golden-ratio-typography.... And the super-handy related tool: http://www.pearsonified.com/typography/ http://www.pearsonified.com/typography/
- Silhouette 14y agoAs 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.
- josscrowcroft 14y agoOk, 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?
- Silhouette 14y agoIs 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.
- rciorba 14y agomy 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 14y agoDid 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.
- morefranco 14y agoThis is really awesome! Great site and info!
- hisyam 14y agoThe subheadings should be closer to the paragraph underneath it. Otherwise it looks freely floating between two paragraphs.
- tommikaikkonen 14y agoAgreed. I'm going to fix this in an update.
- fadeyev 14y agoThe 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.
- gnyman 14y agoVery 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.
- peterevans 14y agoI 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/Horizontal_Motion/2.1.2/ http://www.webtypography.net/Rhythm_and_Proportion/Horizonta...
- tommikaikkonen 14y agoThe 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/LineLength.asp http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...
- lifeformed 14y agoCan anyone give some tips for using text on a dark background?
- vanni 14y agoDon't, because my eyes hurt.
- aw3c2 14y agoDont use too much contrast, instead try different hues.
- leephillips 14y agoI'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 14y agoWhen 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 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 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 14y agoSo 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.
- shaydoc 14y agoAn excellent presentation, the interactivity really gets the message across!
- whit537 14y agoI like the "p + p" trick to not text-indent initial paragraphs: http://kaikkonendesign.fi/typography/section/7 http://kaikkonendesign.fi/typography/section/7 Looks like that's an "adjacent sibling selector": http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors 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 http://www.quirksmode.org/css/contents.html
- lloeki 14y agoI'm often using it to select stuff like h2+div { ... }, label + textarea { ... } or (LESS-style) label { & + input, & + select { ... } }.
- cooperadymas 14y agoReally 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.
- indiecore 14y agoSection 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 14y agoI'll look into it. Thanks!
- arrrg 14y agoI'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.)
- harlanlewis 14y agoI 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 http://hslpicker.com/#ffffff (0, 0, 100) http://hslpicker.com/#F6F5F4 http://hslpicker.com/#F6F5F4 (30,10, 96)
- stan_rogers 14y agoOn 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 14y agoI 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?)
- phenomenon 14y agoI 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.
- aymeric 14y agoI wish someone created something like that for web design. How to turn a crappy looking website into a great one, step by step, interactively.
- TommyDANGerous 14y agoGreat site, good read. Definitely will come back to it when I design another blog.
- SkyMarshal 14y agoGreat tutorial. One question - What's hinting? Wasn't explained as clearly as it needs to be for a tutorial aimed at non-designers.