Как избавиться от неожиданных пробелов в блоке H1

Question

Я пытаюсь выровнять текст в блоке H1 с строкой над ним (технически это: после псевдоэлемента в H1, whenewer). И меня удивили странные прокладки внутри блоков.

CSS блока (расчетного):

box-sizing: border-box; 
color: #192A33; 
font-family: Lintel-Regular,Arial,Helvetica,sans-serif; 
font-feature-settings: "kern", "liga" off, "calt" off; 
font-size: 60px; 
font-weight: 500; 
line-height: 72px; 
margin-bottom: 32px; 
margin-left: 311px; 
margin-right: 0px; 
margin-top: 0px; 
padding-top: 15px; 
position: relative; 
text-transform: uppercase; 

Я использую normalize.css 3.0.3

Спасибо за советует.

The Problem, marked red

Answer 1

Вы не хотите, чтобы избавиться от этого. Символ не только черный, но и белый вокруг него. Этот белый цвет делает каждый символ отличным от других глифов и других линий. Этот белый цвет тщательно выбирается дизайнером шрифтов.

Прокладки и поля, наносимые css, правильно добавлены к этому уже существующему белу, который составляет общий глиф.

Конечно, вы можете настроить счетчик, выбирая меньшую высоту строки, чем ваш размер шрифта и/или отрицательные поля. Но это просто хаки (или если аскетически сделано правильно, вы можете назвать это типографским уточнением). Возможно, лучше просто принять тот факт, что глифы имеют белый цвет вокруг них.

Моя точка зрения: ваши «странные прокладки» или «проблема, отмеченная красным» - это поведение по умолчанию.

Answer 2

В разделе вы помечены красным цветом вызвано линией высоты. Ниже приведена высота линии.

h1 { 
 

 
box-sizing: border-box; 
 
color: #192A33; 
 
font-family: Lintel-Regular,Arial,Helvetica,sans-serif; 
 
font-feature-settings: "kern", "liga" off, "calt" off; 
 
font-size: 60px; 
 
line-height: 50px; 
 
font-weight: 500; 
 
margin-bottom: 32px; 
 
margin-left: 311px; 
 
margin-right: 0px; 
 
margin-top: 0px; 
 
padding-top: 15px; 
 
position: relative; 
 
text-transform: uppercase; 
 

 
}

<h1>Test String</h1>