Thursday, 7 May 2009

Different methods of resizing text on the web

There has been a lot of discussion among the web designers to flexibly control the size of the text on the internet. You must all be aware of a well known problem with the internet explorer. The problem lies with the resizing of the text which you cannot perform no matter how much you try to zoom in or zoom out your text. Here we will take a look at the three common methods of displaying text on the web pages.

Pixels

Pixels are the most ancient method of defining font sizes on the internet. You can define the height and size of the font in pixels

<p font size=16px> </p >

The above mentioned example changes the font size to 16 pixels for the standard text and 14 points for the sidebar. You can easily change your font size using this example but the problem starts when you try to resize your window or zoom in or zoom out on the text. To overcome that problem, percentage based or ems based scaling is used.

Percentage
The % sign gives you the flexibility to define a font related to the page size. This gives you the option of displaying font on pages of varied size and resized pages. When font size is defined in percentage, it gives you freedom from page size. Your font will be automatically adjustable with the visitor's screen. Here is the method to use %age in fonts over web pages.

<p font size=10%> </p>

In order to give accurate referencing of font size, you cab use EMS.

EMS

EMS s the best method of defining font sizes. It takes into consideration the relavent size of the visitor's base font and the target font to calculate the actual font size. EMS is used widely in CSS, grids and liquid designs. This method allows you to accurately define your font size while getting freedom from the page size, browser type and device type.

EMS is calculated by the following formula

EMS = Target Font ÷ Base Font

Lets us assume that base font is 14 for the target browser and your desired font is 24 then
EMS = 24 ÷ 14 = 1.714
Yopu can round it to 1.7 and the browser will automatically adjust to the nearet possible font size.


<p font size=1.71em> </p>

As shown in the above example, the size of the font will automatically adjust itself with the relevant screen size and thus will not look bad.

If you are looking for extremely professonal and liquid web designs, you can contact Quote Bean for custom quotes from our suppliers in the UK.
Follow the links beloew to learn more about wqeb designing

No comments:

Post a Comment