How to Control Font Size in Percentage

by Hiroshi on April 21, 2009

in fonts, HTML

font-percentagesTo control fonts in percentage is the easiest method which we can choose while playing with the fluid layouts, or perhaps while working with widgets and web 2.0 elements.

It is recommended while working with layouts that we define a standard font size for html and body. In the beginning there were loose style for fonts. Nobody used to care about styling fonts. Then in the design era of computer age, designers developed and adopted techniques to control different design aspects of websites and usually most popular standard was to choose 11px to 12 px font for HTML. Many years this technique prevailed until web 2.0 arrived and some web architects decides that fonts must be clear and bold. So now designers and developers adopt a technique to display large font sizes. Font size, color, face are also a part of the design. Here is how we can control font by percentage as a unit for font size.

<div style="font-size: 100%;">100 %</div>
<div style="font-size: 150%;">150 %</div>
<div style="font-size: 300%;">300 %</div>
<div style="font-size: 400%;">400 %</div>
<div style="font-size: 500%;">500 %</div>
<div style="font-size: 600%;">600 %</div>

There are other font size units too e.g. pixels, points, inches, cm, mm etc. Percentage is one of these. Widely used as a standard is em unit for font size, which is considered to be the same for all browsers if browser compatibility is in mind.

<div style="font-size: 12px;">12 px</div>
<div style="font-size: 12pt;">12 pt</div>
<div style="font-size: 0.5in;">0.5 in</div>
<div style="font-size: 1cm;">1 cm</div>
<div style="font-size: 12mm;">12 mm</div>
<div style="font-size: 2pc;">2 pc</div>
<div style="font-size: 2em;">2 em</div>
<div style="font-size: 6ex;">12 ex</div>

Related Posts

Previous post:

Next post: