The demo page is a representative case of the "designer font-size" setting. I get exactly 4 lines of text on the first pageful. Not everyone surfs on Retina displays or humongous iMac panels at 1080 vertical resolution. As much as I appreciate being able to admire individual glyph curves up close and personal, it comes at the expense of being actually read the page without constant scrolling.
I personally like this far more than the usual bias towards fonts that are too small. It looks better and is far easier to read. Moreover, even on a pretty bad 1280x1024 display and in a non-maximized window, I see both of the top paragraphs as well as part of the downloads--enough to know to scroll.
For whatever reason, most sites seem to err on having fonts that are far too small. I would much rather they err on having fonts too large, and I do not think this particular page erred at all.
Perhaps it doesn't work well on a cell phone or tablet, but it works perfectly fine on any even moderately modern laptop or desktop.
As an aside, I really love the GitHub and Twitter icons. Most sites have icons that don't quite match each other or the overall design; these icons match both all the while being very simple and elegant.
4 lines of text? How many toolbars do you have? I'm viewing it on my iPad 2 at 1024x768 and it looks good. The header takes up 1/2 the screen and then I see the large paragraph (4 lines) plus 2 lines of the next paragraph.
That said, I agree that a base font size of 18px is too large.
A lot of space is wasted by the bar at the top, the logo, then the placing of the title and finally the authors name. Changing those you would be able to have much more content on the screen and still have the nice large fonts.
Now personally I believe you could probably shrink the font size a little and still look good, but you still wouldn't get much content on the first page without fixing everything else I mentioned.
> Just like in print, don’t use the darkest black available in your body text (#000). Instead, go for something softer, like #444. You can use a slightly darker color for titles (#222).
I've always found the opposite; because headings are typically larger, they benefit from a lighter colour than the body copy.
I was also confused by this line. Thick blocks of color appear darker than thin blocks, so a heading would need to be slightly lighter in order to appear the same color as the body copy.
Please don't use #444 for body copy. Anything lighter then about #222 (which typeplate has used throughout their own site) is just too low contrast on light backgrounds.
Do you have any sources for this, or is it just anecdotal?
The W3C states a minimum of 4.5:1 contrast ratio[0] for body copy, or 7:1 for users with poor eyesight[1]. If Snook's calculator[2] can be relied upon, this makes #444/#fff a contrast of 9.74:1. Even a darker bg of #eee yields 8.39:1.
This also depends on the font weight, stroke, and size.
That's a completely false generalization. Brighter than #666 will lean into the danger zone for some readers, but #444 is safe for most type, although very slightly light in perception. In any case, the ideal type color is dependent on the weight of your text.
In my opinion, the recommendation of not going above #222 is not because it's illegible per se (that would depend on font weight indeed), but because you have to take into account external uncertainties like poorly calibrated displays, ambient light, bad backlights, etc.
But darker text isn't necessarily safer, because having too much contrast is also a bad idea. That is why these guidelines about not using pure black or pure white get passed around so much in the first place.
The idea of "too much contrast" is a very recent invention with very little support behind it. People like high-contrast reading. It's easy to read. As contrast goes up, reading rate goes up. There are hundreds of studies to that effect.
Only dumb-ass designers have asserted that grey-text-on-grey-backgrounds is in any way a good thing, and they are wrong. (At least as far as conveying information goes.)
As contrast goes up, reading rate goes up. There are hundreds of studies to that effect.
As someone who does read a lot of research about design and usability issues, I am always sceptical of people who write things like "There are hundreds of studies to that effect" yet don't cite a single one. If it were really as simple as you claim, we would all be reading white or yellow text on black screens and no-one would get headaches because their monitor was set too bright.
If you really do believe in looking at empirical data, you might like to read some of the research into how excessive contrast can exacerbate negative conditions, such as the "shaking" effect seen particularly by dyslexics or the "halo" effect seen particularly by older readers.
If you're demonstrating or introducing a CSS library/tool, I'd recommend not minifying the CSS on the page.
A few places I inspected the elements to see how it was working in the real world - i.e. this site - and it's a bit of a pain to work out which bit of line 29 a particular rule is on.
Nice resource, but I disagree about indenting paragraphs in web copy. I've found that for me, I'm more comfortable with narrow paragraphs spacing and traditional indentation in print media; but web media just reads more smoothly with wider paragraphs spacing and no indentation. Indenting web copy stands out, but in the wrong way I think.
I'd bet that a reason the first line indent was invented was as a space-saving method of indicating new paragraphs. Do we skip a whole line and waste paper, or ... ? "I know! We can put a bit of extra space before the first word of the next paragraph!"
Such things are not required in digital media where each reader might have completely different spaces for text to render within. And, ideally, the content and its formatting are structured in such a way as to allow the user to apply their own formatting if desired.
warning & disclaimer: post may contain factually incorrect guesses and suppositions of the author; no information herein should be considered accurate or factual; use at your own risk
this is not strictly true, but it is a postwar convention that was popularized by Penguin books [1] and its 'composition rules' which were canonized by jan tschichold. The more common 'tradition', which Typeplate ignores, is that you indent only if you do not insert vertical space between lines. The idea being that you only need to do one visual 'thing' to make a block of text distinct from another, why do two?
the earlier tradition was that you'd add a pilcrow or some other distinctive mark at the start of a logical paragraph mid-line so that as little paper (which was either baby cow parchment or made of precious linen) was wasted on whitespace. For an example, look at a 42 line bible [2] or eric gill's book on typography [3].
A while ago I wanted to make a stylesheet I could use when formatting Markdown documents for online viewing, as a replacement for the terrible backwards-compatible defaults web-browsers use. The stylesheet I came up with ( http://gitorious.org/typesetter-css/ ) , doesn't have all the fancy extra class features that Typeplate does, but it makes a pretty decent job of rendering semantic HTML5, like this:
This seems like a great starting point for anyone who is interested in designing a website with a strong emphasis on text content (think blogs, online magazines, etc). If you've ever tried to formally study typography, it can be pretty overwhelming. I'm a web developer with an interest in design, and type is one of those things that seems simple until you realize you have to understand it intimately at multiple abstraction levels (individual letterforms, lines, and blocks of text). Glad to see there's a resource out there that uses typography best practices and makes them sensible defaults.
The best book I know on the topic is Robert Bringhurst's The Elements of Typographic Style. Highly, highly recommended.
Other great books: Ellen Lupton's Thinking With Type and James Felici's The Complete Manual of Typography. Both are really solid.
Books that would be worth checking out at a library: Richard Hendel's On Book Design and Ruari McLean's Typographers on Type. More philosophical in nature, less practical.
It's a classic typography book translated to a web context with the relevant CSS styles. Pretty cool.
For a more easily digestible (and interactive!) overview, the one that comes to mind is the Interactive Guide to Blog Typography: http://www.kaikkonendesign.fi/typography/
If you'd like to check out more resources, hackdesign, a newsletter of curated design-related links, is focusing on typography this month: http://hackdesign.org/courses/
This online version of "Designing for the Web" [1] is a very good (and free!) read. Definitely helped me understand some of the principles of typography, even layout and colour. The "Getting Started" and "Research" sections can be skipped without issue.
Screen resolutions have increased over time which makes on screen fonts smaller (assuming unchanged OS DPI). Beyond that I agree it'd be nice to see some real data here.
It's pretty horrible typographically and visually to combine paragraph indentation with extra space-above. Use one or the other. (Personally, I prefer indentation, which also saves vertical space.)
The margins up and down the headings don't seem to be consistent though. For the big ones they are much too small, for the small ones way too big (when combined with paragraphs). Also, if they are below
's, margins above the heading are larger than below (big sin in typography). I don't know if margins are defined somewhere in Typeplate, maybe that'd be an issue to solve.
I also don't quite understand the way, font-sizes and scales are measured/calculated. It would be nice if you could document that so designers without extensive coding skills are able to understand and change that system to their needs. Are all font-sizes based on em? Is there any simple way to change the default font-size? Changes on the variables don't seem to have an effect for me..
Besides those (for me) issues this is really great stuff, thanks for sharing!
The demo page is a representative case of the "designer font-size" setting. I get exactly 4 lines of text on the first pageful. Not everyone surfs on Retina displays or humongous iMac panels at 1080 vertical resolution. As much as I appreciate being able to admire individual glyph curves up close and personal, it comes at the expense of being actually read the page without constant scrolling.