Hi all, just got back in from Tucson, Arizona. Thanks to the crew for keeping things humming without me.
I've been dissatisfied for a long time re: how easy Winds is to read - not so much from layout, as from the fonts used and how easy it is for the eye to follow along through our posts. Our goals are:
- Little effort required to follow with the eye as you read.
- Type large enough so people over 35 can read it.
- Harmony with our layout so it looks visually pleasing.
I've modified the styles for the main blog body section. It's not elegant because there are parts of the blog using a different style set, but I'm focusing on the posts themselves right now. I ask you...
- Are the new fonts an improvement, based on the above criteria?
- How do they hold up in longer posts like Dan's recent bit on Iran?
- Any alternative or additional template/layout suggestions to help us reach the above goals?
UPDATE: Trebuchet font has been hurled per reader suggestions - the experiment with Georgia and serifed fonts for blog posts begins. Comments?








I have no problems with the layout, but I find the font much harder to read than before. It looks too skinny (for lack of a better word).
(Firefox 1.0PR, 1024×768)
A little off-topic, but a plea to remember that some of us still use dial-up. Features that cut down on page-reloads (if that's the term) are really nice. Like having the recent posts listed in order on the upper-right, so one can jump from post to post. And having the entire post and comments all accessible from the permalink. I know WoC has these things already--they are appreciated.
Joe
Welcome back and ditto on Steve's comment. I for one am one of those well over 35 so my eye sight certainly isn't as good as it used to be.
I also use FireFox 1.0, 1280×1024 NEC MultiSync LCD1765 monitor.
As for the comments I generally write them using MS Word so I can clean up my spelling and proof read prior to posting. I clean up all link errors and text formatting using the preview feature and making the adjustments in the comments area.
For those wondering I copied and pasted the appropriate quote " character for links and keep it handy for pasting into my word document. Seems the MS Word quotation character isn't the same as the one used in the comments section. (Wish I knew how to fix that in MS word to eliminate the paste process.)
Good feedback on the fonts... anyone else? And thanks for the browser & screen resolution, 'A Steve' - it helps!
AMac, dial-up comments duly and truly noted. Anything else we could do for our dial-up readers to make life easier?
USMC... here's how to fix Word's annoying "smart quotes" feature, which seems awfully dumb to me:
1. Go to the "Tools" menu item up top
2. Choose "Autocorrect..."
3. Click the "AutoFormat As You Type" tab
4. Look down to find the "Replace as you type" section
4. Uncheck the part that goes: "straight quotes" with "smart quotes"
Real intuitive, that is....
My comments:
- New font looks more readable (but font type is not a big issue for me)
- Spacing (14 pt?) maybe too much: limits text and topics you can visualize at the same time on the whole screen
- Personally don't care for the light green background: interferes with readability. I prefer basic white, with maybe another color for the side bar on the right
- Post titles should stand out more (darker color, bigger font, something)
- Sidebar does not appear separated enough: add a line or shading (or maybe just colored background would do the trick)
Humbly and suggestively yours,
Gabriel
Thanks for the feedback Joe I really appreciate it. I have made the appropriate corrections. No more pasting for me.
I don't love the green ... in truth, I thought the old design was pretty damn good. One suggestion is to put the related entries at the bottom, which may be my personal preference since I never click on them (having most likely read them all anyway) and don't like scrolling past them. Also, I do think it's odd to use a sans-serifed font for posts but a serifed font fot comments.
YMMV.
Thanks, folks, keep 'em coming. All comments very much appreciated.
Yeah, the style sheet needs fixing for the Comments section, and in a couple other areas too so it's all consistent. Am saving that until we settle on a main font, so I can make it all work together in one go. Currently in the works, but CSS Style Sheets are lots of work to a novice like me.
As an aside, if you're commenting on other stuff just throw in a quick "thumbs up/thumbs down" on the font we're experimenting with (Trebuchet) so I can get a better feel for that while we're at it.
So far, the weight of opinion seems to be tipped toward returning to the old "Arial, Verdana, sans-serif" set and dumping Trebuchet.
If you agree with that, let me know so we don't make a mistake by keeping this look because others write in and like it.
If you like Trebuchet and want it kept, let me know so we don't throw away progress.
Trebuchet? How appropos.
Hurl it.
Could you set up themes for the various fonts? Then people could pick and choose.
The comments are showing up in what looks like Times New Roman, and are much more readable to me than the posts themselves.
It's hard to compare, since I can't see them side-by-side. I do think the current comments font is more readable than the post font. If you really want to stick with sans-serif, I've always liked Verdana better than Trebuchet. I tend to use Trebuchet only for headers and titles myself.
While you're taking feedback, is there any chance you could do full-posts in your RSS feed? That way it won't matter to me (and other subscribers) whatever font you pick.
Readability tests have shown that margins, line-spacing, and serifs are the most important factors in legitibility. I would recommend wider margins between the text and the borders around each story. Also it wouldn't hurt to try and center the content on the page, instead of having content on the left, and all other links on the right. Increased line-spacing helps legibility--double-spaced may not be necessary, but 1.5 spaced wouldn't hurt. Serif fonts, and especially those designed for the screen, are more legible than sans-serif fonts. Times New Roman is a serif font, but it was designed for print originally. Try Georgia: it's a nice big serif font specifically designed for the screen. 13px ought to be a good size. Also, black on yellow was a good choice--that's also been proven easier to read.
Cheers.
Just a note on the margins: the reason why bigger margins are better is because it's harder for the eye when it has to go from the far left of the browser to the far right back to the far left, etc, when reading. Text is much more readable when the eye travels less horizontally when reading.
Greater line-spacing obviously helps the eye distinguish quickly between the previous line and the next line when reading quickly. When they're jam-packed next to each other in single-spaced text it's harder to read quickly.
Joe, Template generally looks fine and the light green is ok. I have a little problem with sans-serif fonts; don't know if others do but I would say that Georgia is a common and readable font and seems to co-exist with HTML formats. I'm also finding that Century Schoolbook is easy on the eyes -- it's the font my law casebooks use and after 2 1/2 years of them the font hasn't worn me out.
FWIW.
I find Trebuchet to be less easy-to-read than Helvetica, as sans-serif type goes. My personal preference is to set all body type in a serif face. I find it much easier to read, and I think I remember learning in school that research into human vision supports this.
Oh man, I actually had been using Trebuchet in my sidebar and in my blockquotes. I just now tried switching it to Verdana, and it definitely made it much more readable. So yeah, hurl Trebuchet. :)
And listen to Tom. I happen to use Georgia myself for blog text and have been quite happy with it.
I must be a contrarian, since the old font seems preferable to me. I usually read at a font size of 1 or +2 from your default (that's two cntrl-'s in FireFox) since I'm in front of a monitor all day.
Something was wrong earlier with your 'Recent Comments' preview on the right. It seemed like embedded hyperlinks were messing up the margins. I don't know if it has been fixed already, or if maybe there hasn't been any recent comments with hyperlinks. Something to look into at any rate.
The serif-font of the "comments" page is more legible than the sans-serif font on the main page. And maybe a point larger?
....Since you asked.
Safari on 1600×1200 Viewsonic P 815 (yeah, work provides it). I agree with Tom, especially about line spacing. The links column on the right is too wide for me. I liked the switch to the green background for the text.
Joe, based on the comments above, your CSS file should have something like this:
.blogbody, .commentheader, .commentbody {
line-spacing:1.5 em;
font-family: Georgia, Times New Roman, serif;
}
I think there are a few other classes in there, too (css file has a lot of redundancy).
Tom is correct about the serifs. That's why they were invented: they “hook” the eye.
It looks terrific! I think it would be great if you made about 14 different styles and then rotate them on a random basis. Kind of like skins. Try it. That way there would be some kind of suspense element to your blog.
It is discouraging to try to follow links in the blog because on returning to Winds of Change, the reader does not return to the same place.
I have to admit to reading WoC a lot less because of this problem.
But I do like the material, and wish it were more accessible (see above).
My only thought is that I find Verdana the most readable font on the Web---I'd use it for nearly everything, including comments.
I agree on 1.3 or 1.5 line spacing in Georgia 13 pt. I would like to try the yellow background as suggested or a white background, maybe with a colorful border to seperate text from the left hand side.
But Joe Katzman is the best in my books and I'll read whatever he puts up!
Here's another vote against the green background. The real problem with it isn't the color per se but rather the fact that it doesn't fit in well with the blue logo and individual post headings. Add to it the bright yellow "Recent Entries" and the dark green section heading on the right, and it's lost what little color coherence it had left.
White is perfectly fine as a background color, but if you must have some shade, try the subtlest blue you can find. Then replace the green section headers on the right with blue (use the hue of the medium blue farthest-right part of the logo graphic.) Then, the splash of yellow at the top won't be a problem at all (people will just think of the Swedish flag or something.)
And while I'm at it, thanks for the serif font!
It looks a lot better to me. This is a whole lot easier on my eyes. Thanks, Joe!
A couple of comments on seris/sans-serif. Serif type faces work best in print material, but the studies I've seen show that sans-serif works better on the web (this has to do with the poor resolution and rendering of screen fonts).
Also, bit of trivia... serifs were not invented to improve readability, that was an unintended consequence. Serifs were added to early type to keep the edges from breaking when the press slammed shut. They could wear away and the letter would still maintain its shape.
I wish Anonymous Coward had left something more tangible as a contact point. Not sure I understand exactly what he's referring to.
Anyone else have a better idea of what he means?
Joe, I thought I understood what AC meant, but I couldn't get the same behavior. It may be an issue with his browser (as a mac/safari user I'm accustomed to that.)
Joe, it sounds to me like Anon is complaining that when you scroll the page and then click a link, clicking the Back button returns you to the page but doesn't scroll back down to where you were. (This doesn't seem to happen to me, but I keep stylesheets turned off.)
Joe, Some of the other threads are showing in Georgia and they look quite readable. This thread seems to be in Times New Roman, that's OK, but Georgia seems to be a favorite. Certainly I'd like seeing it.