Gestión de fuentes y tamaños de fuentes con Divi 5

Las fuentes y la tipografía establecen la pauta para su sitio. Hacerlo bien puede ayudar a su marca y mejorar la legibilidad. Divi 5 hace que trabajar con fuentes sea rápido y fácil. Con las nuevas características de Divi, como las variables de diseño y los preajustes del grupo de opciones, la configuración de fuentes se vuelve fácil.

Esta publicación le enseña cómo manejar las fuentes y los tamaños de fuentes en Divi 5, creando una tipografía receptiva que escala maravillosamente entre los dispositivos.

Divi 5 está listo para nuevas compilaciones de sitios web, pero estamos dando los toques finales en el sistema de compatibilidad hacia atrás. Mientras tanto, retrase los sitios de actualización construidos en D4. Te avisaremos cuando ocurra ese cambio.

Consideraciones Al pensar en las fuentes para un nuevo sitio web

Al comenzar un nuevo sitio, las opciones de fuentes dan forma a la primera impresión del usuario. Considere estos puntos para garantizar que su tipografía respalde su contenido:

• Leyabilidad : elija fuentes claras, especialmente para el texto del cuerpo.
• Consistencia : limite sus fuentes: dos o tres funcionan mejor, con al menos uno para encabezados y uno para texto del cuerpo.
• Capacidad de respuesta : Asegúrese de que las fuentes se adapten a diferentes tamaños de pantalla (idealmente de 320px a 1440px).
• Compatibilidad : opte por fuentes seguras o populares para evitar problemas de visualización.

Cómo manejar fuentes y tamaños de fuentes en Divi 5

Usemos un diseño prefabricado de la biblioteca de Divi. Elegiremos el diseño de la página de destino del paquete "Business CV" y renovaremos la tipografía utilizando las nuevas características de Divi 5. Si tiene un sitio Divi 5 existente pero desea mejorar su tipografía, puede seguir estos mismos pasos sin usar este diseño.

Paso 1: Elegir emparejamientos de fuentes

Buenos emparejamientos de fuentes combinan estilo y legibilidad. Google Fonts también es una apuesta segura ya que están integradas en Divi y fáciles de usar.

En los ejemplos a continuación, nos quedaremos con el uso de Poppins del paquete de diseño para los encabezados y el texto del cuerpo. Puedes intentar emparejar a Lora y Roboto también.

Paso 2: Fuentes de configuración para el encabezado y el cuerpo primarios

Ahora que ha elegido fuentes, podemos agregarlas al sitio web usando Divi. En el editor visual, abra el Administrador de variables en la parte superior izquierda. Las variables de diseño de Divi le permiten controlar globalmente las fuentes en su sitio web.

Hay dos variables de fuente predeterminadas para su encabezado principal y fuentes corporales. Vaya a la sección de fuentes y configure " Poppins " como la fuente de encabezado y " Roboto " como la fuente del cuerpo.

Establezca sus fuentes en cualquiera que coincida con sus requisitos de diseño y marca

En este punto, también puede ser una buena idea asegurarse de que los colores de su marca estén establecidos como variables de diseño, especialmente si planea usar algunos de esos colores en el texto.

Asegúrese de guardar sus variables cuando termine de ingresarlas

Paso 3: Creación de tamaños de fuentes

Ahora para la parte más involucrada. Es mejor pensar en cómo hacer que su tipografía se vea bien en cada tamaño de dispositivo. Con Divi 5, tienes dos opciones. La primera opción y preferida es usar Clamp (), y la segunda es establecer la fuente varias veces en varios puntos de interrupción.

La forma en que construye el dimensionamiento de su fuente para cada nivel de encabezado, texto del cuerpo y otras situaciones de texto depende completamente de usted.

Fluid Typogrphy con Clamp ()

Clamp () le permite establecer un valor mínimo, un valor preferido y un valor máximo. En otra publicación, nos profundizamos sobre Clamp () y proporcionamos una manera fácil de descubrir esos valores. Pero aquí hay un ejemplo:

Este diseño tiene un tamaño H1 predeterminado y un tamaño H1 único (y más grande) para el nombre de la persona en la primera sección. Llevamos ese mismo principio en la tabla de dimensionamiento anterior y agregamos una variación de fuente de carrocería más pequeña.

Puede probar el dimensionamiento de su fuente en un documento HTML simple para ver las cosas de forma aislada (esto también se puede hacer dentro de Divi). Así es como se ve el tamaño de fuente anterior con el emparejamiento de fuentes.

Una vez que se sienta cómodo con sus tamaños de fuente, puede agregarlos como variables de diseño. Dé a cada uno un nombre discernible y pegue el valor a la derecha.

Unidades fijas con puntos de interrupción

