, envolviendo tanto el título como el párrafo, y de ellos, en consecuencia, eliminamos esta propiedad, obtenemos:

Si establecemos line-height = 0,4, obtenemos una exhibición principal negativa:

¿Por qué hacen algo con la distancia entre líneas? ¿Porque es dañino? ¿No tener nada que hacer?

El interlineado correctamente elegido puede mejorar la legibilidad del texto, y este es un aspecto muy importante en diseño web, tipografía y todo lo relacionado con el texto. De acuerdo en que cuando aumentamos la distancia entre líneas en el segundo ejemplo, el texto se volvió más agradable de leer, ¿no? Pero esto no significa en absoluto que cuanto mayor sea el interlineado, mayor será la legibilidad del texto. A partir de cierto punto, las líneas empiezan a estar demasiado separadas unas de otras, al ojo le resulta más difícil pasar de una a otra y la lectura se vuelve incómoda. Recuerda la media dorada.

Principal

Mucha gente, incluidos los diseñadores, piensa que tipografía- es sólo una elección de tipo de letra, tamaño de fuente y si debe ser normal o negrita. Para la mayoría de la gente, ahí es donde termina. Pero una buena tipografía requiere mucho más, y estos suelen ser detalles que los diseñadores suelen ignorar.
Estos detalles le dan al diseñador un control total, permitiéndole crear soluciones de diseño hermosas y tipográficamente consistentes. Si bien todo esto se aplica a diferentes tipos de medios, en este artículo nos centraremos en cómo aplicarlos al diseño web utilizando CSS. Aquí 8 formas sencillas de mejorar tu tipografía usando CSS y por lo tanto la usabilidad general del diseño.

1. Dimensiones

Tamaño de tipografía. A los ojos del lector, las líneas largas o cortas resultan tediosas. Los largos destruyen el ritmo, ya que al lector le resulta difícil encontrar la siguiente línea de texto. La única situación en la que se aceptan líneas cortas es una pequeña cantidad de texto. Para una mejor legibilidad, la longitud de la línea debe estar entre 40 y 80 caracteres, incluidos los espacios. Para un diseño con una columna de texto, 65 caracteres son ideales.

Una forma sencilla de calcular la longitud de la línea es utilizar el método de Robert Bringhurst, que multiplica el tamaño de la fuente por 30. Es decir, si el tamaño de la fuente es 10 px, multiplicarlo por 30 le dará 300 px o aproximadamente 65 caracteres por línea. El código se verá así:
pag(
tamaño de fuente: 10px;
ancho máximo: 300px;
}
Utilizo px porque facilita mucho los cálculos, pero también se puede utilizar em.

2. Liderar

El interlineado es el espacio entre líneas de texto en el cuerpo de una nota y juega un papel importante en la legibilidad. La separación de líneas adecuada facilita que el lector siga la línea y mejora la apariencia del texto. El interlineado también cambia el color tipográfico del texto, que es la densidad o tono de la composición.
El interlineado está influenciado por muchos factores: tipo de letra, tamaño de fuente, integridad, circunstancias. (?) , longitud de línea, espaciado entre palabras, etc. Cuanto más larga sea la línea, mayor será el liderazgo. Cuanto mayor sea el tamaño de fuente, más pequeño será el interlineado. Una buena regla es establecer el interlineado es de 2 a 5 puntos más grande que el tamaño de fuente, dependiendo del auricular. Entonces, si la fuente es de 12 puntos, entonces para la web el interlineado debe ser de 15 puntos o 16 puntos.

Determinar el interlineado correcto requiere algo de delicadeza, pero a continuación se muestra un ejemplo de cómo debería verse su código:
cuerpo (

tamaño de fuente: 12px;
altura de línea: 16px;
}

3. Manejo de cotizaciones

El procesamiento de cotizaciones debe realizarse en los márgenes del texto. Si las comillas se fusionan con el texto, rompen el margen izquierdo y alteran la rima del bloque de texto. El manejo de las comillas no altera la alineación y el equilibrio hacia la izquierda y, por lo tanto, mejora la legibilidad.

Esto se logra fácilmente con CSS usando el elemento blockquote:
cita en bloque (
sangría de texto: -0,8em;
tamaño de fuente: 12px;
}

La sangría negativa dependerá del tipo de letra, el tamaño de fuente y los márgenes.

4. Ritmo vertical

La cuadrícula base es la base para un ritmo tipográfico consistente en la página. Permite a los lectores seguir fácilmente el texto, lo que a su vez aumenta la legibilidad. Ritmo constante en el espacio vertical. mantiene el texto en una cuadrícula constante para que las proporciones y el equilibrio sigan siendo los mismos en toda la página, independientemente del tamaño de fuente, el interlineado o la longitud de la línea.

