Line-Height не соответствует размеру шрифта

1em равен 1-кратному количеству пикселей в размере шрифта. Итак, если ваш font-size равен 60px, 1em = 60px. Если это 14px, 1em = 14px и так далее. Установка line-height на 1em делает его равным 1-кратному количеству пикселей.

Может возникнуть некоторая путаница, потому что высота строки по умолчанию, установленная таблицей стилей пользовательского агента, обычно составляет около 1,5 em, поэтому 12px font-size приведет к 18px line-height.

единица em
Равен вычисляемому значению свойства font-size элемента, для которого оно используется.

Источник: http://www.w3.org/TR/css3-values/#font-relative-lengths
См. также: http://www.w3.org/TR/CSS21/syndata.html#length-units

Исходя из этого, ваш исходный пример - это именно то, что я ожидал увидеть. Для справки, вот что я вижу в Chrome:

Ваша первая строка имеет высоту 60 пикселей, но вычисленное значение (термин W3) второй составляет 14 пикселей (продиктовано примененным к ней классом). Оба имеют line-height из 1em. Таким образом, line-heights составляют 60px и 14px соответственно. Поскольку это то же самое, что и размеры шрифта, две линии соприкасаются (это может варьироваться от шрифта к шрифту).

Если вы видите перекрывающееся поведение, это другая проблема.

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

Обзор единиц CSS см. на странице http://css-tricks.com/css-font-size/

Шрифты не выровнены по краям поля

Обновленный вопрос/проблема

Что касается обновленного вопроса, см.: http://www.w3.org/TR/css3-fonts/#propdef-font-size, в котором говорится, что:

Обратите внимание, что некоторые глифы могут просвечиваться за пределами их поля EM.

Это происходило в разной степени с разными шрифтами, которые я пробовал (у некоторых растекаются оба X/Y, у некоторых в одном направлении, у некоторых вообще нет).

Я не уверен, что есть какой-либо способ изменить это поведение, тем более что каждый браузер может использовать другой алгоритм сглаживания, который может немного изменить край символа.

Я думаю, что line-box-contain: glyph может иметь значение, но я вижу, что он упоминается только в черновике редактора, и я уверен, что поддержка браузера отсутствует/несовместима.

http://dev.w3.org/csswg/css3-linebox/#line-box-contain

Увеличьте высоту строки в вашем CSS

line-height: 2em; (от 1 до 2em)

Который находится в элементе p.

Вы можете указать для своего «тестового» класса line-height или margin-top все, что вам удобно.

.test{
    font-size: 14px;
    line-height:18px;
}

Высота строки по умолчанию является относительным размером, например, 150% размера шрифта в p. Если вы измените высоту строки с помощью em или %, браузеры интерпретируют это как «em/% по сравнению с размером шрифта».

http://jsfiddle.net/P7LaP/

<div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

В примере есть три набора из трех тегов p с нормальной высотой, коротким и высоким. В то время как три набора - это размер шрифта.

p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

Надеюсь, это поможет. Я точно не знаю, что вы пытаетесь сделать, но, похоже, вам следует просто удалить строку высоты строки из таблицы стилей.