{"id":678,"date":"2008-08-12T12:40:21","date_gmt":"2008-08-12T19:40:21","guid":{"rendered":"http:\/\/wapreview.com\/?p=678"},"modified":"2008-08-12T12:58:03","modified_gmt":"2008-08-12T19:58:03","slug":"mobile-web-usability-font-size","status":"publish","type":"post","link":"https:\/\/wapreview.com\/678\/","title":{"rendered":"Mobile Web Usability – Font Size"},"content":{"rendered":"

\"SmallIf you use an advanced full-web browser like S60WebKit or Opera Mobile you have probably noticed that text size varies widely from site to site. It’s not unusual to encounter sites where the text is quite hard to read when the browser is set to it’s default zoom level. A good example is the NBC Olympics site (top image). The text in the screenshot is probably readable if you are viewing this on a PC, but try using your browser’s zoom function to re-size the image to the N95’s 2.6 inch (7.5 cm) diagonal size you will find the text quite hard to read<\/strong>, as it is on the actual handset.<\/p>\n

Fortunately S60Webkit and Opera Mobile do let you zoom in to find a comfortable text size for browsing. But zooming isn’t an ideal solution, it scales up images degrading quality and often making them wider than the screen. Constantly having to change zoom level is inconvenient as well. It doesn’t help that some browsers like Opera Mobile 8.65 on my Motorola Z8 bury the zoom option a couple levels deep in the menu tree. I’m sure many users don’t even realize that the browser has a zoom option.<\/p>\n

I think the problem of inconsistent fonts is the result of mobile web designers trying to optimize the appearance of sites to specific browsers. NBC Olympics sets the body element’s font-size<\/code> to x-small<\/code>. I’m sure it looks great on the devices that the designer tested against but it is on the small side for S60WebKit and Opera Mobile. \"LargerIn comparison the BBC’s mobile page (bottom image) is very easy to read on these browsers.\u00a0 Unfortunately a page that looks perfect on one handset may be unreadable on another. It’s not easy to specify a readable font across devices. Unlike on the PC web where there are only three or four browsers to worry about, there are dozens of different mobile browsers. The resolution and physical size of phone screens also varies greatly. So what can designers do to create a more consistent experience across devices? The answer depends on whether the site is using browser detection and adaptation or not.<\/p>\n

The simplest approach, for “one size fits all<\/em>” sites is to set the font size to the browser’s default with “font-size : medium<\/code>” for main text content. Not specifying a font-size at all should have the same effect and shaves a few bytes off page weight. It may not give the prettiest result, but any browser’s default font size is pretty much guaranteed to be readable. You can safely use small adjustments like 1.1em<\/code> for headlines or 0.9em<\/code> for links to things like privacy policies.<\/p>\n

If you use browser sniffing it is possible to optimize the experience for known and tested<\/strong> handsets. This is something where there is no substitute for testing. A browser characteristics library like WURFL<\/a> or DeviceAtlas<\/a> won’t help you here. There simply isn’t any data that will tell you if a given font will be readable on a device. With thousands of different mobile handsets in use worldwide it’s impossible to test them all. For unknown or untested handsets you should fall back to a generic version of your site using the browser’s default font.<\/p>\n

Ensuring that your mobile site has a readable font is not just a aesthetic issue, users will not use a site that is hard to read<\/strong>. When in doubt use the browser’s default font size for the site’s main text content.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you use an advanced full-web browser like S60WebKit or Opera Mobile you have probably noticed that text size varies widely from site to site. It’s not unusual to encounter sites where the text is quite hard to read when the browser is set to it’s default zoom level. A good example is the NBC Olympics site (top image). The text in the screenshot is probably readable if you are viewing this on a PC, but try using your browser’s … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":14048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[64],"tags":[212,207,211,1418],"_links":{"self":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/678"}],"collection":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":16,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":693,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/678\/revisions\/693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media\/14048"}],"wp:attachment":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media?parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/categories?post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/tags?post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}