Para mantener el ritmo vertical usando CSS, es necesario que la distancia entre elementos y el espacio entre líneas (interlineado) sea igual al tamaño de la cuadrícula de base. Digamos que usas 15px cuadrícula de referencia, lo que implica que hay 15 píxeles entre cada línea de la cuadrícula. El interlineado será de 15px y la distancia entre párrafos también será de 15px. He aquí un ejemplo:
cuerpo (
familia de fuentes: Helvetica, sans-serif;
tamaño de fuente: 12px;
altura de línea: 15 px;
}

PAG(
margen inferior: 15px;
}

Esto permite que cada párrafo encaje en una cuadrícula manteniendo el ritmo vertical del texto.

5. Líneas para colgar superior e inferior

Cuerda para colgar en la parte superior- una línea de texto o una palabra al final de un párrafo. Línea para colgar inferior- una palabra o línea corta de texto al principio o al final de una columna que está separada del resto del texto. Las líneas colgantes superiores e inferiores forman trozos incómodos, interrumpen la atención del lector y afectan la legibilidad. Esto se puede evitar aumentando el tamaño de fuente, el interlineado, la longitud de la línea, el espaciado entre palabras y entre letras, o ingresando saltos de línea manualmente.

Desafortunadamente, no existe una manera fácil de evitar líneas colgantes usando CSS. Una forma de deshacerse de ellos se describió anteriormente, otra es jQWidont, un complemento de jQuery que coloca espacios continuos entre las dos últimas palabras de un elemento.

6. Selección

Importante resaltar palabras sin distraer al lector. La cursiva a menudo se considera la forma ideal de resaltar. Algunas otras formas comunes de énfasis son: negrita, mayúsculas, versalitas, tamaño de fuente, color, subrayado u otro tipo de letra. No importa cuál uses, intenta usar solo uno. Combinaciones como versalitas, negrita y cursiva distraen y parecen incómodas.

Aquí hay algunas formas de resaltar usando CSS:
durar (
estilo de fuente: cursiva;
}

H1 (
peso de fuente: negrita;
}

H2 (
transformación de texto: mayúsculas;
}

B (
variante de fuente: versalitas;
}
Tenga en cuenta que la variante de fuente solo funciona si la fuente admite versalitas.

Para elementos de bloque, define la altura mínima de la línea de texto. Para elementos en línea en línea (como ) la propiedad line-height no tiene ningún efecto. Para otros elementos en línea, altura de línea especifica la altura que se utiliza para calcular la altura de línea del bloque.

Breve información

Designaciones

	Descripción	Ejemplo
<тип>	Indica el tipo de valor.	<размер>
A && B	Los valores deben generarse en el orden especificado.	<размер> && <цвет>
Un | B	Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales | letras minúsculas
Un || B	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho || contar
	Valores de los grupos.	[ cultivo || cruz]
*	Repita cero o más veces.	[,<время>]*
+	Repita una o más veces.	<число>+
?	El tipo, palabra o grupo especificado es opcional.	¿recuadro?
(A, B)	Repita al menos A, pero no más de B veces.	<радиус>{1,4}
#	Repita una o más veces separadas por comas.	<время>#

×

Valores

Cualquier número mayor que cero se trata como un multiplicador del tamaño de fuente del texto actual. Por ejemplo, un valor de 1,5 establece un interlineado y medio. Cualquier unidad de longitud aceptada en CSS también se acepta como valor: píxeles (px), pulgadas (in), puntos (pt), etc. Se permite utilizar notación porcentual, en este caso la altura de la fuente se toma como 100. %.

Normal La distancia entre líneas se calcula automáticamente.

Salvadera

Winnie the Pooh no siempre fue reacio a tomar un refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno ya había terminado y el almuerzo aún no había comenzado. Y, por supuesto, se alegró terriblemente de ver que el Conejo sacaba tazas y platos.

div (altura de línea: 0,5;)

Ejemplo

Postulado normal: ¿álgebra o valores máximos y mínimos de una función?

La vecindad épsilon, excepto en el caso obvio, admite una integral compleja en un dominio infinito.

El resultado de este ejemplo se muestra en la Fig. 1.

Arroz. 1. Aplicar la propiedad de altura de línea

Modelo de objetos

Un objeto.style.lineHeight

Nota

Internet Explorer anterior a la versión 7.0 no calcula correctamente la altura de las líneas para imágenes y elementos de formulario.

