Typeplate - A Typography Template | Hacker News Reader

Typeplate - A Typography Template

typeplate.com

198 pointsBrajeshwar39 comments

Tangentially related -

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.

They're referring to the actual demo page: http://typeplate.com/demo.html

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.

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.

Here are my toolbars - http://i.imgur.com/EtS4dRL.png

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

It depends whether appearing the same colour is one of your goals. Contrast with the body text is one of the things you sometimes want to emphasise.

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.

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.

Better be safe and go with a darker text.

Better be safe and go with a darker text.

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.

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.

[0]: http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast

[1]: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...

[2]: http://snook.ca/technical/colour_contrast/colour.html

Hoofer & Frere-Jones uses #444 for web copy[1], and they're a world-renowned type foundry.

[1]: https://twitter.com/H_FJ/status/11800719859

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.

Yeah, they don't look great with a ragged right edge. With justified text the structure would be far clearer.

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

I was once told by a typesetter that paragraphs have always been separated by indenting the first line.

Then along came Microsoft Word, which inserted vertical space between paragraphs instead. Now most people think it's supposed to be that way.

I have no citation for this, but have noticed that novels in print use indentation rather than spacing.

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

[1]: http://www.thenewgraphic.com/2012/06/jan-tschichold-penguin-... [2]: http://www.hrc.utexas.edu/exhibitions/permanent/gutenbergbib... [3]: http://www.olivertomas.com/books/eric-gills-an-essay-on-typo...

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:

http://zork.net/~st/jottings/How_to_limit_the_length_of_your...

I was hoping something would mention semantics. Seems like a lot of new frameworks still require you to modify pre-existing HTML.

Very good ressource: SASS code examples for many standard things you might want to do with text.

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.

Can you recommend any good overviews of the subject? I'm not a designer, but I've always been very interested in typography.

For a practical (but involved) overview, there's this: http://webtypography.net/toc/

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.

[1] http://designingfortheweb.co.uk/book/

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.

The font size is much too huge (and bold) for my standard displays. I prefer sites that use 100% font-size.

Can somebody shed light on the recent trend for huge font sizes? Not guesses and anecdotes but some research?

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

Very nice. I'm definitely weak on the typography front and this looks like something that I may actually use!

love the mixins!

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!

Could you use the css file for epubs?

What language is that?

Any LESS version?

Reply on news.ycombinator.com