Font Size in CSS - % or Em

Font size in CSS - % or em?

There's a really good article on web typography on A List Apart.

Their conclusion:

Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.

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.

Changing CSS font-size alters other -em settings?

As for the first question: Yes, em units will (almost) always correspond to the current element's font-size, no matter the property you're using it on.

For a consistent "value", you could use rems , that stands for "root em", and that value will always be the same as the font-size that is set on your html.

You could also use vw and vh, which stands for "viewport width" and "viewport height"

em - Relative to the font-size of the element (2em means 2 times the size of the current font)
rem - Relative to font-size of the root element
vw - Relative to 1% of the width of the viewport
vh - Relative to 1% of the height of the viewport
vmin - Relative to 1% of viewport's smaller dimension
vmax - Relative to 1% of viewport's larger dimension

http://www.w3schools.com/cssref/css_units.asp

Em unit in CSS doesn't change font-size value as expected, why?

em value will be related to it's immediate container otherwise known as the parent. I think you'll probably want to use rem which is always related to the font-size of the <html> or what's called the document root.

In this Snippet, the em are rem. There's two buttons +/- which will modify the font-size of document root.

SNIPPET

$('#in1, #in2').on('click', function(e) {  var cur = $('#hook').css('font-size');  var res;  var mod = $(this).data('v');    res = parseFloat(cur) + parseFloat(mod);  $('#out1').val(res);
  $('#hook').css('font-size', res);});

