While building pixel perfect website, sometimes we landup in major issue if we want to change the font of the website. In our pixel perfect a simple
change in font size or family disturbs whole layout. So to build font based web-page 'em' unit should be used to give dimensions to the containers.
'em' unit gets calculated , based on the basic font you defined for the page.
the basic formula goes like:
1em = basic font size of the page.
Lets say you defined font-size:12px;
now, suppose we want to build a div container with width 120px and height 240px.
.container{
width:120px;
height:240px;
background:#aaa;
}
so to convert 120px into em:
120px (width of the container) / 12px (font-size) = 10em
and
240px (height of the container) / 12px (font-size) =20em
New CSS:
.container{
width:10em;
height:20em;
background:#aaa;
}
Putting 'em' as unit, now if we happen to change the font size in future our container will change proportionately without disturbing the layout.
It is better idea to provide min-width /height to the container so that even if the font is reduced our design should not shrink, after some point our design remains static.
