html - style - La altura de línea del texto en negrita es más alta que la altura de línea del texto normal

style line height html

Question

Debe ser algo básico lo que me falta aquí. Pensé que font-weight: negrita no debería cambiar la cantidad de espacio vertical que ocupa el texto. Especialmente cuando la altura de línea se establece para ser más alta que el tamaño de fuente.

http://jsfiddle.net/Arkkimaagi/7xAyy/

En mi OSX Chrome esas tres alturas de texto no coinciden. El segundo con el peso de fuente: negrita es 1px más alto que el resto. El tercer div es solo un ejemplo de solucionar el problema (mal)

Estoy tratando de establecer la altura de línea a algo específico (18px) aquí, para tener "ritmo vertical"

Mi pregunta es, ¿cómo puedo tener texto en negrita y normal tanto con la misma altura de línea como en el ejemplo?

[edit:] esto es lo que veo en mi mac

Además, esto es lo que menciono por "ritmo vertical": http://www.alistapart.com/articles/settingtypeontheweb - la cuadrícula de línea de base es más visible en el ejemplo: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

Answer 1

A veces, agregar la alineación vertical superior resolverá esto (dependiendo del tamaño de fuente / familia).

strong { vertical-align: top; }

En su ejemplo de violín, porque ha establecido una altura de línea en el contenedor (div), simplemente puede agregar lo siguiente:

span { line-height: 1em; }

Answer 2

Creo que esto es un problema de fuente. Encontré diferentes alturas de línea para la variante en cursiva de Nunito (Google Web Font). Cuando cambié a una versión modificada de esa fuente llamada "Nunito Sans", el problema se resolvió.

Answer 3

Depende completamente de las fuentes que estés usando. Nada sobre la reproducción de texto OSX o Chrome aseguraría que dos fuentes diferentes (y Helvetica-neue y Helvetica-neue-bold son dos fuentes diferentes) tendrían el mismo espacio vertical incluso en el mismo tamaño de fuente y altura de línea.

A pesar de que es mucho pedir, puede pensar que dos fuentes diferentes de la misma familia pueden ser coherentes, y generalmente lo son, pero lamentablemente las dos fuentes que ha elegido no lo son.

Answer 4

Establecer una altura de línea absoluta tanto en el contenedor como en el texto en negrita, o darle al texto en negrita una altura de línea de 1em (como dice DaveC arriba) soluciona esto, p. Ej.

.bolded span {
  font-weight:bold;
  line-height: 1em;
}

O, ¿por qué no seguir los estándares HTML y usar las etiquetas correctas en lugar de espacios en negrita? P.ej

strong, em { line-height: 1em }

Answer 5

He encontrado un problema muy similar con la fuente de Chivo: http://www.fontsquirrel.com/fonts/chivo . En este momento estoy usando el truco más feo (funciona en Firefox y Chrome actuales, IE aún sin probar):

strong { vertical-align: top; position: relative; top: -1px; }

Trato de no rendirme con Chivo bastante fuerte como ves ...