Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If font-size of body is in % percentage then is it good to use em for all things , font-size width, margin padding or % should be used at some places?

I'm making Fluid + responsive layout where layout scale up and down on browser/screen re-size.

If I use font-size of body is in % percentage then is it good to use em for all things ,

  • font-size
  • width
  • margin
  • padding
  • border-width
  • border-radius

Or I should use em only for font-size?

My aim is to keep everything is in proportion when things scale up and down.

I'm little confused when I should use em and when %. My font-size of body is 62.5%

like image 389
Jitendra Vyas Avatar asked Jan 01 '12 08:01

Jitendra Vyas


2 Answers

Using em used to be considered a good practice for accessibility before every browser supported zooming. Now I have found that it is mostly useful for easily declaring relative font sizes in specific scenarios (perhaps yours).

I've found that relative sizing does not yield aesthetically pleasing results on borders because some browsers will try to literally use a floating point value derived from the em or percentage calculation and the result will be fuzzy (try it).

I use percentages heavily in most of my layouts. I've found that a couple of generic percentage based styles can cover a multitude of layout needs (such as a style for a 50/50 split, 33/67, 25/75, etc. etc.).

I personally find percentages more intuitive to deal with. An element with a width of 100% will always take up 100% of its parent (with the right box-sizing, of course) and it's easy to read that in your code. An element that is 15em wide might take up 50% or 150% of its parent; it's not directly obvious and I find it harder to keep track of (but maybe that's just me).

Here are a few baseline styles. These haven't been tested on every possible browser/device but they are used in production applications:

* {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

BODY {
    font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
    color: #404040;
    background-color: #fff;
}

H1 {
    font-size: 1.8em;
    margin: .1em 0 .1em 0;
    color: #2B265B;
}

H2 {
    font-size: 1.6em;
    margin: 0 0 .25em 0;
    color: #303030;
}

H3 {
    font-size: 1.4em;
    margin: 0 0 .25em 0;
    color: #3b5998;
}

H4 {
    font-size: 1.2em;
    margin: 0 0 .1em 0;
    color: #666;
}

P {
    margin: 0 0 1.5em 0;
    font-size: 1.1em;
}

INPUT, SELECT, TEXTAREA {
    border-style: solid;
    vertical-align: middle;
    margin: .2em 0 .2em 0;
    border-radius: .3em;
    -moz-border-radius: .3em;
}

INPUT[type="text"], INPUT[type="password"]{
    border-color: #85a3bf;
    width: 16em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="file"] {
    border-color: #85a3bf;
    width: 32em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
    border-color: #0066cc;
}

INPUT[type="submit"], INPUT[type="button"] {
    border-color: #DDDDDD #BBBBBB #999999;
    border-width: 1px;
    background: #eee url([URL]) repeat-x;
    padding: .2em .8em .2em .8em;
    text-shadow: 1px 1px #fff;
}

INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="submit"]:active, INPUT[type="button"]:active {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
    margin: 0px .5em .1em .5em;
    vertical-align: middle;
}

INPUT[type="image"] {
    border: 0;
    margin: 0;
}

SELECT {
    padding: .1em;
    border-width: 1px;
    border-color: #DDDDDD #BBBBBB #999999;
    background: #eee url([URL]) repeat-x;
}

TEXTAREA {
    border-width: 1px;
    border-color: #85a3bf;
    padding: .3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
like image 149
Tim M. Avatar answered Oct 08 '22 19:10

Tim M.


for my projects i do it this way:

  • browser default font sizes are 16px
  • setting html { font-size:100.01%;}. the 0.01% reduces the errors of the rounding off. a general "round-up" to solve the case where resizing makes the text very small at times
  • using this tool: http://pxtoem.com/ you can easily convert px to ems without a hitch.
  • so if i set body {font-size: 75%;}, the font size is 12px since 75% of 16 is 12.

px is best used for general layouting of the page like sections of the pages, margins, padding. the problem with px is, especially in browser like IE6 that have te "smallest, smaller, normal, large, and larger" text scaling, px unit fonts don't resize. however, in the advent of full page zoom, we don't need this text scaling. pages zoom, content AND text unlike the old days.

ems are best used in padding and margins of text as well as the font size of the text. in the case of the IE text scaling, ems DO resize in response to that.

percent? i don't use them or rarely in some cases.

like image 38
Joseph Avatar answered Oct 08 '22 20:10

Joseph