Каков контекст использования em?

Это соответствует вычисленному значению свойства ‘font-size’ элемента, на котором оно используется. Наследование происходит вниз по дереву документа.

Чтобы ответить на ваш вопрос, значение будет 0,5 от 2em, что в свою очередь будет равно 2 умножить на вычисленное значение font-size родителя элемента h1. Уф.

Также важно отметить, что если вы используете em для других CSS-свойств, например, width или height, то результат будет рассчитываться исходя из вычисленного font-size того элемента, к которому вы применяете width или height, и так далее...

Следующая статья довольно хорошо объясняет использование и контекст единицы em, а также предлагает другие материалы и ресурсы для чтения... Возможно, вас тоже заинтересуют единицы rem.

1. http://www.impressivewebs.com/understanding-em-units-css/
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://caniuse.com/rem

Также вы можете ознакомиться с этим fiddle, чтобы увидеть, как это работает более наглядно:

http://jsfiddle.net/HpJjt/3/

В данном случае размер шрифта элемента .smaller будет равен 0.5 от 2em элемента h1 в контексте.

Чтобы установить его относительно 16px, вам нужно сначала задать родительскому элементу h1 размер шрифта 16px.

.wrapper {
  font-size: 16px;
}
h1 {
  font-size: 2em;
}
.smaller {
  font-size: 0.5em;
}

<div class="wrapper">
  <h1>Привет, я <span class="smaller">жаба</span></h1>
</div>

Таким образом, в этом случае:

• У .wrapper размер шрифта составляет 16px
• У h1 размер шрифта составляет 2em, что равно 32px (2 * 16px)
• У span.smaller размер шрифта составляет 0.5em (или 50% от 1em, который наследуется от h1), что в итоге равно 16px (0.5 * 32px)

Имейте в виду, что em — это относительная единица измерения, основанная на высоте символа M в текущем шрифте. Таким образом, h1 имеет размер 32px, а span.smaller — 16px.