Cargando...

Fuentes en CSS

Ya sabes cómo se asienta el texto en la línea. Las fuentes eligen qué letras ves — la familia tipográfica, el tamaño, el grosor y si van en cursiva. Cargar fuentes web personalizadas es la siguiente lección; aquí dominas las propiedades básicas de fuente.

Herramientas tipográficas de un vistazo

📊 Propiedades de fuente comunes

Propiedad Trabajo cotidiano
font-family Nombra la pila tipográfica (más un fallback genérico)
font-size Define lo grande que es el texto
font-weight Define lo grueso que es (p. ej. 400, 700, bold)
font-style Define normal o italic (y estilos relacionados)
font (atajo) Combina estilo, peso, tamaño y familia en una declaración

Pilas font-family

Lista primero las fuentes preferidas, luego alternativas más seguras, y termina con una familia genérica como sans-serif o serif para que siempre se dibuje algo.

Pila sans-serif legible

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Tamaño de fuente

font-size define el tamaño del texto. Unidades relativas como rem suelen escalar con más calma; px y palabras clave como large también sirven.

Tamaños de título y cuerpo

css
CSS Code 
h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

Peso tipográfico

font-weight controla la negrita. Pesos numéricos (400, 700) o palabras clave (normal, bold) son habituales. La tipografía debe soportar el peso que pides.

Énfasis con peso

css
CSS Code 
.lead {
font-weight: 700;
}

.caption {
font-weight: 400;
}

Estilo tipográfico — italic

font-style: italic inclina el texto cuando hay una variante cursiva. Úsalo en citas o énfasis suave, no en cada párrafo.

Cita en cursiva

css
CSS Code 
blockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}

Atajo font

El atajo font puede fijar estilo, peso, tamaño y familia juntos. Tamaño y familia son obligatorios en la forma que esperan la mayoría de navegadores.

Atajo font en un título de tarjeta

css
CSS Code 
.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}

Un hábito calmado para el cuerpo

Elige una pila clara para la página, un peso o tamaño un poco más fuerte para títulos, y mantén el cuerpo fácil de leer.

Línea base tipográfica de la página

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}

h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}

Pruébalo tú

  1. Pon body con una pila sans-serif que termine en sans-serif.
  2. Dale a h1 un font-size mayor y font-weight: 700.
  3. Estila un blockquote con font-style: italic y pila serif.
  4. Reescribe un título con el atajo font.
  5. Compara el mismo párrafo en serif vs sans-serif — nota el cambio de tono.

Errores comunes

  • Nombrar una tipografía fancy sin fallback (se rompe si falta esa cara)
  • Poner px enormes fijos en todas partes sin pensar en relativo
  • Pedir font-weight: 900 cuando la tipografía solo trae regular y bold
  • Saltar aquí a @font-face / fuentes web alojadas (siguiente lección)
  • Usar text-align o text-decoration cuando querías font-family o font-weight

Resumen

  • font-family lista una pila y debe terminar en una familia genérica
  • font-size define el tamaño; las unidades relativas suelen escalar con calma
  • font-weight y font-style dan énfasis negrita y cursiva
  • El atajo font empaqueta estilo, peso, tamaño y familia
  • Mantén una pila de cuerpo clara; la carga de fuentes web personalizadas es la siguiente lección

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 27 de 35
Css Tutorial