<pedrocorreia.net ⁄>

<What is the best font size to use in Website Design? ⁄ >

clicks: 3702 3702 2006-11-20 2006-11-20 goto tecnologia myNews tecnologia  Bookmark This Bookmark This

Well, there is no 'best font size'! Just don't 'fix' your font size absolutely.

Because of the wide range of settings and equipment that people might be using to access the World Wide Web, there is no "best font size". Font sizes should be specified using relative units like percentage or EM, (in external CSS files) since these will allow the user to adjust font sizes up or down to suit their own requirements. Avoid using graphics of text, as this locks the text size, and makes it impossible for users to change it.

Best Font sizes to use

Unless you're a web designer, of course, a Windows, Macintosh, or other system will have only a handful of fonts installed. There is little overlap between the default installed fonts on these various systems. Already with many browsers, and increasingly in the future, readers will be able to decide on the fonts they want to view web pages with. With CSS, you can suggest a number of fonts, and cover as many bases as possible. But don't rely on a font being available regardless of how common it is.

More important still is font size. You may be aware that the same font, at the same point size on a Macintosh "looks smaller" than on most Windows machines. In a nutshell, this is because the "logical resolution" of a Macintosh is 72dpi, while the Windows default is 96dpi. The implications of this are significant. Firstly, it guarantees that it is essentially impossible to have text look identical on Macintoshes and Windows based systems. But if you embrace the adaptability philosophy it doesn't matter.

If you are concerned about exactly how a web page appears this is a sign that you are still aren't thinking about adaptive pages. One of the most significant accessibility issues is font size. Small fonts are more difficult to read. For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point times on paper. Screens are less readable than paper, because of their lower resolution.

Does that mean the minimum point size we should use is 14 pts? That doesn't help those whose sight is even less strong. So what is the minimum point size we should use? None. Don't use points. This allows readers to choose the font size which suits them. The same goes even for pixels. Because of logical resolution differences, a pixel on one platform is not a pixel on another.

You can still suggest larger font sizes for headings and other elements. CSS provides several ways of suggesting the size of text in such a way as to aid adaptability. We'll look at just one to get an idea.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the BODY of the page. If you don't set a size for the text in the BODY, then the text of the BODY will be the size that the reader has chosen as their default size. Already we are aiding adaptability of our page, simply by doing nothing!

You might say "but the text looks too big" if I just leave it like that. Make it smaller then. But in your browser. And your readers will then have the option to make it bigger or smaller in their browsers too, depending on their tastes, or their needs.

We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text. Similarly text can be scaled to be smaller than the body text, however, this can give rise to situations where the text can be illegibly small, so use with caution.

este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:


Subscribe News RSS  Subscribe News Updates by E-mail

myNews <myNews show="rand" cat="tecnologia" ⁄>

MongoDb Architecture new ...

NOSQL has become a very heated topic for large web-scale deployment where scalability and semi-struc (...)

clicks: 18022 18022 2012-05-14 2012-05-14 goto url (new window) horicky.blogspo... goto myNews tecnologia

A Hopefully Fair and Useful Comparison of Haskell Web Frameworks new ...

Recently there has been a lot of discussion and questions about the differences between the big thre (...)

clicks: 14570 14570 2012-05-13 2012-05-13 goto url (new window) softwaresimply.... goto myNews tecnologia

Retina graphics for your website new ...

retina.js is an open source script that makes it easy to serve high-resolution images to devices wit (...)

clicks: 14405 14405 2012-05-11 2012-05-11 goto url (new window) retinajs.com/ goto myNews tecnologia

What every programmer should know about memory, Part 1 new ...

In the early days computers were much simpler. The various components of a system, such as the CPU, (...)

clicks: 15754 15754 2012-05-10 2012-05-10 goto url (new window) lwn.net/Article... goto myNews tecnologia

The State Of HTML5 Video

HTML5 has entered the online video market, which is both exciting and challenging for developers in (...)

clicks: 6303 6303 2012-02-14 2012-02-14 goto url (new window) longtailvideo.c... goto myNews tecnologia

A Tour of Amazon's DynamoDB

Amazon's recent release of DynamoDB, a database whose name is inspired by Dynamo, the key-value data (...)

clicks: 5978 5978 2012-02-13 2012-02-13 goto url (new window) paperplanes.de/... goto myNews tecnologia

Video: CSS3 Secrets: 10 things you might not know about CSS3

A number of prominent front-end developers delivered helpful talks at this year's Fronteers 2011 con (...)

clicks: 6519 6519 2011-11-30 2011-11-30 goto url (new window) css.dzone.com/a... goto myNews tecnologia

Google BigQuery Service: Big data analytics at Google speed

Rapidly crunching terabytes of big data can lead to better business decisions, but this has traditio (...)

clicks: 5658 5658 2011-11-30 2011-11-30 goto url (new window) googlecode.blog... goto myNews tecnologia