Cómo crear tipografía receptiva con CSS

Desarrollar un sitio web con tantos puntos de interrupción puede ser agotador. Hay muchas técnicas nuevas para aprender en CSS, ya sea un desarrollador experimentado o un desarrollador de nivel medio.

Pero, ¿cómo empezar con la tipografía receptiva? Aquí le mostramos cómo tomar medidas para adaptar las páginas web a cualquier tamaño de pantalla.

Importancia de la tipografía receptiva

La tipografía juega un papel vital en el desarrollo y diseño web al garantizar la legibilidad, la usabilidad y la estética general de un sitio web. Todo el mundo quiere un sitio web receptivo. ¿No sería genial si el texto o las fuentes se ajustaran automáticamente a diferentes tamaños de pantalla? Otras ventajas de la tipografía receptiva en el desarrollo web incluyen las siguientes;

• Mejora la experiencia general del usuario en varios dispositivos o tamaños de pantalla al garantizar la legibilidad y legibilidad.
instagram viewer
• Aumenta la accesibilidad al acomodar a los usuarios con deficiencias visuales u otras discapacidades. Se adapta a varias preferencias de usuario, como tamaños de fuente ajustables.
• La tipografía uniforme en todos los dispositivos y resoluciones ayuda a preservar la identidad de la marca y la unidad visual.

Aquí hay una plantilla de código que puede copiar a su editor de código antes de comenzar, para que pueda seguir las técnicas que se discutirán.

El archivo de código HTML

índice.html
html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8">
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0">
<enlacereal="hoja de estilo"href="estilo.css">
<título> Tipografía receptiva título>
cabeza>
<cuerpo>
<divisiónclase="envase">
<h1> lorem ipsum h1>
<pag> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta oficia quod eaque perspiciatis! 
pag>
división>
cuerpo>
html>

El archivo de código CSS

/*style.css*/
cuerpo{
mostrar: doblar;
justificar-contenido: centro;
alinear elementos: centro;
altura: 100vh;
}
.envase{
ancho: 400píxeles;
color de fondo: blanco antiguo;
relleno: 15píxeles;
sombra de la caja:0 2píxeles 5píxelesrgb(0,0,0, 0.1) ;
}
h1{
color: Rosa caliente;
}

Ahora, exploremos algunos métodos y técnicas efectivos para implementar tipografía receptiva usando CSS

1. Reprimición

Esta es una técnica de tipografía CSS moderna que permite y asegura que el tamaño de fuente de un elemento se mantenga dentro de un cierto rango. La función de abrazadera “Clamp()” toma tres parámetros, el valor mínimo, el valor ideal y el valor máximo. La función de abrazadera no se limita a la tipografía. Se puede usar para imágenes, tarjetas, videos y otros medios. Así es como funciona.

Abrazadera (valor mínimo, valor ideal, valor máximo):

h1{
tamaño de fuente: abrazadera(2movimiento rápido del ojo, 5volvo, 3movimiento rápido del ojo);
}
pag{
tamaño de fuente: abrazadera(1movimiento rápido del ojo, 3volvo, 2movimiento rápido del ojo);
}

En este ejemplo, los tamaños de fuente para el encabezado y el párrafo se establecen mediante la función "clamp()". Para el encabezado "h1", el valor mínimo se establece en "2rem", lo que garantiza que el tamaño de fuente no sea inferior al doble del tamaño de fuente raíz. El valor ideal o preferido se establece en "5vw", que es el 5 % del ancho de la ventana gráfica, lo que hace que responda a diferentes tamaños de pantalla. El valor máximo se establece en "3 rem", lo que garantiza que el tamaño de la fuente no sea más grande que tres veces el tamaño de la fuente raíz. Viceversa para el estilo de párrafo.

Es una buena práctica usar el ancho de la ventana gráfica "vw" o el porcentaje "%" para el valor ideal, ya que permite que la propiedad se escale proporcionalmente según el espacio disponible, lo que hace que el diseño sea más receptivo. Asegúrate de saber qué unidad CSS deberías usar para tu escenario.

