If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Web typography has started to be on a high level of interest over the last year, in many debates, articles, tutorials, and theory for more knowledges. Good theory needs control so the results to be precise in size and height. The problem is on the web, since the developer has the chance to control the design, and more its implication can change the image that the text will have on the web.
The following article, tries to put together designers needs for the accuracy, when it comes for resizing text on demand, needs that must be satisfied when it comes across browsers and platforms.
Test suite
The following text that we are using in the following article is a text based on a two column layout, having a body copy on the left and a side bar on the right. The format can be set at what ever you want, I choose Arial, because is better for adding consistency for operating system and platform.
The browser used if first Firefox 2 and Opera, than I.E 6, 7 having Windows XP with ClearType turned on. The list of the browsers is not very complete but, I think that the majority use this. Each browser is being used and run with its default settings. So, each browser can be tested particular to see if it can accept different size of texts, medium, large, largest. ..because they are OK..on that..
Text size in pixels - I
We are using a default text size, so the base case will have a great starting point, but since most, developers, designers, clients, 16px can be large for a body text. So we are applying a size of 14, but you can apply what ever size you want, but the sidebar at 12px. Set the fonts in pixels :
Mozila will resize the text, but IE 6 and & don’t. By using the zoom tool you can resize it also in Opera and IE 7 and the page layout will be nicer.
Text size - II ems
We are all aware that browsers are different from pc to pc, and more or less, these browser stats are being sometimes wrong understand, so IE 6 remains the great browser in history. When you are set up the pixels to your texts, then you will don’t have to resize it anymore. On IE 7 you need to resize the text, by using the zoom control .
Then the next step for resize is ems. This is real typographic form, that W3C recommend. Using default 16px, the style must have the text size that you want :
Size the body in percentage
When you are ready to resize your text for fixing it on IE 6, 7 try and use percentage. Very imporatant is to retain the ems on the content.
Set line height in pixels
Recent articles about web typography says that good typography are needing vertical grid, solid vertical rhythm that is obtain with a consistent, line-height. The line-height should be regardless by the size of the text.
You will see that in your result 18px line-height is inherited by all the text on the page - the text bar has the same rhythm as the body copy.
Set the line heights in ems
In case that there are problems with pixels, turn to ems. When you make the same mathematic codes again..you have the result..
Conclusion
The following tutorial was to find ways for re-sizing texts which can allow to developers to retain perfect control on typography, no making sacrifice when users are reading from their environment. On the various browsers that we can find on www, sizing text can be very hard sometime. The fallowing tutorial is a great tip that can be used in many practice for using and resizing text in CSS and satisfy also the readers and developers.