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.

So, obvious this article is out of tables for you, is just debating CSS ‘history’. CSS for many is the only way of succeding on developing and in this high level professionalism that we see daily. You can get clear and standard codes, but also you can improve your page permanently, and apply changes. CSS offers you more flexibility, but when or where it starts everything? We will provide some structure that you can start easily with..

First you have to analyze and define areas/boxes/ID containers

When we start developing, we start analyze my design. We consider what to cut, and what not to. This is the part of converting the ID containers, the boxes/areas. Making a flashback, we can imagine how the design will show, the header, the navigation, left and right are where your content is. If you want make a draw on a paper, and imagine how it will look. The big areas are very important. Then divide the big area in smaller ones.

  Have your background defined

During the process of defining the boxes and areas, also an important thing is the background. Being in a position to use multiple types of backgrounds you are sometimes in difficulty to choose one, because more, it happens to be pattern, or it might contain a illustration picture. This depends on the type of the background that you decide to choose, the theme that you have, the background defines the style-sheet that you have,

So, to sum up this, each box and area represents your background.

Web saving

This is the way of saving your images, and here you have more options : gif, jpeg, png. So, on design it depends on what you need to change, then you will use png. images to upload.

 Use CSS to built boxes

After you have finished our work and managed to save our images, its time to work with CSS and define the boxes. The name is very important for the boxes. For code, try and use comment ones so you can find their your way. I said that because the CSS code becomes very long, and you need to be focus on it. Now you can start your structure along, make the body tag, ID containers/boxes and text styles.