Ir al contenido

Tipografía, fuentes de Google, encabezados adaptables

Vídeo en inglés

(dispone de subtítulos en español generados automáticamente)

Seleccionar familia de fuentes

Puedes elegir entre las llamadas fuentes seguras para web, que están en todos los navegadores, y las fuentes de Google. Las fuentes de Google se cargan automáticamente, por lo que todas las nuevas deberían estar siempre disponibles. Después de seleccionar la fuente, también puedes elegir el grosor de la fuente. Estos grosores también se cargan automáticamente. Si no ves todos los grosores, prueba a seleccionar otra fuente y luego vuelve a la que te gustaba.

Si quieres utilizar una fuente de un archivo o añadir una segunda fuente de Google, consulta mi artículo: Cómo añadir una fuente personalizada.

Estilo de fuente principal

Puede elegir entre estilo normal y cursiva.

Colores y decoración de enlaces

Puedes elegir el color de la fuente, el color de los enlaces y el color al pasar el cursor por encima. También puedes elegir si los enlaces aparecen subrayados, tachados o sin ningún tipo de decoración.

Altura de línea y espacio entre letras

Elige la altura de línea y el espacio entre letras. Básicamente, el espacio entre las letras en los ejes vertical y horizontal.

Tamaños de los encabezados

Minimalio utiliza un enfoque moderno en lo que respecta a la tipografía y los tamaños de los encabezados. Así, los encabezados tienen un tamaño determinado en los ordenadores de sobremesa, se van reduciendo progresivamente en pantallas más pequeñas y se detienen en un punto para que se vean bien en los dispositivos móviles. La escala de los encabezados define los tamaños en los ordenadores de sobremesa: cuanto mayor sea la escala, mayores serán las diferencias entre los encabezados.

Transcripción del vídeo

¡Hola! Hoy me gustaría hablar sobre tipografía. La mayor parte es bastante sencilla, pero algunos aspectos pueden resultar un poco confusos, así que te guiaré para que lo entiendas.

En las opciones de Minimalio, en «Tipografía», puedes controlar la mayoría de los ajustes tipográficos que necesitarás. En primer lugar, puedes elegir la fuente. Minimalio carga automáticamente todas las fuentes de Google, incluidas las nuevas incorporaciones. También tienes la opción de seleccionar diferentes grosores de fuente, que se obtienen automáticamente de Google Fonts. En la parte superior de la lista encontrarás las fuentes estándar aptas para web y, a continuación, podrás desplazarte por una amplia lista de fuentes de Google. Por ejemplo, si eliges «Roboto», aparecerán todos los grosores disponibles para esa fuente. Puedes seleccionar un grosor clásico, como 400 (normal), y se actualizará automáticamente en la vista previa. Sin embargo, no todos los cambios se mostrarán inmediatamente en la vista previa, por lo que es posible que tengas que publicar y comprobar el sitio web en vivo.

También puedes alternar entre los estilos normal y cursiva para todo el texto. El color de la fuente principal es bastante intuitivo. Para el estilo de los enlaces, puedes configurar la decoración de los enlaces. Recomiendo mantenerlo subrayado, ya que es el estándar y ayuda a la accesibilidad, especialmente para las personas con daltonismo que pueden no ver las diferencias de color con claridad. Otras opciones son «tachado» o sin decoración, pero es posible que no sean tan fáciles de usar. Los ajustes de color del enlace y color del enlace al pasar el cursor permiten definir el aspecto de los enlaces en su estado predeterminado y cuando el usuario pasa el cursor por encima de ellos. El color del enlace al pasar el cursor crea una efecto visual agradable.

La altura de línea controla el espacio entre las líneas de texto. Un buen rango es entre 1,3 y 1,8, siendo 1,5 un estándar sólido. El espacio entre letras afecta al espaciado entre las letras individuales, lo que puede ayudar a la legibilidad o crear un estilo de diseño específico.

La escala de tamaño de los encabezados es un poco más avanzada. Esta configuración define los tamaños de los encabezados mediante una escala, lo que resulta útil para el diseño adaptable. Por ejemplo, si eliges una escala de 1,414, los tamaños de los encabezados se ajustarán proporcionalmente en los diferentes dispositivos. En los ordenadores de sobremesa, los encabezados serán mucho más grandes, mientras que en los dispositivos móviles, el escalado se detendrá en un punto determinado para mantener la legibilidad.

¡Y eso es todo! Estas opciones tipográficas ofrecen mucha flexibilidad para crear un diseño pulido y accesible. ¡Gracias por vernos!