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.
Related
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!
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'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.
How can we increase the font size in html?
<font face="Garamond" size="7">
up to this size only it is working.
Is there any way to increase the size of the font?
You can use the font-size css property: Example
<span style="font-size:20px;">This is large Text...</span>
There is also <font> tag but it is deprecated.
The largest size the font tag supports is 7. If you need it to be larger, you will have to use CSS, which you should probably be using anyway because the font element is deprecated.
The CSS font-size values, xx-small, x-small, small, medium, large, x-large, and xx-large are comparable to <font size="1"> through <font size="7"> if you want to specify the size like that, but you would run into the same size limitation. The more typical way is to use px or pt for absolute sizes, and % or em for relative sizes.
Adding onto the answers that exist. Inline styling is usually frowned upon, because:
In huge HTML pages, this can cause a maintenance nightmare for anyone that has to maintain it.
Does not separate content from design.
They add unnecessary length to the HTML page.
If I mark all my divs in percent, they fill up all the space nicely. I am facing 2 problems:
a) Image sizes: How do I define image sizes so that they do not become larger or smaller than wanted as the window resizes
b) Font sizes: How do I make the font size increase or decrease based on resolution - should this be done at all? (The problem I face is that the text becomes illegible at very high resolutions)
Please point me to a good reference on how to make liquid layouts.
Regarding point b) it is, IMHO, good practice to use relative font sizes, rather than absolute ones, so that the fonts are sized compared to the browsers base settings (I'm guessing, from your problem, that you are using point or px sizes, yes?). You have the heading tags, of course, but you also have the font-size CSS attribute and the ability to size fonts in % or ems. You have hit one good reason to use relative sizes - on high res monitors this can make absolute-sized fonts unreadable (I have seen, in the old days when 14" 800x600 monitors were standard, a website that rendered to about the size of a matchbox on a high-res 21" monitor). There also the issue of "politeness" and accessibility - the user may have set their browser base-font size larger or smaller because of personal preference and/or accessibility issues, and to override this to an arbitrary size doesn't seem, to me, to be a good idea.
have a read on the font-size section of this page:
http://www.w3schools.com/css/css_font.asp
If you need some actual examples then please post a bit of your code and CSS.
Good article here
http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
for a) I love using this
img {
width:100%;
max-width:400px;
}
then, if you need to, add one of the many javascript fixes for max width in older browsers.
I found a simple solution for your second question about font size.
b) Font sizes:
Using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
Hope this might help you.