I'm working on a page (zacvhogan.github.io) and have found that the body text of the site has varying font weights. It's as though with each nested element, the font weight becomes heavier.
Why would this happen?
I've looked through the CSS and inspected and compared the various text elements in Chrome Dev Tools to no avail.
Source code: https://github.com/zacvhogan/zacvhogan.github.io
Comparison below. Yellow boxes indicate nesting.
It could be because you are using em units instead of rem units.
The em unit is based off parent font size.
The rem unit is based off the document font size.
Solution: The difference in font-weight was caused by styling that was making the header text lighter, and NOT (as I had assumed) styling that was making the text lower in the page heavier.
I had checked all of the article and section CSS for font weight, but had failed to check the header styling.
Thank you to everybody who commented!
Related
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
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'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.
While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.
I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?
If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.
If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.
EDIT
You could use line-height to try and tame the behavior.
I see this from source code of a web site:
<font size="-2">#2009 </font>
What does it mean when size is negative?
That is a deprecated style of markup. Nobody should be using it anymore.
Back in the old days, before CSS, you could use the <font> tag to control the relative size of text on the page. A "-2" simply meant two sizes smaller than your base font size.
Font sizes ranged from 1 to 7 in first generation browsers, if I recall correctly.
It means the font size of #2009 should be -2 units (i.e. 2 units smaller) relative to the content around it.
It means two notches smaller than the default text size in the browser.