Fallback Font: Una fuente alternativa es un tipo de letra de reserva que contiene símbolos para tantos caracteres Unicode como sea posible.
Introducción
¿Qué vas a aprender?
Conceptos Generales
Introducción al desarrollo de software
Servidor y cliente
Front-End y Back-End: definición y características
¿Qué es una API?
¿Qué es Git?
Aproximación a los lenguajes de la web
Aproximación a HTML desde el diseño
Aproximación a CSS desde el diseño
Aproximación a JavaScript desde el diseño Parte I
Aproximación a JavaScript desde el diseño Parte II
Aproximación a las herramientas de desarrollo
Bases del diseño en el desarrollo
Características de las imágenes en el contexto de desarrollo web
Implementación de las imágenes en el contexto de desarrollo web
Características e Implementación de textos
Características e implementación de colores
El diseño desde una mirada de desarrollo
Diseño de botones
Implementación de botones
Diseño e implementación de inputs
Diseño de tablas
Funciones de tablas
Diseño e implementación de checkbox
Despedida
Live Class
Live Class
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
21 Hrs
8 Min
47 Seg
Características e Implementación de textos
14/23Recursos
Aportes 5
Preguntas 1
Ordenar por:
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.
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.
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?