I'm using rems for all kind of elements such as:
html: 62.5%;
.element {
font-size: 1.6rem;
margin: 2rem 0 1rem 0;
padding: 1rem;
min-height: 3rem;
height: 100%;
}
I've read some articles regarding the advantages of using REM and not PX. I'm currently using REM overall but I've began to think about if its only useful for font-size or not.
So, is REM useful in another elements or using them in all the elements is a bit overdone?
A huge argument in favor of using rem or em units for your entire layout is that your entire layout will then scale with the text. This was important for accessibility with older browsers, which offered an option to increase the font size rather than the "zoom" feature that most browsers offer now. In order to make webpages more easily readable, persons with low visibility often increased the font size -- and in websites which use rem or em units for all elements on the page, the entire page would scale. This argument is less relevant now, but still important for legacy browser support (IE6 is still used in many schools and offices!).
Related
I recently came across this odd definition of font-size: in css, and I flagged it as a bug during a code review.
The way browsers deal with "relative" font sizes through rem is very clear to me, but I've never come across a font size definition as below:
.xx-small {
font-size: xx-small;
}
.x-small {
font-size: x-small;
}
.small {
font-size: small;
}
.medium {
font-size: medium;
}
.large {
font-size: large;
}
.x-large {
font-size: x-large;
}
.xx-large {
font-size: xx-large;
}
And apparently is W3C standard compliant (https://www.w3schools.com/cssref/pr_font_font-size.asp)
The questions:
Is this a reliable way to define the font size across browsers?
What is it based upon? Is it relative to some default value?
Is there a way to test these font size definitions work nicely across different browsers and devices?
Is this a reliable way to define the font size across browsers?
No, since the sizes are based on the browsers' default font sizes (that can be set by the users in the preferences), so they differ between systems.
So you can use these if you want to respect the users' preferences. If you just want to set the same font size in all browsers, use pixels.
What is it based upon? Is it relative to some default value?
Yes, medium is the default font size. Note that this is the same as 1rem, but only if you do NOT set a font size for the html element in your stylesheet.
Is there a way to test these font size definitions work nicely across different browsers and devices?
Well, they do work nicely on all browsers, since this has been around since forever (CSS1, and even before that, in the <font> element), but the defaults may differ, and the relative font sizes may differ between browsers and between quirks/standards mode.
Conclusion: these are not suitable for what you want.
I have a situation where I have a container element (div) that contains text. This text will sometimes be really large - not paragraph large, but it can potentially exceed the width of the text.
Obviously, in most situations it will just knock parts of the text to the next line, but I wanted to see if calc() can be used on font-size to change the size of the font to make sure it is always fitting within the bounds of the div it is in. Can this be done?
.name { width: 500px; font-size: 64px; }
<span class="name">Sometimes it is short</span>
<span class="name">Sometimes it is going to be really long, and people put long names</span>
I could just limit the number of letters people can use for a name - and to an extent I will, but I am curious to see if this can even be accomplished.
I found this post to do it with Javascript, but that was a long time ago, and I think CSS3 has a lot of new things that may let this be accomplished without any scripting. AutoFill
Here a possible solution:
http://codepen.io/CrocoDillon/pen/fBJxu
p {
margin: 0;
font-size: calc(4vw + 4vh + 2vmin);
/* See:
* http://codepen.io/CrocoDillon/pen/jgmwt
* For some math behind this
*/
}
Font-size is calculated with available size using a function that is not perfect, but may be adjusted to work well in some cases.
Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div.
CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)
Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/
This is still nearly impossible in CSS only, as the size of each character in different fonts isn't known to us via CSS. There is a jQuery plugin called fitText that handles this sort of thing very nicely.
Just a clarification:
if you use something like:
font-size: -webkit-calc(100% + 30px);
font-size: -calc(100% + 30px);
what this does is add 30px to the 100% default font size, it can't be linked to the container width.
Although, you can do math there like:
font-size: -webkit-calc( 100% * 0.09479166667 - 6.666666669px );
font-size: -calc( 100% * 0.09479166667 - 6.666666669px );
... but it will just calculate it against the 1em.
I recommend you to use text ellipsis
.name{
width: 500px;
font-size: 64px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
and if you need to control font-size, do it by #media in different devices
This can be done in pure css using the relatively new vi and vb properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
These allow the font-size to be scaled in proportion to the container div's inline (vi) or block (vb) dimensions.
Presently only supported on Safari >= v15.4 and Firefox >= v101
e.g.
.name { font-size: 0.5vi;}
See also: https://caniuse.com/mdn-css_types_length_vi
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.
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?
I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel perfect but also allows for scaling of fonts.
So wouldn't that mean that setting it to 6.25% would equate to 1em = 1px? Seems like an even simpler conversion rather than having to mess with decimals...
Thanks guys! I'm quite aware of the em and it's history (design degree), but I'm sure others may find it helpful :)
As far as the 1em = 1px, I don't see how this is undesirable. The em is square, regardless of your units (be it points or pixels) and nobody would set their type at 1px (just like nobody would set printed type at 1pt). Furthermore, even your article concedes that in most digital typefaces, the capital "M" is usually smaller than 1em, and that the em is merely a reflection of the point size (48pt type would render a 48pt by 48pt square for the em, 12pt type would yield 12x12, etc.)
Besides, the reason people would do this would be more for setting dimensions of other elements on the page so that everything scales nicely when the user adjusts their font size. Sure, there will always be the rare few who set their default to something other than 16px, but well worth the price to pay for a pixel perfect layout that scales nicely.
First of all, do not assume that 1 em will equal 10 pixels. An em unit is in direct correlation to the typography being used. If someone has a font size of 16 pixels, then 62.5% is indeed 10 pixels (16 * 0.625 = 10) but this will obviously change when someone has modified their default font size.
Secondly, this is the first I've ever heard of using 62.5% for the base body font-size. I always use a font-size of 76% as based on Sane CSS Typography by Owen Briggs.
Lastly, to answer your question, yes you could use a font-size of 6.25% and then use 12em instead of 1.2em, for example. However, I would highly discourage this methodology. In the world of typograhy, one em is intended to be the width of the capital letter 'M'. This method completely violates that common practice and will seriously confuse anyone that may maintain your CSS in the future.
Arguably, but then you lose control over your scale. Don't forget that headings will typically inherit those same sizes in proportion to their rank (i.e. <h1> will be largest, <h2> slightly smaller). If you want to decrease those elements, you will need to use em values with a lot of decimal placeholders. Imagine <h4> font-size: 0.005em.
Or worse, if you want fonts to be scaled larger, you could potentially be looking at font-size: 40em or something ridiculous.
In short, 1em = 10px is much more practical for the scaled values of fonts. While a 1:1 scale might make sense on paper, it doesn't lend itself that well to sensible and maintainable CSS.
The conversion may be simpler, but an em wouldn't mean what it is supposed to mean.
1em is supposed to be equal to the width if a capitalized "M" in a given font. If the width of the letter M is 1 pixel, your font is going to be unreadable.
http://en.wikipedia.org/wiki/Em_(typography)
The whole "62.5%=10px" thing is fundamentally broken anyway - 62.5% may or may not be 10px depending on the browser, the user's settings, and, especially, the minimum font size setting. So you can't just design in pixels and then "convert" to ems on the assumption that 62.5%=10px, because your design will break all the time. If you want a pixel-perfect design, you have to use pixels as the unit. If you want a flexible design, you need to think about the appropriate units for different elements of the web site - ems for elements which should scale relevant to text size, percentages for elements that should scale relative to window size, and pixels for elements (like images) that shouldn't scale at all.
Anyone who includes font-size: 62.5% in their CSS fundamentally doesn't understand how to design for the web.
Great question.
I see 6.25% as an interesting proposition for adaptive / responsive web design and elastic templates.
In particular font sizing with rem unit's lends it's self to your argument... a 1:1 ratio is just easier.
rem: "root em"... the font size of the root element.
http://www.w3.org/TR/css3-values/
See this rem example from: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
And now with your suggestion...
html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1 { font-size: 24px; font-size: 24rem; } /* =24px */
... Play with my JSBin example: Testing CSS3 "rem" Units for Elastic Content
A 1:1 em to px ratio should lead to less typos.
REM Notes: With proper CSS resets and body declaring the base font-size in both px and rem your styles degrade gracefully... If rem is supported, and declared after px, it's value is applied. Otherwise the browser falls back to px.
Determining support (especially on mobile) for rem. Please hit this page with any/all browsers/devices you can... http://ahedg.es/w/rem.html
I tried to do the same thing, but ran into an issue of using rems for margins and paddings. Setting font-size to 62.5% avoids these issues.
For example, the following CSS
html {
font-size: 6.25% /* 16px * .0625 => 1px */
}
p {
font-size: 1rem;
margin: 1rem;
}
renders as:
p {
font-size: 1px;
margin: 9px; /* WTF?! */
}
Strange, right? I'm assuming this is caused by some odd conflict with minimum font sizes.
Now, if you use font-size: 62.5% on the other hand, things render as expected:
html {
font-size: 62.5% /* 16px * .625 => 10px */
}
p {
font-size: .1rem;
margin: .1rem;
}
renders as:
p {
font-size: 1px;
margin: 1px;
}
You might find this useful as well. http://pixel2em.kleptomac.com
This provides an online pixel to em converter and you can also do a complete CSS file conversion.
An updated version is available at http://pixelconverter.kleptomac.com
Its an online unit converter for converting pixels, point, em, percentages. This supports conversion from/to any of these units.
For anyone who arrives at this useful post, I would like to share a link for a youtube video (approx.48 min.) about good web typography. It's actual and gives everyone a significant insight that changes the way you set type for the web.
I just made some subtle changes based on this conference video, and the results achieved were perceived, even by our users, as surprising.
The presentation is from Richard Rutter, and the link for the presentation is Richard Rutter | Web Typography