Discuss: More Meaningful Typography
by Tim Brown
- Editorial Comments
2 Great Article
I love typographical scales, we need more articles and experiments like this. We often make that mistake to use meaningless typography scales for web design, we just put some random numbers and we have our typographical scale.
I also love the golden ratio and many of my web typography frameworks are build on that principle. I come to very interesting results building my web typographical project – Azbuka" by using the Fibonacci sequence (13, 21, 34) and “golden” leading or in CSS line-height: 1.618.
I don’t think that we should always use some known design principle like the golden ratio, but I think that we should always build meaningful typographical scale that is build on some kind of logic.
posted at 10:06 am on May 3, 2011 by Vladimir Carrer
3
@Jeremy — Good point! I’m interested to research this further. Particularly the idea of pixels as relative units of measurement, and what that means for fractions-of-pixels. For the time being, though, I haven’t been displeased with results across browsers.
@Vladimir — Agreed. Nice!
posted at 10:38 am on May 3, 2011 by Tim Brown
4 Who will stay more on website without proper font?
I saw too many eCommerce website they have done excellent work on design & creating inner pages layout. But, they quiet silly with font style. Who will stay more on website without proper font?
posted at 11:33 am on May 3, 2011 by eSparkInfo
5
Hey, I recognize that font pairing from somewhere… :P
Great article Tim. I’m hoping that it helps the message penetrate a little more into our collective thick skulls that we need to be designing from the content out.
I would have liked to see some discussion in this article about using em rather than px for font-size, since 1) that better expresses the idea that our sizes are a series of relationships, and 2) this makes (some aspects) of responsive design trivial: just modify your base font-size and watch your whole design scale accordingly. You can see some of this in action on my personal blog . I was thinking of writing some of this up, but then I saw The Goldilocks Approach to Responsive Design which sums this up pretty well.
posted at 01:20 pm on May 3, 2011 by mattwiebe
6
@eSparkyInfo — That’s right. Type choices makes a big difference.
@Matt — Thanks! You’re right, ems are a better way to go. Especially given the promise of using [url=“http://snook.ca/archives/html_and_css/font-size-with-rem”]root ems[/url], which alleviates the need to recalculate size for nested elements. Percentages are useful too, though not especially for font sizing. I wanted to keep things super simple in this article, so I stuck with pixels throughout.
posted at 01:38 pm on May 3, 2011 by Tim Brown
7 text-rendering: optimizeLegibility; not ready for
Although this is beneficial when it works, it can also crash browsers and create weird side effects. This is with current browsers, not IE6. Its use seems to me to be quite risky at the moment – but correct me if I’m wrong. See, for example, ‘http://www.aestheticallyloyal.com/public/optimize-legibility/
posted at 01:59 pm on May 3, 2011 by LeePhillips
8
@Lee — That’s right. I’ve heard some reports of instability with text-rendering: optimizeLegibility. I spent a little time exploring the CSS Web Fonts Module Level 3 Editor’s Draft and it seems we’ll eventually have more robust ways of enabling kerning instructions (as well as CSS native ways — text-rendering came from SVG).
posted at 02:40 pm on May 3, 2011 by Tim Brown
9
I just tried calculating the modular scales from the base font-size and line-height of a design that I’ve been working for a while and discovered that many of the numbers were almost exactly the same as the ones I had already ended up with. To me, this confirms something I’ve been theorizing for a while: a designer’s visual intuition is probably just a very good automatic modular scale calculator. :)
I’d like to quickly share a method similar to yours that I’ve been using for a while. Instead of starting with the type size, I usually use the line-height, which I multiply or divide by 1.618^n to get different font-sizes, widths, heights, margins, and paddings. What I do differently is that instead of using the results as they are, I round them up or down to the nearest fraction of my line-height.
For example: 24px line-height * 1.618^2 = 62.830176 ~= 60px = 2.5 lines
Doing this seems to make the layout feel a lot more solid and “industrial” (for the lack of a better word), as if it has been created by something mechanical, whereas layouts created without rounding the numbers seem to feel more natural, organic. It’s an intriguing effect.
posted at 05:51 pm on May 3, 2011 by Joni Korpi
10
Very interesting theory, and something that I have never heard or come across before. Obviously typography is a very important part of any design, whether it’s web or print, but I have never really thought about how the precise size of the font could alter things so much.
I use ems rather than pixels, and was just reading through the comments left, I assume they work in the same way?
posted at 04:25 am on May 4, 2011 by Stephanie93
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 On Rounding Decimal Font Sizes
Great article. Loved it.
You might want to note that the various browsers treat pixel sizes with decimals differently.
For example, if you have font-size:14.5px;, Firefox will round down to 14px, where as Chrome and Safari will round up to 15px. I am not quite sure what IE does in this case.
This is due to the fact that on the screen, there are no half or partial pixels.
posted at 10:02 am on May 3, 2011 by jeremyzilar