Clamp () es la opción más versátil para el tamaño de la fuente, pero muchos usuarios aún usan valores fijos como píxeles o REM. Puede usarlos junto con los puntos de ruptura personalizables de Divi para escalar su fuente hacia arriba y hacia abajo según sea necesario.

Dado que su número de valores para un efecto similar se triplica cuando lo usa de esta manera (en lugar de 10 valores de Clamp () anteriores, estos serían 30 valores individuales). No se recomienda necesariamente completar el administrador de variables con estos valores, pero puede si lo desea,

Puede construir su estructura de tamaño para cada punto de interrupción y llevarlo al siguiente paso. En lugar de colocarlas como variables de diseño, puede aplicarlas directamente al grupo de opciones y presets de elementos.

Paso 5: Agregar tamaños de fuente del administrador de variables a preestablecidos

Con el conjunto de variables numéricas (o al menos formuladas), es hora de aplicarlas a los presets. Uno de los mejores casos de uso para los ajustes preestablecidos del grupo de opciones es la tipografía. Puede crear siete (7) preajustes del grupo de opciones de título/título que puede usar para cualquier módulo que use el campo de encabezado/título (como el encabezado, la propaganda, el acordeón y los módulos de la persona, por ejemplo).

Lo mismo es cierto para el grupo de opciones de texto. Puedo establecer dos (2) presets (uno para mi normal y otro para mi texto de mi cuerpo pequeño), y cualquier módulo que use el grupo de opciones de texto puede usar esos estilos. Para el encabezado y los estilos de texto, esto es mucho más eficiente que aplicar esos estilos como elementos preestablecidos a todos los diversos módulos que puede usar en todo su sitio web.

Asignación de valores fijos a los puntos de interrupción

El siguiente video muestra los pasos básicos si optó por los valores fijos en múltiples puntos de interrupción. Haga clic en un módulo de texto, vaya a la pestaña de diseño , pasee el grupo de opciones de texto, haga clic en el icono OG , cree un nuevo preajuste y aplique sus estilos en cada punto de interrupción. Desplácese hasta la parte inferior de la barra lateral derecha y guarde su preajuste ( muy importante ). Repita esto para tantas variaciones de texto como se le ocurrió (como opciones pequeñas, regulares y grandes).

Asigne el preajuste OG que espera usar más como su preajuste predeterminado para ese grupo de opciones. Si ve una estrella al lado, esa es su valor predeterminado actual (esto se aplicará en su sitio, suponiendo que no se aplican otros estilos de módulo o preajustes de elementos en todas partes).

Asignación de funciones Clamp () (más fácil)

El proceso es similar cuando se usa la variable de diseño con la función Clamp (), pero mucho más fácil. En el video de ejemplo a continuación, hemos establecido dos tamaños de encabezado en el nivel de grupo de opciones. La única diferencia de lo anterior es que no estamos pegando los valores, sino utilizando las variables que configuramos anteriormente. Al configurar sus preajustes OG, asegúrese de que se elijan las fuentes predeterminadas y establezca los colores como desee. A algunas personas les gusta establecer colores en el nivel del módulo, pero depende de usted.

Establecerá cada nivel de encabezado H1-H6 como un nuevo grupo de opciones personalizadas preestablecida .

Aplique estos preajustes en los encabezados de su diseño utilizando el grupo de opciones presets que creó. La belleza de los preajustes del grupo de opciones es que funcionan a través de módulos dentro de ese grupo de opciones, como el texto, la propaganda y los módulos de encabezado.

Las mejores prácticas para las fuentes en Divi 5

Para maximizar su tipografía, tenga en cuenta estos consejos:

• Siempre establezca las variables de fuentes globales temprano.
• Use un espacio y tamaños consistentes (sí, también puede establecer el espacio de letras y la altura de la línea como variables de diseño).
• Vista previa regularmente Vistas receptivas a través de tamaños de pantalla.
• Evite demasiadas fuentes o pesos de fuentes.

La tipografía en Divi 5 es un soplo de aire fresco

Ahora posee un sistema de tipografía completo gracias a las características más nuevas de Divi.

Las fuentes viven como variables de diseño. Lo mismo con los tamaños de fuentes cuando usa Clamp (). O si desea ejercer los siete puntos de descanso personalizables, también puede tomar esa ruta.

Los preajustes del grupo de opciones aplican esas opciones sin esfuerzo en todo su sitio. Ajustar los tamaños de fuente en una construcción es extra fácil ya que se establecen como variables de diseño. Pase lo que pase, sus diseños se mantendrán agudos y su tiempo de construcción se reducirá.

Divi 5 ha lanzado muchas características nuevas que actualizan su sistema de diseño. Comience a construir nuevos sitios en Divi 5 hoy para aprovechar todas las últimas características. Recomendamos esperar un poco más para migrar sitios web existentes a Divi 5.