I am using Telerik UI for dropdowns and other UI elements. For some reason, my dropdown text size is being overwritten as 10px. I cannot figure out what is causing it.
Here is how it displays in browser:
Checking out the computed styles for the element, it says it is 10 px.
But nothing below the element says 10 px. I don't understand where the 10 px is coming from. Any help is much appreciated!
The font size of 1rem refers to the font size for the root element (HTML). Since it is 1 rem, that means it uses 1 times the root element font size. You can see that your html element has the font size defined as 62.5%. For most browsers the default font size is 16px, so 16 times 0.625 is 10px
Here's a helpful article on rem units in CSS: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Related
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!
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
I have control that helps user can change font size themself. But font size on html does not affect when size value is from 0.1 to 0.4 em. I am using Google Chrome Version 27.0.1453.110 m
HTML
<span class="text_menu_link">Home</span>
CSS
span.text_menu_link {font-size: 0.3em;}
em is a relative font size. If you put your example inside another div that has a large font-size set, you'll notice that you do see a change at the 0.1 - 0.4em range, because it evaluates to a reasonable actual font size (above the browser's minimum).
HTML
<div class=outer>
<span class="text_menu_link">Home</span>
</div>
CSS
.outer {font-size: 30pt;}
span.text_menu_link {font-size: 0.3em;}
See this for an example
Edit
An example setting font-size at the body level
From the sample code provided via jsfiddle in a comment, the question appears to be “why do some font size settings have the same effect” rather than no effect:
<div>
<span style="font-size: 0.1em;">Home</span>
<span style="font-size: 0.2em;">Home</span>
<span style="font-size: 0.3em;">Home</span>
<span style="font-size: 0.4em;">Home</span>
<span style="font-size: 0.5em;">Home</span>
</div>
These have an effect, as you can see by comparing them with the display of a plain “Home”. They just have the same effect, in many situations, and the reason is that there is a minimum font size setting in the browser.
With a typical basic font size of 16 pixels (12 points), the setting font-size: 0.5em asks for a size of 8 pixels. That’s larger than a typical minimum font size of 11 pixels, so 11 pixels will be used. And for the other settings in the example, the result is of course the same.
If you change, in Chrome settings, the minimum font size to 6 pixels (smallest that it seems to allow, and far too small for almost any purpose), you will notice that the last “Home” becomes larger than the others – since it is now the requested size 8 pixels, whereas 0.4em requests for 6.4 pixels, so the end result is hardly distinguishable from that of 6 pixels that will be used for the other texts due to the limit. Besides, Chrome seems to actually round 6.4 to 6 here (judging from what it shows in developer tools).
And if you add, say,
div { font-size: 120px }
you will see that the words will all have different font sizes.
Finally, if you set the font size of the div e.g. to the same as the minimum font size of the browser, then the font-size settings indeed have no effect.
In most of websites, while I change the zoom level of browsers, the font size will also increase and help user to see them. For some reasons, that just won't work on my new website. While I change the zoom level of the browser, everything changes but all font size keep the same. Is there a css or html property that I can use to control this behavior? Thanks
here is an example:
http://ca.skywatcher.com/index.php
The problem is that you have set -webkit-text-size-adjust: none; for the body in layout.css. Changing it to -webkit-text-size-adjust: auto; allows the zooming of the fonts along with the page.
Edit: Corrected the CSS. Should be auto not 0
Fonts using a specific pixel size are not relative (along with several others). Zooming changes that relative information.
From http://www.westciv.com/style_master/academy/css_tutorial/properties/values.html
Name Abbrev. Explanation Relative?
em em The height of a font yes
ex ex The height of the letter x in a font yes
pica pc 1 pica is 12 points no
point pt 1/72 of an inch no
pixel px One dot on a screen no
millimeter mm Printing unit no
centimeter cm Printing unit no
inch in Printing unit no
If you're using a fixed-point width for your font-size settings (e.g.: pixels), then your font size will remain unchanged when the user zooms. If you want the font to enlarge or diminish when the user zooms in/out, then consider using em as your unit (1 em = 100% of the default font size on the user's machine).
I have noticed that you can use 1em and it will look different on different sites.
What is an em in proportion to?
The font used?
The biggest font size?
The page width/height?
See http://w3schools.com/cssref/css_units.asp
1em is equal to the current font size. 2em means 2 times the size of
the current font. E.g., if an element is displayed with a font of 12
pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since
it can adapt automatically to the font that the reader uses
An EM is relative to the current element it is defined on. If you use relative sizes (like 0.9em), they multiply and can lead to unexpected dimensions.
Now, the default size of a font is not standard between browsers. And there's an issue with IE (at least older IE) when setting the font to a specific pixel unit. A good overview for font sizing can be found on A List Apart.
According to the W3C an em:
"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."
In other words, ems don't have an absolute size. They take on their size values based on where they are. For most Web designers, this means that they are in a Web browser, so a font that is 1em tall is exactly the same size as the default font size for that browser.
For most browsers, default value
1em = 16px
The em is defined as the height of the capital letter "M" in the current font and size.
https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html