Esta es la técnica de tipografía más común utilizada por los desarrolladores. Implica crear consultas de medios para cada punto de interrupción. Le permite aplicar estilos específicos basados ​​en diferentes tamaños de pantalla. Aquí hay una ilustración:

/* Tamaño de fuente predeterminado */
h1{
tamaño de fuente: 38píxeles;
}
pag{
tamaño de fuente: 20píxeles;
}
/* Tamaño de fuente para pantallas pequeñas */
@medios de comunicación (anchura máxima:800px){
h1{
tamaño de fuente: 32píxeles;
}
pag{
tamaño de fuente: 18píxeles;
}
}
/* Tamaño de fuente para pantallas más pequeñas */
@medios de comunicación (anchura máxima:400px){
h1{
tamaño de fuente: 28píxeles;
}
pag{
tamaño de fuente: 15píxeles;
}
}

En este ejemplo, el encabezado y el párrafo se establecen en un valor predeterminado de "38px" a "20px" respectivamente. Luego, se establecen las condiciones para tamaños de pantalla más pequeños para que el diseño responda en los teléfonos móviles. Puede crear tantas consultas de medios como desee en función del diseño y la capacidad de respuesta que desee, entre muchas otras Trucos de CSS de consulta de medios que debe conocer.

3. Propiedades personalizadas de CSS

También conocidas como variables personalizadas de CSS, almacenan valores que se pueden reutilizar a lo largo de su diseño. Se puede utilizar para la tipografía para permitir una fácil gestión y personalización. Aquí hay un ejemplo.

:raíz {
--título-tamaño-de-fuente: 3movimiento rápido del ojo;
--párrafo-fuente-tamaño: 1.5rem;
}
h1{
tamaño de fuente: variable(--título-tamaño-de-fuente);
}
pag{
tamaño de fuente: variable(--párrafo-fuente-tamaño);
}
@medios de comunicación (anchura máxima:800px){
:raíz {
--título-tamaño-de-fuente: 2movimiento rápido del ojo;
--párrafo-fuente-tamaño: 0.9 rem;
}
}
@medios de comunicación (anchura máxima:400px){
:raíz {
--título-tamaño-de-fuente: 1.5rem;
--párrafo-fuente-tamaño: 0.8rem;
}
}

En este ejemplo, la propiedad CSS se establece en el nivel raíz, lo que nos permite acceder a ella globalmente. --heading-font-size y --paragraph-font-size son nombres descriptivos para el encabezado y el párrafo, respectivamente, con valores predeterminados para ambos. Esta técnica se puede reutilizar para varias consultas de medios para garantizar la coherencia en todos los ámbitos.

Prácticas recomendadas de tipografía receptiva

Es una práctica común entre los desarrolladores usar el ancho de la ventana gráfica (vw) directamente para realizar la tipografía. Aunque es simple y parece funcionar, se vuelve pequeño en pantallas pequeñas y extremadamente grande en pantallas grandes. Esto también ocurre cuando acercas y alejas tu página. Si puede, evite usar la ventana gráfica directamente de esta manera;

h1{
tamaño de fuente: 2vh;
 }

Siempre pruebe y asegúrese de que su tipografía sea legible en varios tamaños de pantalla y siempre pruebe la compatibilidad del navegador. Considere la legibilidad y asegúrese de que los tamaños de fuente no sean demasiado pequeños o demasiado grandes.

Tipografía receptiva: la clave para un diseño web legible

La tipografía receptiva juega un papel fundamental en el diseño y desarrollo web. Al implementar los métodos y técnicas, como la sujeción, las consultas de medios y las propiedades personalizadas de CSS, puede asegurarse de que su tipografía se escale en varios dispositivos y tamaños de pantalla. Hay tantas técnicas para explorar cuando se trata de crear capacidad de respuesta utilizando CSS: utilice estas técnicas para comenzar a desarrollar experiencia en esta área.