Cómo configurar correctamente el CSS principal

Tengo una situación tratando de descubrir cómo usar y configurar correctamente css leadingcuando tenemos algo como esto:

Incluso si line-heightes lo mismo, las primeras 2 líneas se ven bastante alejadas entre sí. Por otro lado, la línea 2 y 3 se ven más cerca. Habiendo dicho eso, ¿está bien usar diferentes line-heightvalores personalizados para crear el mismo espacio visual entre las líneas? Gracias.

Las líneas de base que dibujaste no son uniformes. La altura de la línea en realidad es. Que una línea tenga descendientes y el resto no, es un poco una ilusión óptica.
cierto, se trata de una ilusión óptica, ese es el punto. La altura de la línea es la misma para todo el párrafo.

Respuestas (3)

Hay diferentes maneras de responder a esto.

Puramente desde el punto de vista del diseño visual/gráfico, sí, puede espaciar el texto de la forma que mejor le parezca para que se vea bien. A menudo, necesitamos ajustar la tipografía ópticamente a mano para que las cosas se "sientan" bien, incluso si matemáticamente no están bien.

Técnicamente, depende del contexto de su marcado. Si se trata de un párrafo, entonces no, no hay forma real de dar a cada línea su propia altura de línea dentro de un párrafo, porque no hay forma de predecir qué texto estará contenido dentro de una línea. El ajuste de línea puede variar de un sistema a otro/navegador a navegador/usuario a usuario. La razón es que no tienes control absoluto sobre el tipo de persona dentro del navegador. Piense en el diseño web como 'sugerencia' de un diseño, pero no dictado.

La razón por la que no tiene un control absoluto es porque hay muchas versiones de fuentes, por lo que una persona puede tener una versión que tenga métricas ligeramente diferentes a otra. Además, los sistemas operativos y los navegadores web tienen todas las configuraciones predeterminadas, incluido el tamaño de fuente, que los usuarios pueden cambiar a voluntad para satisfacer sus propias necesidades.

Teniendo en cuenta todo eso, por lo general va a ser bastante poco práctico hacer esto.

Sin embargo, hay ocasiones en las que funciona. Por ejemplo, si son 3 líneas cortas, con mucho espacio en cada lado para expandirse si es necesario, entonces pruébalo. En ese punto, sin embargo, dado que la altura de la línea se aplica a un elemento como un todo, cada línea de texto tendría que estar envuelta en su propio elemento de nivel de bloque. Entonces, en ese punto, puede usar la altura de línea, el relleno, el margen o cualquier combinación para ajustar el espaciado.

Claro, es perfectamente aceptable. No hay ninguna regla que diga que no puedes.

Habiendo dicho eso, las dos cosas que tienes que considerar más son

  1. Capacidad de respuesta: si el tamaño de la pantalla o del contenedor es demasiado pequeño, es posible que parte del texto pase a la siguiente línea, lo que estropea todo el estilo.

  2. Cambiar el texto más adelante: si el texto se cambia en una fecha posterior a algo nuevo, es posible que el estilo específico aplicado para este conjunto de letras arruine la forma en que se ve el nuevo texto. Podría estar demasiado cerca o demasiado lejos, etc.

La pregunta debería ser: ¿vale la pena? Depende de la situación, pero muchas veces en mi experiencia la respuesta ha sido no .

Gracias por su rápida respuesta, en mi caso, el texto será el mismo para siempre :) se trata de un párrafo que permanecerá allí en la página para siempre. Hablando de capacidad de respuesta, la página no es para pantallas de dispositivos móviles o tabletas.
@ typo_78 si es un párrafo, entonces, no, no puede dar a cada línea una altura de línea separada, ya que no hay forma de predecir el ajuste de línea.
@ DA01 Creo que permite envoltorios dentro, lo que significa que cada línea tiene su propio elemento que la rodea. Podría ser p > abarcar relaciones
Será un párrafo corto (unas pocas líneas) con un tamaño de fuente de alrededor de 35-40 píxeles como el que tenemos en el ejemplo que se muestra, colocado en una columna. Cada línea se creará por separado <p> ... </p >con diferentes valores de altura de línea. . El ajuste de línea podría ocurrir si la página cambia de tamaño a tamaños pequeños y la columna tiene una opción de respuesta configurada, ¿verdad? pero no es mi caso
@ZachSaucier técnicamente, las petiquetas no pueden contener bloques secundarios. Pero independientemente, el problema no es el marcado, es que uno no tiene control real sobre las fuentes en el navegador de un usuario final. Las preferencias del sistema, del usuario y del navegador pueden cambiar las cosas lo suficiente como para causar estragos con el ajuste de línea manual. Si estamos hablando de un titular, entonces claro, pero si estamos hablando de párrafos de texto, esta no es una solución práctica.
@ typo_78 si cada línea es en realidad un párrafo, entonces eso puede funcionar, aunque probablemente me quede con la configuración de margen y relleno en cada uno p.
Y para ser claros, el ajuste de línea puede ocurrir con solo mirar la página en dos sistemas diferentes. No todos pueden tener exactamente la misma fuente instalada. No todos tendrán las mismas preferencias de tamaño de fuente predeterminadas. Mucha gente cambia las preferencias de tamaño de fuente, etc.
lo tengo :) en mi caso es un titular, y la fuente se carga en el servidor, el sitio usará esa fuente, así que supongo que todos verán ese mensaje en la misma forma, ¿no?
@ typo_78 sí, seguro que es una apuesta más segura. La mayoría de las personas verán la fuente (a menos que hayan desactivado esa opción en el navegador para descargar fuentes), pero la gente aún puede cambiar el tamaño. Sin embargo, como titular, es probable que tenga 'margen de maniobra', por lo que siempre que le dé ese espacio, debería estar bien.
con respecto a las preferencias de tamaño de fuente predeterminadas, es por eso que usaré estilos de párrafo para definir un conjunto de propiedades que incluyen ( font-family, font-style, font-weight, font-size, text-align, line-height, letter-spacing...)

Puede separar cada línea como su propia línea y luego manipular las líneas como desee. Esto aún podría causar problemas, pero puede mover las líneas a medida que lo solicite.