Typography Check
By Daniel Miessler on April 1st, 2008: Tagged as Design | Typography
So I’ve been doing a little work with my typography. I’ve changed my font-size and line-height to em measurements, and I’ve increased their sizes as well. How does this look? The idea is to be more readable without getting so large as to appear childish.
Any thoughts would be appreciated.
Looks good.
Comment by ashabot — 4/1/2008 @ 6:14 pm
It definitely looks like you did some line-height changing in the right sidebar, that’s really nice.
Have you thought about using a glyph for your li tags, instead of the Milk-Duds?
I checked out Bimbo/Caveman and I think the ads are munching up the text flow.
Comment by Steven G. Harms — 4/1/2008 @ 7:42 pm
What font is this in (so I know Opera isn’t crazy)? The right-pane text looks good with both standard Windows XP font antialiasing and ClearType, as do the comments and headers, but the main article text seems a bit large. (I don’t mean to question your personal preference. :))
Comment by Wes — 4/2/2008 @ 2:04 am
(Sorry) –on 1280×800, 12.1″.
Comment by Wes — 4/2/2008 @ 2:05 am
@Wes: It’s 1.2em for the blog body text. Trying to do larger, more readable text.
@Steven: I do want to do some sort of glyph. Any ideas?
Comment by Daniel Miessler — 4/2/2008 @ 2:12 am
Regrettably on FF on Win, the comments box is intersecting with the bullets. I can fix this in firebug by changing the cols to 67 ( 65 is better i think for making your math easier ).
Re: Glyph
a. Your smiling face is the only one that really works for me, but… b. Any wide glyph in the right pane may require sucking in on the right for your main pane. This may be a gigantic pain (NPI), so you may prefer to let the right pane out slightly if you’re picking a larger glyph.
To ease pain, a small glyph is preferable, something about the width of the small circle bullet.
c. i. Minus (boring) ii. Leafy thing ( too list apart, but nice ) iii. border-left and border-top to make a raised box ( too busy, esp. with all the text ) iv. http://en.wikipedia.org/wiki/Section_sign ? v. Typographic dagger vi. Maybe you have to stick with the classic here? v. Zen: No bullet.
Perhaps increase gap size between them and drop the bullet altogether?
All of those are contained in div#readerpublishermodule0 so you could spec. your paddings there without worrying about a change to the a style having weird effects.
Just ideas, play with as you see fit :)
Sorry to make your life more hassle ;)
sgh
Comment by Steven G. Harms — 4/2/2008 @ 1:33 pm
I don’t see that the text size is any bigger or more readable than any other site, which means that it is tiny and impossible to read on my 15.4″ 1680×1050 monitor. I do not recommend that websites specify font size, let the browser handle it because each user has different needs.
Comment by What is? — 4/3/2008 @ 10:48 am
My friend, I think your typography choices were for the best!
Tonight I loaded your “What Every American Should Know About the Middle East” article, and was deciding whether or not I would read it or go to bed as my eyes were tired and I was feeling quite sleepy. As soon as I glanced at the page, I knew it would make for good reading — the font was a good size and the spacing was pleasing to the eye! Keep up the good work!
So you know: Safari 3.1, 1280×800 resolution on MacBook.
Comment by Jay Robinson — 4/3/2008 @ 12:48 pm