Page 1 of 1

the CSS command to increase the current font size by one

Posted: Mon Apr 03, 2006 7:14 am
by raghavan20
Can anyone tell me how to increase/decrease the font size using CSS by x points/pixels/em. How I wanted it to work is, if current size is 10px, if I put something like +1 , it should make it as 11px, if I put as -2, it should make it as 8 px...something similar to what I have told.

Posted: Mon Apr 03, 2006 7:45 am
by matthijs
Something like this:

Code: Select all

body {
    font: 11px/1.5em  "Lucida Grande","lucida sans unicode",verdana,sans-serif;
}
p {
    font-size:1.1em; // can be font-size:110%; as well 
}
#sidebar p {
    font-size:.9em;
}
h2 {
    font-size:2em;
}
Default font-size for many browers is around 16px. So if you set the body size on 62.5%, that will set the font-size to around 10px. Then if you work with % after that the mathematics are easy (120% = 12px etc)

Posted: Wed Apr 05, 2006 7:42 am
by raghavan20
I want something like what browser does, if you increase the text size in IE or Mozilla, it increases current font size of every section in the HTML page by one. Similarly I want a CSS code that finds the current font size and increases by one when I put something like +1.

anyway, thanks for your reply

Posted: Wed Apr 05, 2006 7:52 am
by matthijs
Ok, then I probably misunderstood your question.

Do you want something javascript based then? A button which people can click to increase the font-size?

Posted: Thu Apr 06, 2006 5:45 am
by raghavan20
matthijs, thanks for your continued interest in the subject.

let me give some good example..
1.

let's say we have a css setting for body
body{
font-size:0.8em;
}

we keep on writing paragraphs on divs and at some point you can want to make font bolder, you do not really want to know what the size we are using, you just want to increase based on the context, like +1 for a heading.

and you have another situation where you want to make it bolder, like +2 for it and in some case, may be at the top of the page, you want to make a piece of text to be boldest like +3 points above normal font size.


2. the second problem would be where i want to simulate the browser enlarge/reduce the font-size of the entire page...like
a paragraph with .8em
a heading with 1.0em
a subheading with 0.9em

so when you click enlarge, then it should be
a paragraph with 0.9em
a heading with 1.1 em
a subheading with 1.0em