I’m taking some time this weekend to audit certain aspects of the ToolGuyd layout and design. You might notice some minor changes here and there, or you might not.
One of the changes I’m looking to make is to move to a different font for certain links (such as in the sidebar “recent comments” and “recent posts” lists, and the links in the footer section.
I am also looking to change the font for posts. The goal is easier and more comfortable readability on all types of devices, such as desktop computers, laptops, tablets, and smartphones.
Advertisement
Since this is a big change, I figured I’d see if there could be any major objections.
Option 0 is how things look now. Option 1 is what I wish to implement site-wide, Options 2 and 3 are alternatives that look a little different, and option 4 is Arial, which is less modern but tried-and-true.
Update: After looking at all font styles on a greater myriad of devices and browsers, I’m leaning more towards Option 3.
If you go back to the ToolGuyd home page, Arial is the font that is used in the brief post summaries.
Right now, the colors and boldness are a little different, but that’s something that could be tweaked for any of the fonts.
So which do you prefer? Options 0, or 1? If you prefer 0 over 1, would your opinion change if you compare Options 0 to 2, 3, or 4?
Advertisement
Option 0 – Georgia (current)
But throw in the compact and high capacity battery combination, a compact and decent-on-paper impact driver, what looks to be a more compact charger, and a ~$100 price tag?
Option 1 – Open Sans
But throw in the compact and high capacity battery combination, a compact and decent-on-paper impact driver, what looks to be a more compact charger, and a ~$100 price tag?
Option 2 – Lato
But throw in the compact and high capacity battery combination, a compact and decent-on-paper impact driver, what looks to be a more compact charger, and a ~$100 price tag?
Option 3 – Roboto
But throw in the compact and high capacity battery combination, a compact and decent-on-paper impact driver, what looks to be a more compact charger, and a ~$100 price tag?
Option 4 – Arial
But throw in the compact and high capacity battery combination, a compact and decent-on-paper impact driver, what looks to be a more compact charger, and a ~$100 price tag?
NERemodeling
I’m on my smartphone right now and option 3 and 4 seem to be the easiest to read..
option 1 is not bad but the it’s a little fine
option 2 seems too small
Stuart, you have put a great site together, go with your gut and it will be perfect.. I’m not just blowing smoke here, I’m being serious! You know this stuff better the we do..
John
fred
Option 3 and 4 seem easier on my old eyes too
Stuart
Thanks!
My Android phone shows 3 and 4 with identical characters, which is odd, and I checked how everything looks in IE, Firefox, Chrome, Android, and iOS environments.
Right now I’m leaning a little more towards Option 3. Option 1 would be more reserved for headlines.
Option 0 looks good some of the time, such as when typing up comments, but that’s something I could figure out later.
Tyler
Its likely that your Android doesn’t have Robotics and is falling back to Arial. I’d stick with Georgia, but that’s simply because I find reading Serif fonts easier. Must be comfortable familiarity from reading print books. On my phone its easiest.
Michael
While any of these would be fine, I do find 3 &4 to be the easiest to read
John S
I think I still prefer Option 0, although Option 3 and 4 are okay as well
T
3
Ian L
Personally I think that Open Sans and Arial look the best. The current font feels a little small in comparison. None of the choices are bad though, so you really can’t go wrong.
Thanks
Ian
Michael Quinlan
I prefer Open Sans over Georgia, but I’d rank the choices as:
1. Open Sans
2. Lato (close second)
3. Georgia
4. Roboto
5. Ariel
That said, unless I find a font choice particularly egregious, I don’t really pay much attention to it, so I imagine anything you choose will be fine.
Bill K
I’ve heard that font selection can make a big readability difference, but not one I’ve ever noticed in the past. For the sake of your poll, I like the look of Option 4, but I’m drawn to option 1 probably because of what I heard in the past. Despite that, my vote is for option 4. Like Ian L said, you can’t go wrong no matter what you pick, ToolGuyd is a winner!
Stuart
Font selection, size, line heights, line widths, paragraph size, spacings, and other factors do play a big part in readability.
Serif fonts, such as the Georgia font currently in use, were traditionally easier to read.
ryan
Lato
jason. w
3 is best. Any of them but open sans in my opinion.
ktash
Option 3 is by far the best for me.
Option 1, Open Sans is worst. The print seems to “clump together” in that font, making it difficult to make out, kind of jumpy or spotty. To describe it what I mean the black and white seem to vibrate against one another. I have a bit of a problem with this anyway and that one makes it worse. Option 4 Ariel is second worst for me. Some people have this, though an eye test doesn’t pick it up.
I’ve never seen Lato before, but maybe I’ll try to use it more myself.
John
I read this site exclusively on a large screen desktop computer. Of the five options, my least favorite (by far) #3. I find the letterforms aesthetically unpleasant, as well as too “vertical”, so my eyes find it hard to track words horizontally (i.e. reading). I’m also not crazy about #2 and #4. I find both #0 and #1 work well for me (though they are quite different from one another). I don’t know how these two appear on smaller screens, so that would be the determining factor for me, in recommending between these two options.
Next up (I hope): how about a redesign of the clunky “Tool Guyd News” logo?
Stuart
Right now it seems that #s 1 and 3 are common favorites, with more people leaning towards #3. I’ll try to see if I can find an in-between font, but there’s a finite number of options.
As for the news logo, you’re right. That’s one of a couple of things that needed replacing. I swapped in a clean and simple text logo. That icon doesn’t get used very often (it’s actually the no-thumbnail image default), so I cannot spend too much time making something much prettier.
John
I really should add that your choice of typeface will in no way affect how often I visit the site (several times a week). If #3 is a consensus choice, far be it from me to disagree. Next time I’m in the Apple store (it’s very close by), I’ll check out this post on an iPad (which I’m considering getting), and see how it appears in that format.
Thanks, as always…
Stuart
Thanks to Corey’s comment, I figured out how to set different fonts for individual readers. If/when I change the font style, and you absolutely hate it, I can tweak the server to revert the settings for you. Or I might create some kind of button or toggle switch at the bottom of the page, but that seems like it might be overkill.
Update: The filtering misbehaves a whole lot. I’ll backburner selective styling for another time.
MT_Noob
I vote for anything that is not time new roman…
All kidding aside, of the optoins above, I’d say #3 gets my vote.
And for the record, I love the content. Keep up the great posts.
Mike
Option 0 is still my favorite on my laptop, desktop, and phone. If you are determined to make a change my vote would be for 3.
glenn
Stuart, option 3 works best for me, its just the easiest to read.
Cheers
Glenn
Corey
Use Comic Sans, sit back, and watch the world burn.
Stuart
Okay… you asked for it! =)
Let me know when you want to switch back. *mwahahaha.*
Corey
This is the best choice you have ever made. Take *that* Helvetica!
John
I’m looking at this page on the ipad2 at my local Apple Store. Very good looking — cleaner than on my dinosaur iMac at home…
The typeface being used in the body of this post is very pleasant, and super easy to read.
One thing to keep in mind is that typefaces should work together (i.e. Complement one another.). This is a matter of taste more than anything, and there are few hard and fast rules (other than to limit the number of typefaces you use).
I’m not clear on how where you’re thinking of using a new typeface, and on how it will juxtapose with others on the page/screen.
The only sure way to know what you’re getting is to create a page mockup, and to then create different versions with the candidate fonts.
One other idea to chew on: while it’s true that serif fonts make tracking text easier (the little feet create something of a line for the eye to follow), this benefit is greatest for long paragraphs, or entire pages, of text (where the eye is aided in staying on line, or picking up the next line), and is rather unimportant for short pieces of text (e.g. short reader comments….unlike this one), headlines, captions and the like.
Of the five samples above, all appear satisfactory on this iPad, though 1,2,3 &4 all seem to offer a bit more breathing room than number 0 (can’t find the number sign on this iPad!)
The real test, as I’ve opined, is how your font choices work together.
Good luck!
Ktash
My earlier post was about my laptop. Now I’m on an iPhone. I still like option 3 best.
mnoswad1
stuey………..whatever font this post is in is horrible, stop this nonsense right now. you must have had too much candy last night.
Stuart
Refreshing the page should return things to normal for you.
The server was *supposed* to serve the Comic Sans font only to Corey, as he requested. I tested this quite a bit, and it seemed to work. But then the Corey-specific styling sheet seems to have replaced the regular one in the server cache, delivering it to some other readers. Or maybe there was some sort of syntax error in the server code I wrote, but then that doesn’t explain why it seemed to work perfectly when I tested it. Oh well. In any case, the default font everyone sees should still be option 0, until I make the final decision.
Corey
Having sewed discord and chaos, my job here is done.
Gary T.
Between option 0 and 1, I like option 1 better. But to me option 3 looks the best.
This is looking at them from a desktop computer.
DaveMD
Lato seems to be the easiest to read.
RKA
3 for me on my iPad.
DaveZ
Stuart,
I’m liking Lato – never heard of it before, but it looks good on the laptop and on the iPhone. Most of all, I would say that the font needs to be consistent throughout.
One other thing: I love this website so much I have it as a favorite on my phone, but that means I have to look at the I’m-pulling-nails-out-of-the-ceiling-hammer logo every time I look at my browser. Maybe it’s time to turn that durn tool around!
Thanks for keeping us informed – even if it does cost us money!
Dave
sharon
arial or roboto.
number 3 – low contrast and sharpness in comparison.
Eric H
I like option 1. However, all of the proposed fonts seem acceptable to me.
Toolfreak
Personally I’d say Option 2 – Roboto looks great on a decent size screen.
Option 3- Lato is terrible, the font has a slight boldness to it, and slight is slightly too tall compared to the width. Do not use for text.
Option 1 – Open Sans is a little too thin and a little too open – the default kerning (space between characters) is slightly high.
Option 0 – Georgia is okay, but there’s no reason to have a serif font on a computer screen. Serif fonts ARE more readable – but that’s report/book amounts of text and usually on a paper page.
Option 4 – Arial is tough to beat. It’s a great sans-serif font for the web, it’s widely used, and it’s very readable. There are ‘better’ fonts out there, but they aren’t widely used yet, and there is a reason Arial is the second or third fallback font for websites.
Joel
Option 0 and Option 3 seem to be the easiest for me to read on my computer. Option 3 does feel a little bold, but I like the character shapes. I am sure that whatever you choose will work great.
Tyson L
As a graphic designer/Maker, I am always using new fonts and trying to make sure everything works for the end user. Roboto is one of the most widely used fonts because of its readability and its counter part, roboto slab. I would use Roboto for the body and use roboto slab for your headers and titles. Example
http://briangardner.com/google-font-combinations/
Stuart
Right now I’m testing out Roboto Slab for in-post headlines, Open Sans for top menu navigation, footer links, and smaller text that tends to look very bunched up, and either Roboto or Lato for post content.
Garrick
Option 4 Arial is easiest for me to read.
It is my default setting for my e-mail.
Josh B.
Number 2 is visually pleasing on my mobile device.
Kevin Oakes
Option 1 for my >60 yo eyes!
James B.
I prefer option 1 or 4.
Could you have formatted this page by incluing a voting function that users clicked.
Thank you for your time and interests
Grady
Stuart, options 3 & 4 are great for older eyes like mine. I’m giving the edge towards option 3. Either way, a little more bolder.
Thanks.
James C
Long-time reader; first-time commenter. I end up doing a lot of typography work outside of my normal profession slinging tools around, so I feel like I can contribute!
Most usability studies end up showing Georgia and Arial still rule for the best combination of readability and compatibility; but the last several generations of PC and mobile web browsers handle newer fonts just fine.
Georgia type fonts seems to shine around the 13-14pt/16-18px size with about 1.5x to 2x line spacing (around 23-32px line-height.) That’s a combination you’ll see with news sites like Washington Post, NY Times, Wired, Rolling Stone, and Medium.
Arial type fonts seem best used around 11pt/14px-16px size with closer to 1x to 1.5x line spacing (around 19-27px line-height.) That’s a combination you’ll see with news sites like CNN, Vice, BBC, MSNBC, NPR, and Fox News.
I tend to lean toward Arial, myself. Serif fonts are harder to read on smaller devices, and don’t flow as well through smaller spaces in most layouts. Roboto and Roboto Slab are newer fonts that scale even better on smaller screens than Arial; they were also specifically designed as an Arial/Helvetica replacement/upgrade. I have a slight preference for Arial over Roboto on a PC screen, but Roboto over Arial on a tablet screen.
So my vote is for Roboto or Arial. 🙂
Del
Another vote for option 4.
Josh
On mobile, 1 & 3 are much better!
Justin
Option 3 is the easiest to read in chrome on my iPhone 5.
GMA15R
I prefer Option 0 – the way things are. I find sans serif fonts difficult to read for any length of time. The letters seem to run together. Whatever you decide, it is the content that is more important that the style and your content is great. Thanks for all you do.
Matt Ryan
1. Georgia
2. Lato
3. Roboto
4. Arial
5. Open sans
Kurt
I like Option 0 the best; it’s the easiest for me to read.
Larry Zeleznik
Present scheme looks quite fine,
however, mechanical may be considered (LOL).
Hang Fire
I’ll go against the flow and say, please use nothing sans serif. However I use TG mainly on a PC, not on my phone.
John Sullivan
Although I’m a fan of Option 3 (Roboto), my vote is option zero– stick with Georgia.
Jacko
Go with the most beautiful and intelligently crafted font ever designed:
Comic Sans.
Stuart
I tried to only serve that font to Corey over the weekend, but it ended site-wide. Not going to make that mistake again!
Corey
It was no mistake. It was *glorious*!
firefly
All look decent on my Note 2. Thought I’ll take 2, 3 and 4.