7 consejos rápidos de CSS para mejorar la legibilidad de un sitio web
Publicado: 2020-08-24Cada sitio web requiere contenido textual que un visitante pueda leer y analizar. Este contenido puede tener la forma de un blog, un artículo o un sitio web comprensible que explique varias áreas del sitio web. Un visitante en un sitio lee ciertas cosas en el sitio web de acuerdo con sus requisitos. Pero él o ella solo puede leer el contenido cuando el texto en el sitio web es legible y fácil de leer. Sin legibilidad, el sitio es solo una colección de imágenes, enlaces y otros elementos web. Por lo tanto, no importa cuán largo o breve sea, el contenido del sitio web debe ser lo suficientemente legible. Como desarrollador web, debe saber qué tipo de fuentes necesita o qué tipo de alineación espacial se requiere. Estos parámetros juegan un papel esencial que decide cómo aparece y se desglosa el contenido textual en una página web.
En estos días, los desarrolladores web usan CSS para diseñar todo en un sitio web, desde su apariencia, fuentes y tipos de fuentes. Aquí, este blog se enfoca en consejos y trucos específicos de CSS que puede seguir para mantener y mejorar la legibilidad del sitio web mientras usa CSS.
1. Unidades:
Hay varias unidades disponibles que lo ayudan a administrar el tamaño de fuente en un texto. Debe comprender qué unidad es útil según la sección del texto en su sitio web o páginas web. Estas unidades se pueden determinar después de que comprenda cómo desea definir la estructura de la página web y la alineación del texto en ella. También se deben considerar factores como las dimensiones del dispositivo de visualización y las preferencias del lector. Por lo tanto, cuando piensa que las unidades específicas de la fuente, em y rem son las opciones perfectas en las que puede confiar. Puede usar ems para definir la configuración del margen vertical dentro de los párrafos cuando el tamaño del texto tiende a cambiar. Pero tiende a crear un cuello de botella si una fuente serif se reemplaza con una fuente sans-serif en una sección seleccionada. Además, las fuentes con el mismo tamaño pueden aparecer diferentes a medida que cambian sus familias. Generalmente, el tamaño del alfabeto en minúsculas "x" se refiere al tamaño de los otros caracteres.
Cuando usamos CSS para manejar la apariencia de nuestro sitio web, podemos tomar en consideración la propiedad "font-size-adjust" y hacer que las fuentes tengan el mismo tamaño. Debido a esto, las alturas de los caracteres pueden coincidir con la altura de las letras minúsculas. Puede usar este fragmento de código para asegurarse de los factores mencionados anteriormente:
@supports(fuente-tamaño-ajuste: 1;)
{
Artículo{
ajuste de tamaño de fuente: 0,5;
{
}
2. Altura de línea:
El área blanca entre el texto negro define la tipografía, y esto es aplicable cuando estamos por diseñar un sitio web o una aplicación web. Debemos prestar mucha atención al considerar la altura de línea, los márgenes y los saltos de línea. Puede determinar el tamaño de la fuente para optimizar la altura de la línea dependiendo del valor de la altura x. De forma predeterminada, los navegadores proporcionan la altura de la línea como 1,2, que es un valor sin una unidad específica. Este valor es el valor correcto para las fuentes Times New Roman, pero no se aplica de manera similar a otras fuentes. El interlineado no se dispara de forma lineal con el tamaño de fuente, y depende de parámetros como el tipo de texto. Para el contenido de formato largo, se probaron fuentes específicas con tamaños que iban del 8 al 14. Y esto nos mostró que la relación entre la altura de la x y el espacio entre líneas se reduce a 37,6. Estas pruebas se realizaron para el contenido de formato largo impreso en una hoja de papel.
Cuando consideramos los dispositivos móviles o las pantallas de otros dispositivos, notamos que el contenido del dispositivo requiere un espacio correcto entre las líneas del texto. Por lo tanto, para el contenido digital, la proporción se mantiene en 32. Con CSS, puede definir este valor en forma de fragmento de código de la siguiente manera:
PAGS{
Altura de línea: calc(1ex/0.32);
}
Este código le permite tener un valor óptimo independientemente de si la fuente proviene de la familia de fuentes sans-serif o serif. El mismo valor es relevante cuando las herramientas relacionadas con la tipografía no están disponibles.
3. Definición de escala:
En subtítulos anteriores, ajustamos el tamaño de las fuentes y usamos valores para determinar la altura de la línea. Yendo más allá, necesitamos determinar la escala tipográfica para colocar la cantidad correcta de espacio entre párrafos al considerar el contenido de formato largo. Como ya hemos establecido, el interlineado no crece de forma lineal, sino que está sujeto a variación según la estructura del texto. Al considerar los títulos con tamaños de fuente enormes, debemos tener una proporción de altura de línea más grande. Podemos definir esto usando el siguiente código CSS:
artículo h1
{
tamaño de fuente: 2,5 em;
altura de línea: calc(1ex / 0.42);
margen: calc(1ex / 0.42) 0;
}
artículo h2
{
tamaño de fuente: 2em;
altura de línea: calc(1ex / 0.42);
margen: calc(1ex / 0.42) 0;
}
artículo h3
{
tamaño de fuente: 1,75 em;
altura de línea: calc(1ex / 0.38);
margen: calc(1ex / 0.38) 0;
}
artículo h4
{
tamaño de fuente: 1,5 em;
altura de línea: calc(1ex / 0.37);
margen: calc(1ex / 0.37) 0;
}
artículo p
{
tamaño de fuente: 1em;
altura de línea: calc(1ex / 0.32);
margen: calc(1ex / 0.32) 0;
}
El código anterior lo ayuda a establecer la altura de línea de acuerdo con el tamaño de fuente en lo que respecta a los títulos. Además, el contenido de formato largo también puede beneficiarse de este fragmento de código.
4. Espaciado con letras y palabras:
Cuando trabajamos con problemas de legibilidad, no debemos olvidarnos de las personas que tienen dislexia y tienen otras discapacidades y desafíos de aprendizaje. La investigación sobre la dislexia del desarrollo aún está en estudio, lo que afecta gravemente la capacidad de lectura. Al decidir los factores mencionados anteriormente, siempre debe considerar estos estudios científicos. Su tipografía puede determinar los efectos y consecuencias de cómo los lectores leen su contenido.
Ha habido una prueba clara para atestiguar que las formas de los glifos con altos niveles de legibilidad de las fuentes no ayudan con la lectura, pero el espacio entre los caracteres sí. Por lo tanto, debemos proporcionar a las páginas web las herramientas que le permitan aumentar o disminuir el espacio entre los caracteres y cambiar el tamaño de las fuentes para mejorar la legibilidad. Debe prestar atención a que estos controles deben aumentar el tamaño entre los caracteres a medida que aumenta el tamaño de la fuente. Lo mismo ocurre con la disminución en el tamaño de la fuente. Puede concentrarse en el espacio entre letras y entre palabras utilizando "espacio entre letras" y "espacio entre palabras" en los fragmentos de código CSS.
Pero cuando usa el "espaciado entre letras", no tiene en cuenta las condiciones y tiende a romper el interletraje de las fuentes. Esto conduce a la representación de un espaciado no óptimo en la página web. Para lidiar con este inconveniente, podemos tomar fuentes variables para controlar cómo se representan las fuentes en la página web. Los diseñadores de fuentes deben parametrizar el espaciado en una variable. Esto ayuda a determinar el peso de la fuente y la forma del glifo que puede escalar de acuerdo con los hábitos cambiantes del lector.
5. Ancho y alineación:
En un formato de texto digital, el ancho de un párrafo se define como el número de caracteres y el espacio en la línea. Un ojo humano se usa para leer entre siete y ocho letras cuando comienza a leer un texto. Además, un ojo humano solo puede leer unas pocas repeticiones que aparecen consecutivamente. Por lo tanto, los saltos de línea en cualquier parte de la escritura son esenciales. Tienes que considerar cómo se mueve el foco del lector mientras lee una parte de un texto. Va desde el final de la línea hasta el comienzo de la siguiente línea del texto. De ahí que sea fundamental mantener un determinado número de caracteres en función del tipo de texto. Generalmente, un párrafo contiene líneas que contienen de 60 a 70 caracteres en una línea. La unidad "ch" se usa para establecer este valor mientras asigna el ancho del párrafo usando CSS. El siguiente código en CSS define el valor "ch":
PAGS
{
Ancho: 60 canales;
Max-ancho: 100%;
}
La justificación del texto también es crucial cuando se trata de párrafos. La asistencia con respecto a la separación de sílabas no es óptima cuando los navegadores cambian. Por lo tanto, debe verificarse con suficiente antelación. Si la ayuda de separación de palabras no está disponible, debe evitar justificar el texto ya que el espacio horizontal sería un obstáculo mientras lee. Le proporcionamos el código CSS cuando el soporte de separación de palabras está disponible y no disponible:
/* en el caso de que esté disponible la separación silábica:*/
p[lang=”es”]
{
alineación de texto: justificar;
guiones: automático;
}
/*Código CSS cuando no tienes soporte para guiones*/
p[lang=”it”]
{
alineación de texto: izquierda;
guiones: ninguno;
}
Los idiomas que no vienen con soporte nativo pueden tener guiones manuales. Puede usar varios del lado del servidor y del lado del cliente para inyectar “‐” factor. Esto indica dónde puede permitir que se rompa la ficha. Este carácter se vuelve invisible a menos que se coloque al final de la línea, donde se muestra en forma de guión. Para usar esto, necesitamos configurar los parámetros "guiones: CSS manual".
6. Contraste de primer plano:
El factor más fundamental a considerar cuando se trata de legibilidad es el contraste de color entre el fondo y el color seleccionado de la fuente. Las WCAG, también conocidas como Pautas de accesibilidad al contenido web, tienen una lista particular de pautas predefinidas para varios estándares. Define el contraste de color correcto requerido entre el fondo y el texto en la aplicación web o un sitio web. Puede calcular el contraste utilizando varias herramientas que están disponibles tanto para el diseño como para el desarrollo. Hay validadores automáticos disponibles en el mercado, pero no funcionan con tanta precisión como la prueba real.
Cuando usamos CSS para definir el contraste de color, podemos usar una instrucción "calc" para calcular el color de la fuente dinámicamente para ofrecer el mejor contraste de color. Esto se calcula teniendo en cuenta el color del tema y el fondo. El código CSS que emplea el factor "Calc" es el siguiente:
artículo
{
–rojo: 230;
–verde: 230;
–azul: 230;
–aa-brillo: (
(var(–rojo) * 299) +
(var(–verde) * 587) +
(var(–azul) * 114)
) / 1000;
–aa-color: calc((var(–aa-brillo) – 128) * -1000);
fondo: rgb(var(–rojo), var(–verde), var(–azul));
color: rgb(var(–aa-color), var(–aa-color), var(–aa-color));
}
De acuerdo con los parámetros de consulta de medios, también puede permitir que el usuario cambie entre los temas oscuros y claros según las preferencias del usuario. Puede usar "esquema de color preferido" en CSS para habilitar el cambio entre los temas claros y oscuros de la siguiente manera:
@media (prefiere-esquema-de-color: oscuro)
{
artículo
{
–rojo: 30;
–verde: 30;
–azul: 30;
}
}
7. Agregando sombra a las fuentes:
Si bien tenemos una variación significativa entre las fuentes web para elegir, es fácil desviarse de la selección de las fuentes tradicionales que definen el enfoque y la consistencia estándar. Pero, existen ciertos inconvenientes que vienen con la elección de las fuentes web personalizadas. Por ejemplo, todos los dispositivos representan las fuentes de forma diferente. Se sabe que las computadoras Apple crean fuentes con píxeles perfectos utilizando técnicas de suavizado. Pero, con Windows, favorecen el enfoque en el que se da mayor importancia a la legibilidad. Por lo tanto, si observa el mismo texto en dispositivos basados en Apple y Windows, es posible que las fuentes se vean diferentes hasta cierto punto.
Para superar este problema, las fuentes web vienen al rescate. Las fuentes web se muestran bien en la web tal como aparecen originalmente. Pero, para las fuentes web personalizadas recientemente lanzadas, las fuentes no se muestran de acuerdo con nuestras expectativas. Por lo tanto, se ven diferentes en varios dispositivos. A veces, las fuentes también se ven ligeramente diferentes al cambiar de navegador. En tales casos, debe aplicar sombra a las fuentes. Con el siguiente código CSS, puede implementar sombras en las fuentes:
h1 { /* Tu selector */
familia de fuentes: "Algunas fuentes personalizadas", serif;
text-shadow:0 0 1px transparente;
/* O, si necesita aplicar una sombra fuerte de 0px,
* puedes usar varias sombras de texto */
sombra de texto: 0 0 0 #f00, 0 0 1px transparente;
}
Conclusión:
La lectura es una actividad llena de complejidades, y se complica aún más cuando el lector tiene dificultades para leer. Cuando apunta al desarrollo de un sitio web, debe cuidar a los lectores habituales, incluidos los lectores con discapacidades. Por lo tanto, este blog analiza los problemas subyacentes para manejar el uso de CSS mientras se tiene en cuenta la legibilidad del sitio web.