Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Best font size for improving user experience metrics?

         

Zivush

1:24 pm on May 14, 2012 (gmt 0)

10+ Year Member



I know that this question seems unrelated, however user experience on the site becomes one of the most important factors for any search engine.

It is said that for the Body Text, anything 'less' could turn to be a costly mistake.
I heard in some places the 16 pixels (even higher) for the body text of the site is the optimal for many ages and browsers.

Any input is appreciated.

tedster

5:38 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Exact pixel sizes are not a good way to go - they are not responsive to different screen sizes and resolutions.

Check out this current thread:
Shouldn't We All Be Developing Sites For Responsive Design [webmasterworld.com]

netmeg

5:43 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



(fwiw any site with smaller than 12pt loses me, even with my glasses on)

aristotle

6:22 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Isn't it true that if you don't specify a font size, then the browser will use its default settings, which many people have adjusted to their own preferences? I know that these can sometimes be over-ridden, but it might be best to just let the browser use the default.

Marshall

6:30 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If I come across a site with too small a font, even if I can adjust it, I don't care to stay there. Same applies to those who like using light grey fonts. If it is too difficult to read, it is not worth my time.

Marshall

dougwilson

9:30 pm on May 14, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



I use .9em

incrediBILL

10:25 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Exact pixel sizes are not a good way to go - they are not responsive to different screen sizes and resolutions.


Yes, but you do need to pick a default font starting point to design around that sets the tone for the overall look and feel of the page. Obviously the font can be scaled up and down based on the media after that, but you must start somewhere!

light grey fonts.


People forget the over 40 crowd may not always have an issue with the size of the font but the contrast of the font and the background can be a real issue. Light fonts on a light background or dark fonts on a dark background color that reduces the reading contrast is a tab closer!

Besides, we already know that Google has been evaluating CSS to see if people are cloaking text, such as white font on white background, for keyword stuffing purposes so evaluating the text size is probably another signal as well.

I think overall font size and text density may be used by Google as one of their bazillion signals of site quality that could tilt their opinion of whether your site is quality vs. spammy. For instance, putting 100 words in an <h1> tag or a really big font might be considered a tad spammy. Likewise, putting a lot of text in a font size smaller than 10pt would also probably set off some potential keyword stuffing bells and alarms.

In other words, if the page doesn't look 'normal', the algo probably flags it, bags it and tags it as "not intended for humans", so care should be taken with picking fonts IMO.

lucy24

10:37 pm on May 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I use .9em

i.e. 90% of the user's preferred size?

Isn't it true that if you don't specify a font size, then the browser will use its default settings, which many people have adjusted to their own preferences?

I would have assumed that everyone has it adjusted to their own preferences-- but I guess some users have never set foot in any aspect of their browser's prefs.

Who's your target audience? If you're aiming at a bunch of 19-year-olds, sure, go ahead and use nine-point blue type on a neon green background. But if you're hoping to reach grownups, don't mess with their settings. If you do, they will either override you-- which blows the point of setting a size in the first place, and may make mincemeat of your size-dependent design-- or just quietly leave.

:: detour to snoop ::

The present page says, archaically but properly, <font size = "1">. Though, ahem, it makes up for it by specifying exact names instead of falling back on "sans-serif" ;)

dougwilson

1:00 am on May 15, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



i.e. 90% of the user's preferred size?


I recently made a page with nothing but

<html>
<body>
ex: font-size:12,13,14px;
ex: font-size:1em;
ex: font-size:100%; etc.

Just to see how each looked. Then I picked one. I don't set font family, just size, serif.

I don't have a msie browser or windows but I used Adobe-online browser checker. I grabbed girlfriends smart phone and somebodies tablet. Looked fine (IE).

.9em just won out. Do the same with wordpress. I can hardly see the 64.7% or whatever wp default is.

tedster

4:15 am on May 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Two other font readability issues are line-height (please DO set that higher than the browser default) and how many characters are on one line of type. I find that longer lines are more difficult to read and lose visitors more easily.

If you must "go wide" for some reason, then line-height becomes even more important. Also make sure the left-hand side of the text block has an obvious visual "stop here" clue. so that the reader's eye has an easy landmark for where lines begin as it reads down the page.

When it comes to font usability, there is a massive interaction between several factors - at least these can have dramatic effects:

  • the actual font itself
  • how its size is declared
  • line-height
  • line width within the page layout
  • eye-return cues
  • and even letter-spacing in some cases.
  • dougwilson

    11:39 am on May 15, 2012 (gmt 0)

    10+ Year Member Top Contributors Of The Month



    "other font readability issues are line-height"

    I tried everything suggested as far as line height and other font settings. I only started learning html 4 years ago so I tried to follow advice of experts.

    I never could find a line height/word spacing/font size combo that was close to the same in different browsers. When nothing I did worked as well as default, I left it default.

    There are too many browsers out there that I don't have access to. I figure if browsers don't render, by default, something that makes life easy for users - Users can use other browsers.

    netmeg

    12:21 pm on May 15, 2012 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



    I prefer not to make them work for it.

    I use about a 140% line height, and nothing under an effective 16px font size. I like the white space, and it renders readably on every browser I've tried, including my iPhone and iPad.

    Zivush

    5:00 pm on May 15, 2012 (gmt 0)

    10+ Year Member



    Thanks for the inputs.
    Adding some more info I’ve red lately about why choosing 16 pixels?
    • Ages: As it mentioned earlier, vision changes as we getting older. People lose their vision at ages 40, 50, 60. There’s a loss of focusing ability.
    • Best distance for reading letters: The font size is one of the biggest factors to determine how far this distance can increase.
    • Sitting comfortably while reading: 16-pixel text on a PC screen is almost the same size as text printed in a paper.

    Made an experiment with my 9 years old son (he is my preferred tester :-), gave him two versions – 14 pixels text and 16 pixel text. He selected the 16 pixles’s.
    If this is the choice of a younger, what else?