CSS How to Properly use ems instead of pixels?
line-height: 1.4em;
Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.
line-height has a special case where it allows a unitless number:
line-height: 1.4;
Which makes each descendant line-height depend on its own font-size rather than the ancestor's.
Should I be defining my font-size [on a wrapper or on many element types]?
Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }
, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.
where ELSE should I be using ems
Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:
#maintext {
width: 60%;
min-width: 8em;
max-width: 40em;
}
to try to restrict text lines to a reasonable column width when doing liquid layout.
But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.
Why em instead of px?
The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.
As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.
Using px to define the width
Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
A simple implementation would defining the width of the date-box
class in px:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}
The problem
However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px
.
Using em instead
A smarter way is to define the width in ems instead:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt
That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in *
as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.
Should I use px or rem value units in my CSS?
TL;DR: use px
.
The Facts
First, it's extremely important to know that per spec, the CSS
px
unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the
px
unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.That said, up until 2010 (and the mobile zoom situation notwithstanding), the
px
almost always did equal one physical pixel, because all widely available displays were around 96dpi.Sizes specified in
em
s are relative to the parent element. This leads to theem
's "compounding problem" where nested elements get progressively larger or smaller. For example:body { font-size:20px; }
div { font-size:0.5em; }Gives us:
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25pxThe CSS3
rem
, which is always relative only to the roothtml
element, is now supported on 99.67% of all browsers in use.
The Opinion
I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.
In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as em
s). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px
, they wouldn't scale when changing the browser's font size option.
Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.
Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).
1 - within statistical error, naturally
If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)
One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.
So my answer is use pixel units. I use px
for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use em
s anyway.
What is the difference between px, em and ex?
- Pixels (
px
) are browser dependent. It is the absolute size that you would see on your screen. Em
are sort of like percentages.Em
s is referring to the base text size. The value of1 em
means the same thing as a value of100 percent
. But you can also say it in the opposite way: A percentage value is just anem
multiplied by 100.- Points(
pt
) are what you would want to use in print media.
How to use EMs and percentages for responsive design?
It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size
of the body in pixels.
rem
units are great for ensuring that everything scales proportionally to the browser font-size. em
units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem
is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.
With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem
media queries differently than other browsers, it is best to use em
for media queries.
When to use %, px, em, etc...?
Using percentages to have a layout work in different size viewports is a very advanced technique, and is often done dynamically using javascript. Until you are more familiar with CSS, and can look at working percentage based layouts and understand enough to replicate it, you are better sticking to PX.
If you are going the javascript route it is really quite simple. For a start use jQuery as it makes resizing your layout a breeze compared to trying to do it with native javascript. Then $(window).height(); gives you the height of the viewport; $(window).width(); gives you the width. You set a default px width for your container, and then use percentages for all other block level elements (containers, within the container, sidebar, main etc) and do this:
function percentagize() {
var height = $(window).height()-100;
var width = $(window).width()-20;
$("div#container").css({
'height' : height+'px',
'width' : width+'px',
'margin': '0 auto'
});
}
$(document).ready(function() {
percentagize();
$(window).bind('resize','percentagize');
})
Best font size em or px to use for Website and Web apps?
This is an extremely subjective question. In addition, there are more options than just em and px: rem, em, px, vw/vh. Understanding how they all work is the key to picking which one is best for you and you app depending on the situation. Most of the time I use rem/em for responsive reasons, but there are times with vw/vh or px are a better option for me. It totally depends on what you're trying to accomplish.
CSS: Why should I use ems? pxs seem to have all the same features?
http://css-discuss.incutio.com/wiki/Using_Ems
"They are resizable in all Web browsers that support resizing, they are specified relative to the user's font size preferences, and can therefore adapt to the viewer's screen."
and more...
Related Topics
Create a Complex CSS Shape (Speaking Bubble)
Images Not Showing in Phonegap Build Application
A:Visited Is Not Working on Mozilla But Works Fine on Ie
Bootstrap Styles Missing After Deploy to Heroku
The CSS Selector for an Element That Its Id Is in The "Foo:Bar" Form
Why <Big> Is Not in HTML 5 Tag List While <Small> Is
Performance of Jquery Selectors Vs CSS3 Selectors
Using @Font-Face with Ruby on Rails
Asp.Net Mvc: How to Use Razor Variable in CSS File
Div Height:100%; Not Working with Display:Table-Cell;
How to Get CSS Pseudo Element: Checked to Work in Ie7 + Ie8
Compass-Style (Ruby) Encoding Error
Freeze Keyframe Animation for Debugging
Prevent Paragraph from Increasing The Width of a Floated Parent
How to Avoid Content of Span Break in Two Lines
How to Apply Different CSS Styles to 2 Elements with The Same Class Name