What should i keep for body, {font-size: 100.01%; } or { font-size: 100%; }?
what is {font-size: 100.01%; }? and is it really good to mention font-size in html{} even
If I'm using body {font-size: 62.5%;}
Edit : 3 May 2010
Today i found info about 100.01% at here - http://www.communitymx.com/content/article.cfm?cid=FAF76&print=true
This odd 100.01% value for the font
size compensates for several browser
bugs. First, setting a default body
font size in percent (instead of em)
eliminates an IE/Win problem with
growing or shrinking fonts out of
proportion if they are later set in
ems in other elements. Additionally,
some versions of Opera will draw a
default font-size of 100% too small
compared to other browsers. Safari, on
the other hand, has a problem with a
font-size of 101%. The current "best"
suggestion is to use the 100.01% value
for this property.
Is it good to keep body { font-size:100.01%} in place of {font-size:100%}
The declaration body (or html) { font-size: 100.01% } compensates rounding errors, in particular in older versions of Opera and Safari. Both would otherwise display fonts that are too small.
A relative font-size (%, em) is always interpreted relative to the font size of the parent element. So it's not a bad idea to implement kind of a initial reset in the top element, which you can achieve with body {font-size: 100%}.
Never seen 100.01% before, but it seems like some sort of browser hack that will force some browsers to ignore or calculate size correct if you use this "fix".
I wouldn't use it myself though, as errors tends to be fixed and there are often more nice ways of dealing with the same option.
html {
font-size: 100.01%;
}
100.01%, not a hack or a kludge, has been around for many years. Google "100.01%" and read up. It is as valid as 100% and does cover some territory 100% doesn't.
An initial font-size should always be declared. Set a base font-size on an outer container -- either <html> or <body> -- for it is from that container which all relative and inherited font-size values will derive. Using 100% or 100.01% makes the starting font-size equal to the user's browser preference.
Setting that base font-size to the user's browser preference gives your visitors maximum readability. Read that again, please, about the USER's preference. Your visitor will have set their browser font-size for their own best legibility and reading comfort. Your design, magnificent and fragile though it may be, is only a second-string player. Content is king, assuming you have some. But if that content is un-readably tiny, you lose. The visitor surfs on. Your design, then, has failed your needs and your expectations. Therefore, the design really wasn't all that great, was it?
Related
html {font-size: 62.5%;} seems like the standard approach to set the base font-size to 10px.
E.g.,
html {font-size: 62.5%;} /* 10px */
body {font-size: 1.5rem;} /* 15px */
But this creates a dependency on the browser's font-size 16px. This seems unreliable in the long run... why not just...
html {font-size: 1px;} /* 1px */
body {font-size: 15rem;} /* 15px */
Is there a technical problem with this? It seems cleaner and much more reliable. Why don't I see people do this?
Once upon a time, there was IE and text scaling only. Other browsers came and abandoned the concept in favor of scaling the whole viewport. After all, if you're having a hard time reading the text, you probably have a hard time seeing images and other non-text elements too.
When you're working with relative font-sizes, at some point they have to be converted to the base pixels on the screen. The default modifier is by and large expected to be 16px, you can imagine it as a declaration on an element 1 level above <html>. Any base modifications, like 62.5% on the body for 1 relative unit to equal 10px, scale off that value.
With that in mind, what you're effectively doing is taking matters into your own hands, overwriting the browser base font-size above <html> and setting it to 1px value instead, resulting in 1 em/rem being always equal to 1px inside the body. However, there is a price - the browser is no more able to propagate it's own base font value because of your direct pixel value, so any font-size settings the user may have set are neglected by your declaration. In other words, using the 1px trick disables the pure font-size zoom of the browser. At the same time however, font-size only scaling remains fundamentally flawed in it's intention (look at google.com results with scaled font).
If you'd like to retain the ability of the browser to control the font-size only zoom AND at the same time work with 1rem = 1px, you probably want this instead. edit: I should note that this will be problematic in Chrome due to the minimum font size settings (6px default). Paddings and margins will scale off this value as minimum.
html {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
In 2020, you can do this in Chrome by going to:
chrome://settings/fonts
then slide the minimum font size from 6px to 0.
Now, Chrome won't override the minimum of any font size.
For example, if I have:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
And I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:
td h2, td h3, td p { font-size: 1em }
Which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).
But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.
I'd really like to avoid doing the following (and of course I'd like to avoid using px):
td h2 { font-size: 1.54em } // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em } // 1.3 x 0.92 ~ 1.2
For anyone familiar with LESS, I'm using that, and thought I should be able to use it to do the calculations for me, e.g. Using accessors:
td h2 { font-size: h2['font-size'] / td['font-size'] }
This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.
This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.
What you want can be achieved by using rem units.
rems are relative ems which base their calculations on the font-size declared on the body element.
Compounding issues simply disappear.
http://snook.ca/archives/html_and_css/font-size-with-rem is an excellent article to articulate this.
note: IE8 requires a px fallback, but this won't be an issue since you're already making use of a preprocessor.
EDIT: I've written a Sass mixin which outputs rems with their respective px fallbacks for most CSS properties:
https://gist.github.com/larrybotha/4153104
I'll answer the same as my question, use Pixels!
A pixel is a relative unit, it's relative to the screen resolution, users can set their own desired minimum pixel size, and zoom zooms pixels. I'd venture that it is more difficult for a designer to approximate non pixel font-sizes at every perceivable resolution than it is to relax and let the browser tools take care of it?
It used to be that a font declared in pixels wouldn't resize in IE which was very annoying for some, not very accessible if a user deliberately chose to view on a lower resolution for instance for eyesight reasons - that's where the "em's were best for fonts" thing came from, but that was never true IE could be foiled using percentages instead which then offers the same problems ;).. I remember getting annoyed when the fad was for "teeny text", but then the joys of discovering CTRL+ in non-ie .. anyway now the pixel sized fonts will scale perfectly well, if you're building a fluid site you can build it with a mixture of em's for widths and pixels for font-sizes - if it looks OK at your resolution try zooming it, both up and down - you have to go pretty far up or down before it becomes illegible, and who's zooming it that far up/down except designers ;)
Have you considered adding a class to the headings that are in table cells? The extra level of specificity would override the effect of the cascading styles compounding each other, I think.
I'm cleaning up some old and terrible css, which includes:
body {
font-size: 100.01%
}
While researching, I found body { font-size: 100.01%; } vs body { font-size: 100%; }?, which explains the reason for setting font-size to 100.01%, but doesn't tell what browsers this 'fix' targets.
Do any modern browsers still face this issue, and if so, which and what versions?
Answer taken from CSS: Getting Into Good Coding Habits by Adrian Senior
This odd 100.01% value for the font
size compensates for several browser
bugs. First, setting a default body
font size in percent (instead of em)
eliminates an IE/Win problem with
growing or shrinking fonts out of
proportion if they are later set in
ems in other elements. Additionally,
some versions of Opera will draw a
default font-size of 100% too small
compared to other browsers. Safari, on
the other hand, has a problem with a
font-size of 101%. The current "best"
suggestion is to use the 100.01% value
for this property.
How to use em perfectly without getting nested issue?
How to get perfect needed size for every needed element?
If i use #Wrapper (font-size:62.5%) because it's easy to calculate font sizes.
How to deal with nested issues of font-size and line-height?
puts on flameshield
I've been using the 62.5% + em method for 3 years but I just made the switch back to pixels.
Why?
Pixels are a relative unit
There's less and less IE6 users ( meaning more people are able to resize properly now and you don't have to worry about IE6's caveats as much )
Modern browsers having better support for zoom in/out
You save time - everyone understands pixels and there's no math involved in regards to inherited em font size and calculating relative to that
With that said:
Do still use pt for printing because it's more reliable
If you still want to use ems that's fine. The best strategy, as counter-intuitive as it sounds is to make more specific rules so the em font size doesn't get inherited by everything.
Instead of:
body { font:62.5% arial; }
div#content { font-size:1.2em; }
p { font-size:0.9em; } /* have to calculate to try to get 11 px */
Do:
body { font:62.5% arial; }
div#content p { font-size:1.1em; }
Of course there exist utilities to do the pixel calculation for you ( an entire stylesheet or web page ) in ems but to me that's just a complete waste of time.
If you need to nest list elements (li tags), you can use the following CSS to make them not continue to grow or shrink:
li li {
font-size: 1em;
}
jsfiddle: http://jsfiddle.net/Sy92u/6/
Similar concepts can be applied to other situations, but may not work for your exact use-case.
My site displays just like I need it to in IE and Opera, but in Firefox I can't use CSS to get font sizes smaller than Firefox's default minimum-font-size. Of course, I can go to Tools → Options and remove this value, but some users will see some of the elements displaced.
I have tried using !important, but it doesn't work, and I can't substitute the images for the text since they are dynamic fields.
Okay. I'm going to explain how you do this, but you need to know a few things first.
1. You shouldn't be doing this.
There is a reason, and a very good one, that the minimum font size setting exists. Simply, with most fonts, it is already a struggle to read anything below 12px, never mind below the default minimum of 9px. If your design calls for such font sizes for anything but an extremely restricted set of circumstances¹, then your design is just bad and excludes a huge category of users.
2. You really shouldn't be doing this.
The web is an intrinsically flexible medium, and a good design must take account of this. Designs that require a fixed font size to work are suitable for print, but they are not suitable for the web. Any designer who cannot work with this requirement does not understand the medium, and no decent PM should prioritise a designer's bad decisions over practicality and usability. You have far bigger, more fundamental problems to deal with if you can't argue against this decision.
3. You really, really shouldn't be doing this.
Depending on your jurisdiction, you may be wandering on a legal grey area. Tiny font sizes are difficult to read, and will make it very easy for your users to miss information—which is especially troublesome if the text at hand is legally significant, such as opt-out information or a disclaimer. You are also treading on thin ice with respect to the accessibility of your site by causing serious problems for people with visual impairments.
How to do it anyway
It is quite easy to make Firefox display fonts at less than the minimum specified size: just use the font-size-adjust property.
Here comes the science bit
Every font has something called an aspect value, which is the ratio between its x-height (the height of a letter x)² and the actual font-size you set. In Comic Sans, for example, this is really big (0.55), as you can tell by how big the shorter letters (a, c, e…) are compared to taller letters (b, d, h…), whereas in Courier New it is a lot smaller (0.43).
This variability can cause some problems. For example, let's say you specify a super-fancy font for your body text, but because you're a good designer you provide several fallback fonts. That's great, but because some of those fallbacks have different aspect values, letters might be smaller and less legible at the size you specified. font-size-adjust allows you to make sure that any fallback has the same x-height as your super-fancy font.
Unfortunately, we can also use it to make text less legible. Let's say your body copy is Segoe UI at 12px:
body {
font-family: "Segoe UI";
font-size: 12px;
}
The aspect value of Segoe UI is almost exactly 0.5, so if you specify that as the font-size-adjust value, your font size doesn't change:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}
What happens if we set it to something smaller? Well, the browser will adjust the font size to use an x-height equal to font-size × font-size-adjust. The below, for example, will result in an effective font-size of 6px:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}
This forms the basis of our attack. It turns out that Firefox will honour font-size-adjust even if it overrides the minimum font size. (It goes without saying that this is a bug.)
The demo
Try this out in Firefox with a minimum font-size set. It exploits two bugs: the aforementioned font-size-adjust issue and a separate issue with reporting the rendered font size via getComputedStyle.
You need to know the aspect value of the font you are using for this to calculate the right font-size-adjust value, for which this list of aspect values might help you. (Alternatively, try an estimated x-height for fonts installed on your system.)
But wait! There's worse!
The above technique only works in Firefox. It's even easier to override the minimum font size on an element in Webkit, including Safari, iOS Safari and Chrome—just use the non-standard -webkit-text-size-adjust property:
-webkit-text-size-adjust: none;
This is another bug, by the way. text-size-adjust is a non-standard proposal intended to limit the extent to which text-size is automatically inflated on mobile devices. It isn't meant to work on desktop UAs, much less prevent manual text resizing.
Last word: it won't last forever
Bugs get fixed eventually. You are not meant to be able to override the browser's default font size, no matter how much your irresponsible designer and PM want you to. Sooner or later, people will figure out that these properties are being exploited to make the web worse for everybody, someone will land a patch and the fun will be over.
That said, if you are being forced into this, I wholeheartedly advocate a solution that will eventually force the parties involved to rethink their decision.
¹ Hint: if your text conveys any information that is meant to be readable by anyone, ever, then you shouldn't be messing with browser accessibility settings. Legitimate cases include purely decorative effects (complex ASCII art, shape poetry) and document previews.
² More correctly, the distance from the baseline to the median height, which is the height of a letter x in most fonts.
You cannot do it. It's a setting that Firefox provides so that people like us cannot override it with some CSS settings.
You can effectively shrink text below the minimum size using CSS3's transform: scale(x) syntax, where x < 1. This is guaranteed to work in future browsers (as that's the point of scaling), but does come with its own challenges/caveats.
Just in case it might help anyone, I ended up replacing the small text areas, initially in HTML, with SVG zones. I fill these zones with the Raphaël JS library, with code like
logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});
I did not use an HTML canvas, because of its lack of availability on certain browsers, and because SVG offers a much better user experience on Retina displays.
It might seem overkill to do that, but I was not able to find an easier solution to the Minimum Font Size problem of FF.
In some cases you can use <canvas> element and fillText().
If you set the default CSS font size in your web pages to a percentage ... then through em sizing you can provide cross-browser scalability ... Setting the font size to 62.5% is a basis for rescaling fonts base hx sizes to 10px.
body {
font-size: 62.5%;
}
p {
font-size: 1em;
}
So if you really wanted to make your standard paragraph text say 10px ... You would just state it in your CSS as 1em and it would render as 10px. Please note that if you really want to do this correctly ... you need to do a CSS reset too as you want your display to be consistent ...
Eric Meyers CSS Reset
HTH
you can try the following code
body {
min-font-size: 15px!important;
}
If you set the the font size attribute on the body it should set it as default font size.
body
{
font-size: 12px;
}