No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Características e Implementación de textos

14/23
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Fallback Font: Una fuente alternativa es un tipo de letra de reserva que contiene símbolos para tantos caracteres Unicode como sea posible.

https://meowni.ca/font-style-matcher

El concepto de Fabllback es totalmente nuevo para mí. Muchas gracias por compartirlo.

  • Los sitios web deben ser muy flexibles con los tamaños de fuente, por tanto, no uses medidas absolutas (píxeles), sino usa medidas relativas (REM).
    1 REM = 16px Este es el tamaño estándar para la tipografía en los navegadores web.
    .
  • Prefiere múltiplos de 8 (números pares) para los tamaños de fuente. Aunque el usuario siempre puede cambiar los tamaños a voluntad, si es que no ve bien, por ejemplo, de aquí que utillizar medidas absolutas (px) en tipografías, es una mala decisión de diseño, ya que no favorecerá la accesibilidad y la experiencia de usuario se verá muy afectada.
    .
  • No diseñes poniendo textos lorem ipsum, más bien coloca los textos reales, para que tus diseños no se rompan a la hora de implementar los contenidos reales.
Se puede cambiar el valor de 1 REM a 10px cada uno, simplemente se multiplica el valor actual de REM por 10. El REM (root em) es una unidad de medida relativa en CSS, basada en el tamaño de fuente del elemento `html` o `:root`. Entonces, si actualmente 1 REM es equivalente a 16 px (que es un valor común), al multiplicar por 10 obtienes 160 px. ```css :root { font-size: 10px; /\* Cambiar el tamaño de fuente base a 10px \*/ } /\* Ejemplo de uso \*/ body { font-size: 1rem; /\* Esto será equivalente a 10px \*/ } ``` Asegúrate de ajustar el valor del tamaño de fuente base (`font-size`) en el selector `:root` o `html` según tu preferencia. El cambio afectará a todas las unidades REM en tu hoja de estilo.

Características e Implementación de textos

Objetivos

  • La importancia de ponernos en los casos de carga.
  • Comprender las tipografías por defecto en el Front-End.
  • Evitar los saltos.

Propiedades

  • Tipografía
  • Medidas
  • Contenido

Fallback Font: Una fuente alternativa es un tipo de letra de reserva que contiene símbolos para tantos caracteres Unicode como sea posible. Esta sirve para que se muestre mientras la fuente final se está descargando.
Hay que tener en cuenta que tanto la fuente de respaldo como la final deben de seguir un mismo estilo, ya sea serif o sans-serif, para evitar sobresaltos a los usuarios.

Para cuidar el performance hay que tener en cuenta algunos aspectos, como:

  • No usar más de tres pesos por fuente (medium, italic, bold), ya que cada uno hace una petición, también recuerda no usar más de dos fuentes.
  • Evitar usar librerías de iconos como Font Awesome, porque crean bastante consumo, es mejor optar por el uso de SVG.

Medidas

Se pueden usar medidas absolutas (px) o relativas (rem), pero se prefieren las medidas relativas, esto porque el usuario puede cambiar el tamaño de fuente de su navegador/dispositivo, las medidas relativas se adaptaran a este cambio, caso contrario con las medidas absolutas.