/* general */
html {  font-size: 16px;}body {  margin: 0;  font: 100%"Open Sans", sans-serif;  color: #7f7e7d;}header,main,footer {  font-size: 1.171875rem;  /* 18.75px / 16px */}h1,h2,h3,h4,p,blockquote,figure,ol,ul {  margin: 0;  padding: 0;}main {  display: block;}h1 {  font-size: 4rem;}h2 {  font-size: 3.3333333333rem;  /* 62.5px / 18.75px */  font-weight: 400;}h3 {  font-size: 1.5557333333rem;  /* 29.17px / 18.75px */  margin: 1.1733333333rem 0;  /* 22px / 18.75px */  font-weight: 400;}p {  font-weight: 300;}a {  color: inherit;  text-decoration: none;}img {  max-width: 100%;  height: auto;  border: 0;}.container {  max-width: 960px;  margin: 0 auto;}.menu {  list-style: none;}.menu > li {  float: left;}.hide {  display: none;}.cf:before,.cf:after {  content: "";  display: table;}.cf:after {  clear: both;}/* header */
header {  background: #000;  color: #ccc;  font-weight: 300;}header .container {  position: relative;  /* kvoli jazykovemu menu, ktore bude absolute */  z-index: 1;}/* logo */
#logo {  float: left;  font-size: 0.48rem;  /* 9px / 18.75px */  font-weight: inherit;}#logo a {  display: block;  text-transform: uppercase;}.logoPic {  display: inline-block;  text-indent: -9999px;  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) left center no-repeat contain;  width: 148px;  /* logo width */  line-height: 7.6666666666666666666666666666667rem;  /* 69px / 9px */  padding-right: 18px;  /* priestor pre lomitko */  position: relative;}.logoPic::after {  content: "/";  position: absolute;  text-indent: 0;  right: 3px;  font-size: 40px;  /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */  color: #ffcc00;}/* navigation */
nav {  float: right;}nav a {  display: block;}#nav > li > a {  line-height: 3.68rem;  /* 69px / 18.75px */}#nav > li {  position: relative;  margin-right: 1.2266666666666666666666666666667rem;  /* 23px / 18.75px */}#nav > li:last-child {  margin-right: 0;}#nav > li:hover:not(.sub) > a {  color: #bf9900;}#nav > li.sub:hover > a::before {  content: "";  position: absolute;  width: 60%;  margin-left: 20%;  margin-right: 20%;  height: 0.26666666666666666666666666666667rem;  /* 5px / 18.75px */  background: #ffcc00;}#nav > li.sub:hover .submenu {  visibility: visible;}/* navigation submenu */
.submenu {  position: absolute;  top: 3.7866666666666666666666666666667rem;  /* 71px / 18.75px */  left: -1.0666666666666666666666666666667rem;  /* 20px / 18.75px */  background: #000;  list-style-type: none;  visibility: hidden;  transition: visibility .15s;}.submenu a {  padding: 0.55626666666666666666666666666667rem 0.67866666666666666666666666666667rem;  /* 10.43px / 18.75px | 12.725px / 18.75px */}.submenu li:hover {  color: #bf9900;}/* languages */
#languages {  position: absolute;  right: -9.2266666667rem;  /* 173px / 18.75px */}#languages a {  display: inline-block;  line-height: 3.68rem;  /* 69px / 18.75px */}#languages li::after {  content: "/";  padding: 0 0.16rem;  /* 3px / 18.75px */}#languages li:last-child::after {  content: "";  padding-right: 0;}#languages li:hover a {  color: #bf9900;}/* media queries */
@media (max-width: 1365px) {  body {    font-size: 85.333333331%;  }}#fixed {  position: fixed;  top: 10px;  max-width: 35ex;  margin-bottom: 20px;  z-index: 80;}#in1,#in2,#out1 {  position: fixed;  top: 10px;  max-width: 3.5ex;}#in2 {  left: 10.5ex;}#out1 {  left: 3ex;  z-index:11111;  font-size:18px;  color: black;  text-align: center;}#out1::after { content:'px' }

<!DOCTYPE html><html id='hook'>
<head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head>
<body>  <header id='fixed'>    <button id='in1' data-v='1'>+</button>    <output id='out1'></output>    <button id='in2' data-v='-1'>-</button>  </header>  <br/>  <br/>  <br/>  <header>    <div class="container cf">      <h1 id="logo">    <a href="#">     <span class="logoPic">Marek Petrik</span>Professional Photographer    </a>   </h1>
      <nav>        <ul id="nav" class="menu cf">          <li><a href="#aboutMe">O mne</a>          </li>          <li><a href="#">Služby</a>          </li>          <li class="sub"><a href="#">Portfólio</a>            <ul class="submenu ">              <li><a href="#">Svadba</a>              </li>              <li><a href="#">Modeling</a>              </li>              <li><a href="#">Príležitostné</a>              </li>              <li><a href="#">Architektúra</a>              </li>              <li><a href="#">Príroda</a>              </li>              <li><a href="#">Deti</a>              </li>            </ul>          </li>          <li><a href="#">Referencie</a>          </li>          <li><a href="#">Cenník</a>          </li>          <li><a href="#">Kontakt</a>          </li>        </ul>      </nav>
      <ul id="languages" class="menu">        <li><a href="#">SK</a>        </li>        <li><a href="#">EN</a>        </li>        <li><a href="#">DE</a>        </li>      </ul>    </div>  </header>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></body>
</html>

font size incorrect on using em unit

If you want font sizes in strict relation to the root font size (which is set in a a rule for html , not for body, and should be in px), you have to use the rem unit or percent, but not em (which will be in relation for the default browser size of a particular element or its parent)

Aditionally, most browsers have a "minimum font display" setting that prevents small sizes to become unreadable. Most likely this is set to 9px in your browser.

How font-size em value work?

Using em as measurement value would just not inhert but increases accordingly.

Here's an example:

<div>
  <p>
    <span>foo bar</span>
  </p>
</div>

body{
  font-size: 1em;
}
div{
  font-size: 1.5em;/*1.5em of 1em == 1.5em*/
}
div > p{
  font-size: 1.5em;/*1.5em of 1.5em inherited from div == 2.25em*/
}
div > p > span{
  font-size: 1.5em; /*1.5em of 2.25em inherited from p == 3.375em*/
}

So, I would recommend you to use px as measurement value.

Use ems to make scalable style sheets only.

If you want to know more about px, em, and % please follow this link and this link

CSS em issue: avoid scaling to font-size of specific element

It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.

Check out this article by Jonathan Snook if you want to learn more about it.
http://snook.ca/archives/html_and_css/font-size-with-rem

Is 1.0em the same as 100% for font sizes?

Yes.

1em and 100% mean the same thing (for font-size) — "The same font-size as the parent element" (which is not the same thing as the font size the user has selected unless you are talking about the HTML element).

There are bugs in Internet Explorer when em is used and the font size picked from the view menu is not medium.

How to change font size to em

Generally I set the body size to a fixed pixelage and then em the rest:

body {
    font-size: 14px;
}
p {
    font-size: 1em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}

This gives a p size of 14px, h1 of 28px, h2 of 25px.

Equally if you want to use whatever size the browser uses just use:

body {
    font-size: 1em;
}

Font Size in CSS - % or Em