I want to convert the font-size property value from percent to pixel
lets say I have this html code
<div style="font-size: 180%;">
link
</div>
How to find the equivalent value for font-size: 180%; in pixel?
Thanks
There is no simple answer as font sizes in percents are relative to font size of parent block. I find it easiest to do by hand, manually adjusting the font size pixel by pixel in Firebug.
This may be somewhat tricky to do automatically. Font-size percentages are done against a base value, and that base value is the parent block's font size. This means that font size changes are nested like this:
<div style="font-size: 16px;">
This text has size 16px.
<div style="font-size: 150%;">
This text has size 150% * 16px = 24px.
<div style="font-size: 150%;">
Because this div is nested, the base value is now 24px.
font-size: 100% would mean 24px type.
So the size of the text here is 150% * 24px = 36px.
</div>
</div>
</div>
And that means that there's almost certainly no easy solution.
If you can be absolutely sure that you don't have any places where percentages are nested (as in my example above) you can simply replace all of the percentages with the base font size multiplied by the percentage.
If you do have a lot of different pages though, you probably can't rely on that. In that case, you're going to have to do some HTML/CSS parsing and go through all of your pages, calculating font sizes for each and every element to get it all right. There's not an easy solution, unfortunately.
I need to ask though, why do you need to do this? As long as you declare a base font size for the page in pixels (in the body tag), there's going to be no functional difference between percentage font sizes and absolute font sizes. If you have a font declaration like this for your body:
body {
font: 100% font1, font2;
}
then just replace it with:
body {
font: 16px font1, font2;
}
And unless you have some very unusual requirements, it'll work just as well as replacing all of the font size declarations for the whole page.
(16px is the near-universal default font size for web browsers.)
Related
I've been trying to configure a basic CSS template that I can use to start working with REM. I see the method of setting the following body { font-size: 62.5% }; so that the math is easier (1rem = 10px as 16px is the default font-size).
I'm not sure I like this way as it involves having to specify the size of <h1>-<h6> as well as <p> tags if a font-size of 10px isn't my baseline.
I've been experimenting with some different ways and have been very confused with how px and % relates in terms of font size. Take the following example:
<html>
<body>
<header>
<h1>Testing h1</h1>
<h2>Testing h2</h2>
</header>
<main>
<p>Random paragraph</p>
</main>
</body>
</html>
Consider the following css:
body {
font-size: 100%;
}
I expected the browser to render font in their default size, which is 16px. Anything in a <p> tag is 16px still, but <h1> - <h6> revert to their original size as specified in the browser stylesheet. Why isn't ALL text set to 16px?
Another example:
body {
font-size: 12px;
}
Why doesn't <h1>-<h6> take this font size of 12px? <h1>-<h6> does get smaller (by 75% as 12/16 = 0.75). I'd expect h1 to be either 12px or stay the same default value because the value specified for h1-h6 in the user agent stylesheets is MORE specific.
How do the rules work in terms of specifying percentages? What is the best practice in terms of setting up a stylesheet so that REM can be used?
h1 has a default font-size set to 2em which means 2 x the font size of the parent element. Same thing with the others headings, they all have a font-size specified using em unit.
Using percentage with font-size is also relative to parent font-size and means p x the font size of the parent element where p is a value between 0 (for 0%) and 1 (for 100%).
So if you specify 100% within the body then the body will have 16px (the default font-size) and h1 will have 32px.
You can use the same logic to find the font-size for the other headings.
body {
font-size:100%;
}
<h1>this a text</h1>
If you specify 12px within the body then the h1 will have 24px
body {
font-size:12px;
}
<h1>this a text</h1>
And specifiying 62.5% will make the body to have 10px and the h1 20px
body {
font-size:62.5%;
}
<h1>this a text</h1>
And since p has no default value for font-size it will simply inherit the value specified within the body.
You can easily check those values in the computed tab using the dev tools:
From the documenation:
The size of an em value is dynamic. When defining the font-size
property, an em is equal to the size of the font that applies to the
parent of the element in question. If you haven't set the font size
anywhere on the page, then it is the browser default, which is often
16px
And for percentage:
A positive <percentage> value, relative to the parent element's font size.
The rem is relative to HTML, not BODY
The rem unit is based on the font size of the HTML element, not the BODY element. So you should set base font size this way:
HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */
instead of
BODY {font-size: 62.5%; } /* Does NOT affect `rem` */
HTML font size may affect scrolling speed
Note that at least in some browsers, font size of the HTML element affects the wheel-scrolling step size: the smaller the font size of the HTML element is, the smaller the step size is and the slower scrolling is.
Resetting font size for all elements
To reset font size for all elements, you can use the universal selector:
* {font-size: 100%; }
or:
* {font-size: 1em; }
Proper DOCTYPE for cross-browser consistency
Also, make sure you have the proper DOCTYPE declaration in the beginning of your HTML document to turn the standards-compliance mode on for the document for consistent cross-browser rendering and behavior:
<!DOCTYPE html>
Why doesn't <h1>-<h6> take this font size of 12px?
<h1> and related elements don't change their font size to be the same as their ancestor when you change their ancestor's font size simply because their default font size (in the stylesheet built into the browser) is not set to 100%, 1em, inherit or similar and you haven't specified a different font size to override the one supplied by the browser.
<h1>-<h6> does get smaller (by 75% as 12/16 = 0.75). I'd expect h1 to be either 12px or stay the same default value because the value specified for h1-h6 in the user agent stylesheets is MORE specific.
The value specified in the browser stylesheet (in my browser at least) uses the em unit, so it is proportional (double in the case of <h1>) to the font size of the parent element.
How do the rules work in terms of specifying percentages?
The choice of unit you use for the font size of an ancestor element (px, % or anything else) is irrelevant.
It's just working fine on my side. The only possibility could be that, the link to css file is missing in your HTML... :)
Otherwise, just to make sure, try inline style for same property.
I have some HTML pages with custom fonts and in order to let it looks nicer I usually sized up the text using css, but as I look through the document they said em is the x times of the original font size and I think great this is what I'm going to use but as I use it, it came out result like below:
* {
font-size: 1.5em;
}
<h1>
Header
</h1>
<p>
Paragraph
</p>
Notice that the result it's showing is that h1 and p is almost the same size except h1 is thicker and darker, but why will this happened isn't 2em meant 2x larger than original text? Why the h1 scales down and p scales up?
P.S. In order to let the result shown properly I set the font-size to 1.5em instead of 2em or it'll be too large
When you set the font-size in em you are setting it relative to the font-size of the parent element.
Since both elements have the same parent element, they get the same font-size.
The differences are due to them having different values for other properties (such as font-weight).
You are not setting it relative to the font-size it would have had without that style rule. The Cascade doesn't work like that.
as I look through the document they said…
Do not trust W3Schools! They are frequently wrong.
Look at the official specification:
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
You are correct. It scales it based on the font size of the parent element.
Be sure you have declared what that original size is for your body section in the css.
You might also right-click on your elements and click "inspect" in your browser. This will reveal what styles are being applied. You might have some font-weight that is being applied to the headers
I am wondering what is the main difference between VW and EM, as both of the they scale with the window size and both of them are using in responsive design.
I am wondering what is the main difference between VW and EM, as both
of the they scale with the window size and both of them are using in
responsive design.
VW is -- as several have correctly stated -- a percentage width of the viewport.
Considering small smart devices have usually tall narrow viewports and larger, laptop type devices have much more letterbox shaped viewports, this value has a potential to give curious, imperfect results.
EM, is a measurement of the scale of a font compared to the rules direct parent.
Several answers here seem to be making some fundamental errors in definitions of font sizes. Such as stated:
em refers to the current font-size and scalable with respect to it.
For instance, if the font-size of document is 14px, then 1em = 14px;
2em = 28px and so on.
This is only correct if the rule that states 1em is a direct child of the document or has no other font scaling rules applied to it. It can easily happen that the font size of the document is 14px, the child element has font size as 2em and then that childs child has a font size of 1em which means then that both layers of children have fonts displaying at 28px.
This obviously can cause serious confusion when creating sites. the EM value is only the proportion of the parents font size. Take this example:
html {
font-size:14px;
}
h1 {
font-size:1.5em;
}
p {
font-size:0.9em;
}
main {
font-size:1.15em;
}
.container {
font-size:1.1em;
}
So, with the HTML:
<html>
<body>
<main>
<div class="container">
<h1>Header</h1>
<p>Some paragraph text</p>
</div>
</main>
</body>
</html>
So what is the font size of the paragraph contents? Is it 0.9 x 14px ? No, it is in fact
14 x 1.15 x 1.1 x 0.9 = 15.94px
because each em is relative to its direct parent only. This is obviously a very easy way to obfuscate and obscure the actual values as you're working on a CSS file, unless you enjoy using a calculator. A solution is to use Root em, which is rem and this is the em proportion of the root value font size which is set out in the html element tag.
So, if you return to the CSS with:
p {
font-size:0.9rem;
}
This will now be sized as 14 x 0.9 because it is taken the font size as defined in the root element (HTML, not the body tag). this is a much cleaner way of defining font sizes than using just em's.
VW is viewport width (the visible size of the window) and em is the width of the letter 'm' in the current font.
So 5vh is 5% of the viewport and 5em is the width of 5 'm's.
Further Reading:
CSS Values and Units Module Level 3
Mozilla Developer Network article on CSS length units
The main difference is the reference point for each unit. VW, VH, VMIN, and VMAX scale with the viewport ('window') size.
On the other hand, EM scales with the font-size of the element. So for example, if you have a font-size on the body and h1 elements in your css:
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
All the text in your document would have a font-size of 16px EXCEPT the h1, which would have a font-size of 32px. However with,
body {
font-size: 16px;
}
h1 {
font-size: 2vw;
}
The font-size for h1 elements would scale with the viewport's width (2% of the viewport width to be specific).
em refers to the current font-size and scalable with respect to it. For instance, if the font-size of document is 14px, then 1em = 14px; 2em = 28px and so on.
Whereas vw refers to the font-size relative to the viewport which changes from device to device. So, 14vw = 14*1/100 = 1.4% of the width of your viewport.
14 * 1/100 = 14%.
On the other hand, the question was about he difference between em and vw. So, best is to relate them to the same reference frame.
First of all, we talk abour screen media, and not print.
As em correspond, basically, to 16px (width of the letter “m” - thanks BSMP above - of the current font) and vw correspond to 1/100 of the viewport width, let’s relate them:
On 1.440 px viewport width divided by 16 => 90 em on this line, or 100 vw.
So, 1em would correspond to 1,1111 vw (in fact, 1 rem = 1,1111 vw).
Now, for responsive design, if using em, set the font-size at the container level and play with em.
If using vw, it’s one value vith no dependency but thewidth if the viewport. Sometime is better to set a minimum value, maybe in px, to avoid a font-size unreadable because physical size.
Good luck! :)
I really googled a lot but I can't find a clear answer. I want to use rem which according to the specs
The rem unit is relative to the root—or the html —element.
So my question is:
Does the <html> tag's font-size attribute override the browser's default font-size?
Is it reliable to set my element's rem based on that assumption?
e.g. Some users from China have set their browser's default font-size to 12px, while the users from Europe usually have 16px. I want my designs to scale correctly for both. If the <html> tag contains this setting it would be relatively easy to do scalable designs using rem.
I may not have understood your question completely, in which case I apologise.
Anyway, I hope this helps.
1rem is equal to the font size of the html element. No matter if your stylesheet assigns a font-size to html or not.
So for example, if a user has 15px for a default font size, then a stylesheet saying
div {font-size:2rem}
will display all divs with a font size of 30px.
If, on the other hand, you have this for a stylesheet
html {font-size:12px}
div {font-size:2rem}
then 1rem will be 12px, and all divs will display at 24px, regardless of the user's default font settings.
html {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>
So if you want 1rem to remain at the user's preferred size, but still want to display most of the website at a size of your choice, the trick is to not change the font size for html, but only for body.
body {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>
Disclaimer: If you do change the html font size in your stylesheet, the user settings for "minimum font size" may mess things up.
Also note that you will only see the difference between these two snippets if your own default font size is not 12px!
I am creating a template for responsive website. I learned that em is good to use in responsive design.
But problem is that I set the body font-size to 62.5% but when I am using p,span and other elements font-size like 2em than 2 em is different from 20px. according to my default font-size it should be 2em=20px anywhere in the body as 62.5% overrides default 1em=16px to 10px.
Please suggest what I should change so that in whole body whenever I set font-size of any element to 2em then it would be same a 20px.
BODY {font-size:62.5%}
This takes 16px down to 10px. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).
Read 1
Read 2
You can't. Use rem instead. It refers to the font size of the root element.
It might be the issue that your font size inherits from any parent tag...
You cannot. The em unit equals, by definition, the font size of the element or, for font-size setting alone, the font size of the parent element.
The conclusions depend on what you really want to do, which is not clear from the question. If you want specific sizes in pixels, using the px unit (with all its vagueness). If you want adjustable sizing, so that you or the user can easily change the basic font size and have all other font sizes scaled accordingly, use consistently the em unit or the % unit, with due consideration of element nesting. For example, use font-size: 2em only when you want the font size to be 2 times the size of the parent element’s font size—using a different value if you want a a different ratio.