Skip navigation

Font Size Frustration

In a refreshing voice, Wisdump gets the point of readability:

While reading the excellent article, Web Design is 95% Typography II, I noticed that Oliver included a link to Wisdump which affectionately states what more than a handful of people have said about the site.

Scrivs, you are without no doubt the dude 2.0 – and your company does amazing stuff, but what were you thinking when you downscaled the font size on wisdump? I know that I can scale it up with a simple key combination, but I don’t want to. I used to read wisdump (ex whitespace) weekly. I don’t read it anymore because I am too lazy to adjust the font size.

That’s all I needed to hear…You people should have scolded me more. Please forgive me.

Well said.

The trend in blog fonts over the past two years has been to go microscopic, or as Wisdump explains the trend needs to change so “we are back to being able to read the site without feeling that every paragraph is a footnote.”

As cute as small fonts were, they are hard to read. When they are combined with a lack of scalability for accessibility standards, small fonts are criminal.

Get your fonts back to size.

Wisdump uses the following font size style for the base and body font:

body { font: 100%/145% ...}

I use the following and then both of us scale our font sizes from there:

body { font-size:1em;... }

Think about your readers. Are they reading your blog well? Or are they squinting?

Related Articles


Site Search Tags: , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

15 Comments

  1. Posted December 21, 2006 at 4:45 am | Permalink

    Frankly, I think this issue can be a toughie to tackle. There needs to be a balance. Many blog designs often look good for one screen resolution (like 1024 x 768, or 1280 x 1024)… but now with the increased use of bigger LCD screens, AND smaller screen laptops, it is difficult to create one that fits all.

    I would guess the best way is to leave the font size of the main blog post anything between 12pt to 16px, again depending on the font used. This is the best you can do, without installing scripts that detect resolutions and resize fonts automatically.

    I think people using browsers should also learn that they can have some control over the font size displayed. :)

  2. Posted December 21, 2006 at 9:12 am | Permalink

    Never use pixels for font measurements for web site styles. Stick with points. If you use the em measurement, then the page will scale to whatever the user has set in their browser’s preferences.

  3. Posted December 21, 2006 at 11:59 am | Permalink

    I had font size in mind when I chose my WordPress theme. I write about gardening, and a lot of gardeners (myself included) are middle-aged or older. The older they are, the more wisdom and experience they have to offer, and I didn’t want to put any kind of hindrance to their enjoyment of, or participation in, my blog. Unfortunately, they sometimes get stuck on other things, like not recognizing a link is a link. And I notice that my fonts come out really tiny on my public library’s computers which are using Windows 2000 and an IE browser, not sure if it’s 5 or 6. I don’t know what to do about that.

  4. Posted December 21, 2006 at 1:37 pm | Permalink

    I think choosing a good default font size is the hardest part with a site layout; you don’t want the font to ‘jump’ out of the rest of your layout, but as a rule I chose the font size on a ‘If I can’t read it, it’s way too small’ basis and rather change the layout to go with the good font – making it wider, ‘bigger’.

  5. Posted December 21, 2006 at 4:16 pm | Permalink

    Lorelle I totally agree with you. I have an eye problem that makes reading small font difficult for me. When I come across a site with small fonts, I press the Ctrl key and move the mouse wheel up or down to decrease or increase the font size respectively. But there are others that have fixed fonts and this nifty trick doesn’t work. As a result I simply open some other site

  6. Matthijs
    Posted December 22, 2006 at 7:44 am | Permalink

    Even though I agree that often font-sizes for websites are chosen too small. And if they are set in pixels it’s not possible for IE users to resize them (if they knew how to).

    But what I miss in these recommendations is the hard evidence. Which “populations” read a) faster b) easier c) understanding more d) better .. at what font-sizes? Of course taking into account the font-family used, line-length, contrast etc. There must a ton of research out there. I am planning finding it, but in the meantime anyone who has some resources, please share.

    The fact is, I don’t believe it’s as simple as “the bigger the better”. Personally I prefer a medium sized text, maybe around 11/12 px (even though a px can be relative!). Both smaller and larger then that, reading becomes worse.

  7. Catana
    Posted December 22, 2006 at 9:17 am | Permalink

    Font size is an important issue, but it’s not the only one. Here’s the comment I left at Wisdump: “I can’t help but wonder why everyone complains about font sizes, which can be changed in any browser, but not about the even more annoying vogue for pale grey type, which can’t be changed unless one chooses to override all colors settings. The low contrast is virtually unreadable for older eyes like mine.”

    Both fixed sizes or low contrast are enough to send me away from a site–permanently. Using a feed reader is fine for current blog posts, but don’t help if following a link to an older post.

  8. Posted December 22, 2006 at 1:24 pm | Permalink

    I’ve done extensive research over the years on fonts, and you can find some of those references and information in the articles listed above, and especially in CSS Experiments – Web Fonts and Embedded Fonts.

  9. plnelson
    Posted August 20, 2007 at 1:41 pm | Permalink

    I’m trying to use the basic canned themes without having to hack the code very much (I hang up my propellor-beanie when I come home from my sw engineering day-job)

    The problem I’m having is that different browsers seem to have radically different ideas of what size to display fonts at, even using their default text size settings.

    Someone, above, said that [ something ] “is the best you can do, without installing scripts that detect resolutions and resize fonts automatically.” So ARE there any canned themes that do that? If that’s what it takes has someone done it?

    ( I also blog about gardening and have many visitors “of a certain age” )

  10. Posted August 20, 2007 at 3:39 pm | Permalink

    I don’t know about the specifics of individual Themes as there are more than 2000 to choose from.

    Just change your base font options in your style.css of your Theme from whatever they are to 1 em and then make everything else like headings and titles and such a percentage of the base font. It’s very easy to do.

    I’ve found that browsers do not agree with font sizes across the board, but I get few complaints about my fonts. They are smaller in Firefox and larger in IE.

  11. plnelson
    Posted August 20, 2007 at 5:46 pm | Permalink

    “I’ve found that browsers do not agree with font sizes across the board, but I get few complaints about my fonts. They are smaller in Firefox and larger in IE.”

    Here’s a screenshot of the “WordPress Classic” theme, which uses em’s and %’s, as you say . . .
    . . . The size ratio between IE and FF is about 2:1 . Both browsers are set to their default text size settings.

    I’m new to WP – is there any SYSTEMATIC way to find a theme that doesn’t have this problem or do most people get a collection of different browser rev’s and just randomly start trying themes until they find one?

  12. Posted August 20, 2007 at 5:55 pm | Permalink

    Fonts, for most people, is the least important element in choosing a WordPress Theme, though I think they are wrong. No, there is no “systemic” way of searching for font-specific themes. The WordPress Theme Viewer will allow you to choose layouts and colors, but not by fonts.

    The article on the WordPress Codex, the online manual for WordPress users, that would help you adjust the WordPress Theme of your choice is Playing With Fonts. Then you can stay with whatever Theme you like and only change the fonts.

    Trying to work around browsers is a nightmare, so don’t try to “match”. Just get close and it will be fine. Most viewers do not compare your site between browsers. Only you will do that. :D

  13. Posted August 21, 2007 at 8:37 am | Permalink

    “Most viewers do not compare your site between browsers. Only you will do that.

    I’m not expecting visitors to compare browsers!!

    But if I have a font size that looks good in my blog I want it to look good to all my visitors regardless of their browser. If I have it set so it’s comfortable and readable in Firefox I don’t want people using Internet Explorer to think I’m shouting at them because it looks so huge.

    I’ve been comparing canned WP themes using a couple of PC’s and 4 browsers – 2 IE versions and 2 FF versions, all with their default settings. The majority of canned themes have about a 2:1 text size ratio among the 4 browsers, but a few themes are almost exactly the same among the browsers. I wish all theme writers were that careful. Anyway, by exhaustive searching I’ve found a few candidate themes that I can probably adopt with minimal tweaking of the CSS to use my colors and background images.

    On the other hand, I have no idea how non-geeks ever blog; I mean, I can’t imagine my mother-in-law or sister ever editing CSS or PHP.

  14. Posted August 21, 2007 at 9:27 am | Permalink

    This isn’t an issue of web designers being “more careful”. It is a flaw in the nature of web browsers to not employ consistent compliance with web standards. The standards have been in place for years, but browser developers aren’t paying attention and making their own rules – see Microsoft for the true example of that statement.

    Web designers pick a “margin of safety” and go with that. Designing for every browser is unnecessary and time consuming, and they change with each release (again, Microsoft).

    We do the best we can to find an “average” and go with that in order to cover the most browsers the best way. There are no hard and fixed rules on this, since browsers keep breaking them.

    And, truth be told, few bloggers ever mess with their Themes, especially their fonts. At the most, they want the background color changed or the sidebar on the right or left. They want gizmos added, but few bother with the fonts.

    Besides, the issue of fonts is their flexibility. By choosing a base font and then using percentages on all fonts referencing that base font, you create a “relative font” which means if you use Firefox and press the CTRL+Plus or Minus keys, you can make the fonts larger or smaller based upon your particular needs. This makes the design compliant with web standards for accessibility, giving the viewer control over font size, not the designer. Fixed font sizes are bad manners.

    FYI, if you are struggling to do that, you are violating the most basic web standard on the web. Accessibility trumps “looks” every time in the mind of a true web designer.

  15. Posted August 21, 2007 at 11:30 am | Permalink

    “if you use Firefox and press the CTRL+Plus or Minus keys, you can make the fonts larger or smaller based upon your particular needs. This makes the design compliant with web standards for accessibility, giving the viewer control over font size, not the designer.”

    I’ll bet the average non-tech’y web-surfer doesn’t know that.

    “FYI, if you are struggling to do that, you are violating the most basic web standard on the web. Accessibility trumps “looks” every time in the mind of a true web designer.”

    I think this depends on who surfs blogs. I wish I had reliable data on this, but if 80% of web visitors were nontechnical visually OK web-surfers who could not be counted on to adjust their browsers and 10% were visually-impaired users who COULD adjust their browsers, common sense would suggest optimizing for the 80%. (I say this as someone who is somewhat visually-imapaired but capable of adjusting my browser)

    I have a photo website (pnArt.com) that ASSUMES high-resolution and high bandwidth – I know I’m losing out on many visitors that way but I’m more concerned that my photos look the way I want them to.


One Trackback/Pingback

  1. [...] This was one of the motivators for me to start changing the site. 100% Easy to Read Standard make a good case and this is what pulled me over. I have also read similar opinions from others I respect. [...]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,280 other followers

%d bloggers like this: