Wednesday, 5 October 2011

Font sizes

OK, I am expecting to be shot down in flames here - but here goes...

For a start, I fully appreciate that marketing types have very strong ideas on the choice of fonts and sizes and colours and all sorts. If you see a brochure printed or a menu in a restaurant, or anything else marketing have a hand in, then they have chosen the font size, type, style, colour, spacing, everything. They have to - on paper you have no choice and they have control.

However, on a web site, and very specifically a web site that is not marketing but the control pages on a product, that may be different.

My view is that the end user can choose to set the font size they want as a default, which I presume is what they want for the main body of text they see. They pick the font family. They pick background colours even. So having said I prefer 16pt Helvetica, why should a web site overrule my choice - my preference?

We have just had a heated debate that seems to centre around the fact that a lot of (most?) web sites choose to set a font size for the body text that is smaller than default. Some set to a specific font size, which I think everyone agrees is bad, especially anyone disabled, but many set relatively small compared to chosen default font size, e.g. 62.5%.

Why? Is that the right thing to do? Is it right because everyone else does it and so should browsers offer font size choices with perhaps the standard reduction in size as a size in brackets so you can in fact choose correctly?

Should all web sites and all control pages work on body text that is small?

We have had a product for over 10 years that does not set font size and nobody complained in any way - indeed many people said it was a good web interface. Now we have a new product and followed a web designers views (at least so far) for how to do it and the font is smaller. I am trying to clean it up and make the font what the user selected. I am being hounded on irc that I am wrong. Am I?

Should we second guess our users and pick a different size and font family?

Someone has, rightly, pointed out the A&A web site does this. I am now thinking I should fix that. The various control pages we have don't, after all, change font size.

So, what is right here - second guess the users choice, or respect it?

30 comments:

  1. Respect the user - it boils my earwax when a page forces (or rather attempts to force) something unreadable on me.

    If it's worked for 10 years, why change it?

    ReplyDelete
  2. The answer, of course, if for css to allow a page to set these things as "only if the user has not expressed a preference"... Then sites could set what they think looks nice and not piss anyone off.

    Sadly css is not like that.

    ReplyDelete
  3. You wouldn't listen to your designer's opinions on PPP configuration options. I'd say don't interfere with his work on your new UI, unless of course you don't trust him, or haven't briefed him properly.

    If he's turning out web pages that don't render readably, he's not a very good designer, or is having a hard time saying "no" to your requests for cramming the page full :)

    The "default font size" in most browsers is an irrelevance; they all seem to support the ctrl-+ shortcut to make a UI bigger and most people understand how to use that. Client-side CSS is not very well supported, but it's fairly easy to make sure your designer doesn't stomp on e.g. blind users' choices, or those who prefer to browse in a no-fluff / no-images mode.

    ReplyDelete
  4. Wow, interesting feedback there. So the setting *I* set in my browser for the font size *I* want is irrelevant. Glad to know that.

    ReplyDelete
  5. I was actually suggesting, as we are having trouble agreeing amongst ourselves, that we have a config option in the system to set the font size. Problem there is that if we have that, and someone sets, say 16pt, then we would have to make the page itself come out at say 13pt, because "that is how it is done". i.e. it is normal to ignore what the user actually sets and pick something different. But if that is the way it is done!

    ReplyDelete
  6. The main problem is that font sizes used to default to 12pt, and this was in my view a sensible default. These days Firefox seems to default to 16pt font sizes, which for me is far too big. Yes I can change it, but if it's too big for me isn't it likely to be too big for others?

    We all know that all but the most technologically savvy users never change any settings whatsoever - even I haven't fixed the font size in Firefox.

    ReplyDelete
  7. As long as they don't muck around with the text foreground colour .. *especially* if they don't touch the background colour. Oh how amusing it is when someone sets text to black, and leaves background at default...

    Personally, if there was a way to tell that the user had selected anything other than default - I would render text as the user requested. Overriding someones explicit choice is often a good way to annoy them.

    ReplyDelete
  8. With well designed websites and a good browser you can have the best of both worlds. The designer gets to set the fonts sizes and layout that they thinks best and the user can hit the zoom button if they feel the fonts are too big or too small. A decent browser will remember the zoom setting for the website next time you visit.

    I don't know what you've done with the aaisp.net front page, the font sizes are huge now, I can't remember the last time I had to reach for the zoom out in Chrome !

    ReplyDelete
  9. Chrome by the way defaults to 16px (not pt) fonts, which seems about right to me.

    ReplyDelete
  10. I use em for font sizes, I normally set main content text to 0.8em of default (using Arial), different fonts need different sizes.

    User is free to resize the text via their browser.

    ReplyDelete
  11. I tried setting the A&A web site to use the font size you have actually set in your browser. Saying it is too big is interesting. Yes, it looks big, but is in fact what you asked for!

    We suspect this is down to some battle that has been waged over the years - probably with some browser (e.g. IE) having a silly large font size by default so every web site having to scale it down to look sane, and then other browsers having to have silly large defaults not to look different.

    The end result is nobody gets what they asked for, which is, in my opinion, a completely stupid state of affairs.

    Sounds like I am going to have to live with the fact that there is a "fudge factor", or "web designers point size" now and that is that. Frustrating that we have to lie to our browsers as to what size we want.

    ReplyDelete
  12. Andy, the 16px "looks right" probably means you are not actually looking at 16px text on the web sites you visit. I bet if you look at a web site that is not scaling down your 16px to something smaller you would say it looks big. I may be wrong, but that seems to be what is happening.

    ReplyDelete
  13. As for "User is free to resize the text via their browser.", well not really. A user cannot actually say "I would like the normal text to be 10pt". They have to lie and say they want 16pt in order to get 10pt. That is my point (pun intended) here.

    Sounds like I am stuck with it, but it is crazy, IMHO.

    ReplyDelete
  14. Hmm, http://www.w3.org/QA/Tips/font-size says "Size: respect the users' preferences, avoid small size for content" but goes on to concede that as many web sites do scale the font down it means you look big!

    Looks like the recommend using "xx-small | x-small | small | medium | large | x-large | xx-large"

    ReplyDelete
  15. In principle I agree, but I think it's wrong to equate "the browser's default font size" with "what the user asked for". We all know that the vast majority of browser users have never even opened its Options dialog (although I'm sure this doesn't apply to visitors to A&A control pages!)

    To some degree I suspect you're right about browser defaults being large, and hence web sites having to ignore them, but there's something else to consider: a font that would be far too small to be readable in an unformatted screen-wide block of text can be just fine as part of a well-designed layout with a controlled column width. On this basis, I think it's reasonable to specify the size with the layout.

    Specifying the typeface is slightly different - arguably the above reasoning doesn't apply, but on the other hand the choice of typeface is fairly clearly part of the visual design, along with colours, layout, etc.

    ReplyDelete
  16. Great, so setting font-size: 62.5% in the body means you then have to use em based sizes and cannot use the W3C recommends "small", "large", etc, as they are based on the actual users settings not the scaled ones.

    Arrrrrrrg!

    ReplyDelete
  17. According to the W3C px is not intended to be a fixed size when it comes to fonts:

    http://www.w3.org/Style/Examples/007/units.en.html

    On Chrome (both OSX and Win7 versions), Safari, Firefox (Win7) and IE9 (Win7) on my Mac all agree that, 1em and 16px both equate to capital letters in Arial being around 12 pixels high at the default zoom. So there would at least appear to be a lot of agreement between the major browsers over what a px and em mean at the default zoom.

    ReplyDelete
  18. px should be pixels on standard zoom. Bear in mind that the font size is usually the default line to line spacing with no extra leading, so height of a capital A is not the font size. You need to look, at least, for bottom of a descender to top of a capital and then a couple of pixes on that. That is just how font sizes are defined.

    i.e. 16pt text does not mean the height of an "A" is 16pt, but that top of one A to the top of thee next A below it will be a minimum of 16pt. Often pt == px is assumed though pt is closer to 1/72nd of an inch.

    As wikipedia says "In metal type, the point size of the font described the size (height) of the metal body on which the typeface's characters were cast.", and yes, I have layed out lead mono-type myself...

    ReplyDelete
  19. CSS 'px' are not physical output pixels on any zoom level - that's not how they're defined: http://www.w3.org/TR/CSS2/syndata.html#length-units

    But swaldman makes the most important point, which is that the appropriate size for text *depends on the layout* (particularly line length) and so it's quite unrealistic to expect that one party controls one and another the other.

    With respect, the Clueless web pages do not look like anyone has made even the slightest attempt at either aesthetics or usabilty - you will probably not find them to be persuasive support in an argument about design.

    ReplyDelete
  20. OK, I thought some of this was mad before, but defining "pixel" (which is surely what "px" stands for) as anything but a "pixel" seems even madder than usual.

    ReplyDelete
  21. I wasn't making any claims with regard to how the 12 pixel height of the A related to points or px, it was just an easy way to compare what the major browsers default sizes were. I was very surprised to find that they all agreed, across two different platforms ;)

    ReplyDelete
  22. Yes, sorry Andy, this whole thing is getting more and more confusing as you look in to it.

    I think we have compromised on font size now, I think, but now having the whole argument on forcing a specific font family (typeface) on users of the control interface now.

    ReplyDelete
  23. It seems to me that any web site which forces certain settings (my least favourite is one site which resizes the window to the full 3840x1080 of my desktop) are simply as a result of a "can't be bothered to do things properly" method of web design.

    It's not often I say this (!), but I'm in full agreement with RevK. Let me decide how I want to view a web page. If you really really want it viewed in a certain way, then by all means put a button/link in that will redraw it your way, but please don't assume your way is the way I want/need.

    ReplyDelete
  24. The debate internally is hitting brick walls - we all care about how this looks to end users and if it is usable and looks good and so on. Sadly we do not all agree on what that solution is, and whether we should "impose" font typeface and size on users or not.

    My solution, for your amusement, is cookie based control on the footed - click it and you switch to using browser default typeface and size and it remembers that. Keeps me happy. Lets the debate on what is in fact the best default to go on without me - I find it impossible to cope with such debates (and I am not alone) as they are all second guessing other peoples preferences with no way to be sure we are right.

    ReplyDelete
  25. I don't think you can take the browser's default as what the user selects, if it is the default, the user had nothing to do with it.

    When you start down that line of thinking where do you end? If I make my web site blue but the user wants red what then? The web would start being a raw text system where you feed them the text and they read it as they want, like a RSS feeder.

    In Firefox/Opera/Chrome the user can select the Minimum font size, meaning the web designer gets to set it as they want it, but only if it drops below the users minimum does it change its size.

    At no point do they need to select 16pt to get 10pt.

    You also need to remember that the browser also sets the default font as Times New Roman at 16pt, as soon as the web site changes the font to Arial and does not set a font size the text gets larger as Arial displays larger then Times New Roman, so by setting it to Arial and making it a little smaller the web designer is just resetting the font size back down to what it would have been had they been using Times New Roman.

    The default font and size settings are from the days of raw HTML sites where no formatting was set and are used if the user turns CSS off, if their browser lets them do that.

    A really good browser (aka Opera or others with add-ons) lets the user apply custom CSS to all web sites, giving them total control to override all design.

    If the user likes all their text on their computer large, they can set that in the OS, which then applies to web sites without having to set anything in the browser.

    In the end the user has total control, as long as they are using a good CSS web site that hasn't gone and made text out of images or flash for example.

    And when talking about pixels, we are talking CSS pixels here and not real 1 to 1 mapped screen pixels, as viewport comes into play. "CSS pixels, which are, believe it or not, a relative length unit. 1 CSS pixel can consist of multiple device pixels: in the case of Opera Mobile on the HTC Desire for instance, 1 CSS pixel is equal to 1.5 device pixels" http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

    At the moment this is just a mobile thing, but once we get high-DPI screens on our desktops and laptops the same will apply.

    ReplyDelete
  26. The meaning of "default" here is not "the user did not set it" it is "the web designer has not specified it". I specifically set the "default font" on my browser.

    Same with colour, you can make your web site to have not specified the background and the browser uses what the user specified. I have a purple background and it is fun seeing pages that have not set it but need to have for their style to look at all right.

    As for selecting 16pt to get 10pt, in practice it is more like selecting 16pt to get 11pt or 12pt. It appears to be common practice to first scale 62.5% and then use em scaling with main body text at 1.1em or 1.2em (i.e. 11pt or 12pt if the user set default font size to 16pt). As such if a user wants to see the main body text at 11pt or 12pt, as most do, they have to have the browser set to 16pt default font size (or have a min font size set as well).

    Basically, we have this crazy state of affairs where it is not usually right for the main body text of a web page to be the users "default font size" (or typeface). We are stuck with that. It is a shame, but that's life.

    As an aside, I am trying to work on using font-size "small" as the font size for the main body text. That stands a good chance of being a sensible size as the browser decides what "small" means, and can take in to account the device in that context. It is not the default (which is "medium") but is closer to what most people expect. On FF here with 16pt default it is 13pt, slight bigger than many sites that pick 12pt or even 11pt as body text, but it does mean using W3C recommended units for font sizes, i.e. named sizes like "small", "medium", and "large". I may re-work our main site along those lines some time.

    Certainly, now I have researched this a lot more I will give a lot more careful consideration to how we handle font size and typeface on web pages and control pages for various applications.

    ReplyDelete
  27. Right next to where you are setting 16pt in Firefox, click Advanced and you can set the Minimum font size to 13pt and that's it, any text on any site that would display less then 13pt, is resized up to 13pt.

    You can even select that you don't want web sites to be able to set the font used.

    If the user wants to see all web sites at not less then 16pt they can do that, by just selecting 16pt Minimum font size, not having to think that they need to select 26pt as by the time a site makes it 62.5% smaller it gives them around 16pt.

    The browser default is saying to display Times New Roman at 16pt, not Arial or any other font. The text displaying so large in Arial or any other font after only specifying the font is a unintended side effect, that the designer keeps if they like how it looks or they correct, by then setting a font size.

    You can design your web site to work to the defaults and not specify any font or sizes, there is nothing wrong with that, but as soon as you (the web designer) change the font to something other then Times New Roman the defaults go out the window and you need to then set the size to how you (the web designer) want it to look.

    The user can then override whatever you set using Minimum font size and/or not letting the web site select the font.

    Not setting a background colour when your design needs it is bad web design.

    ReplyDelete
  28. I know you can set a min size. I have a min size. I said you can set a min size. The point is that the default size has to be set to something other than the main body text you want. That is the point. It is not something we can fix - it is just life that it is not like this.

    Yes, if you want to not see less than 16pt, you can set a min to 16pt.

    But if you want the web site to be generally say 12pt, with some things bigger (headers) and some things smaller ("small print") you cannot say "the default font should be 12pt". You have to say "the default font should be 16pt" to achieve that.

    The browser default font says to do what I say to do, which in my case is sans-serif 16pt.

    The web page designers are accepting I can set a font size, they scale the font they are using based on the font size I set. However, they make the majority of the page smaller than the size I set. So to get a page that is generally of a specific size I have to set a font size that is bigger than I want.

    We seem to both understand what you can do and what happens. I am not sure why there is any discussion.

    Yes, you can set font size, just that what you set in the browser has to be about 30% bigger than the size you would like to see in the body for most web sites. Shame it has a fudge factor Just life...

    ReplyDelete
  29. I see what you are saying, seems like the browsers should replace their default of 16pt with 100%, people can then change it to 130% making everything 30% larger, which would have the same effect as it does now but make a lot more sense to the end user in the UI.

    They already do this for their zoom settings.

    ReplyDelete
  30. Well, ultimately, there is a size for the text that is displayed with no font-size setting. That is 16pt. Calling it 16pt or calling it 100% does not change that.

    Whatever you call it, the web designers still have to fudge that and display the body text smaller than default because the 100% or 16pt or whatever you call it, is too big for most people's preference.

    In an ideal world the browser would have a default font of 12pt not 16pt, and the web designers would not set a font-size on the main body text at all, or set to "medium"...

    The fact we need a fudge factor on every web site to compensate for the bad default default on every browser, is just broken, but we have to live with that now.

    ReplyDelete