Especificación

Cada especificación pasa por varias etapas de aprobación.

• Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
• Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
• Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
• Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
• Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
• Borrador ( Borrador de especificación) - el primer borrador de la norma.

×

Muy a menudo, los diseñadores principiantes tienen problemas para dominar las hojas de estilo en cascada (CSS). Trabajar con interlineado en CSS no es una excepción. El interlineado es la distancia vertical entre líneas. Como en un documento normal de Microsoft Word, también puedes cambiar este parámetro en el texto de un archivo html.

Usar la altura de línea al cambiar el espaciado

La primera y más correcta opción para resolver el problema con intervalos sería establecer un valor para la propiedad de altura de línea. El valor predeterminado de esta propiedad es normal (altura de línea: normal;). El interlineado lo calcula automáticamente el propio navegador de Internet y depende, en particular, del tipo de fuente, así como de su tamaño. Cualquier valor numérico positivo que se especifique en la propiedad de estilo de altura de línea será interpretado por el navegador como un número por el cual multiplicar el tamaño de fuente actual.

En CSS, el interlineado se puede especificar en diferentes unidades de longitud: puntos (pt), pulgadas (in), píxeles (px) y porcentajes (%). El porcentaje se calcula en relación con la fuente actual y el valor predeterminado es 100%. No olvide que la propiedad de altura de línea toma prestado el valor de la propiedad heredada de su elemento principal.

A continuación se muestran algunos ejemplos de cómo aumentar el interlineado en CSS:

El proceso de trabajar con el interlineado es bastante sencillo. Debe tener conocimientos básicos de CSS y la capacidad de conectar un archivo a la página HTML principal. Los estilos también se pueden configurar directamente en la página html:

Para crear un espacio y medio en esta oración, debe agregar el siguiente código en el archivo CSS:

altura de línea: 1,5;

Para hacer doble espacio, puedes escribir el siguiente código:

altura de línea: 200%;

En ambos casos, el navegador entenderá que la fuente actual debe multiplicarse por 2. Este valor será el interlineado.

Ahora aquí hay un ejemplo de cómo reducir el espacio entre líneas (CSS):

Es importante recordar que un valor de altura de línea negativo simplemente no se percibe, por lo que su valor mínimo puede ser 0. Para obtener un medio intervalo, debe escribir el siguiente código:

altura de línea: 0,5;

altura de línea: 50%;

altura de línea: 0,5 puntos;

Las 3 opciones son correctas y cumplen con todos los estándares del W3C, por lo que funcionarán en cualquier versión del navegador.

Usar relleno al cambiar el espaciado

Sin embargo, además de cambiar la propiedad line-height, hay otra forma de cambiar el interlineado en CSS, esta es “jugar” con los valores de la propiedad padding. La propiedad de estilo de relleno es responsable del relleno interno en cualquier objeto html. De forma predeterminada, esta propiedad es 0. Al seleccionar diferentes valores, puede cambiar el interlineado, por ejemplo:

Trabajar con el interlineado es muy sencillo. Basta con conocer los conceptos básicos de CSS y poder conectar el archivo a la página HTML principal. También se puede configurar directamente en la página con la extensión html.

Para aumentar el espacio entre líneas, aumente el valor de la propiedad:

Así, la distancia entre líneas de nuestro párrafo se incrementará en 10 píxeles con respecto a la inicial. Con el mismo éxito, puede reducir el interlineado escribiendo, por ejemplo:

Interlineado negativo

Si te diste cuenta, tampoco te permite ingresar valores negativos, para que no termines con filas superpuestas entre sí. En CSS, el interlineado no puede ser negativo. Desde el punto de vista de la codificación y los estándares del W3C, nunca se pueden escribir valores negativos en los valores de interlineado.

Cambiar el interlineado en listas

A veces surge la tarea de cambiar el interlineado en las listas.

Y
. Los métodos anteriores no conducirán al resultado deseado; sin embargo, hay una propiedad que puede cambiar el espaciado en la lista: esta es la propiedad de margen. Esta propiedad de estilo puede tener un valor positivo o negativo. Mostremos el cambio en el interlineado en la lista usando un ejemplo:
1. Párrafo 1
2. Punto 2
3. Punto 3

Para aumentar la sangría, debe escribir las siguientes líneas en el archivo CSS:

margen superior: 10px;

Por tanto, indicamos que la distancia desde cada elemento de la lista aumenta en 10 píxeles. Además, en este caso también es posible un valor negativo. Entonces podemos configurar: - margen superior: -15px.