Llevar tu portafolio web al siguiente nivel implica aplicar fuentes personalizadas, jerarquías tipográficas y estilos que reflejen tu identidad. Aquí descubres cómo trasladar lo aprendido sobre tipografía en CSS a un proyecto real y prepararte para el siguiente paso: trabajar con colores y variables.
Por qué tu portafolio necesita una identidad tipográfica propia
Un portafolio sin estilo tipográfico se siente plano. Cuando empiezas a integrar fuentes de Google Fonts y a combinar familias distintas en secciones específicas, tu sitio gana personalidad y comunica mucho más sobre quién eres como desarrollador.
La idea aquí no es solo "poner una fuente bonita". Se trata de usar la tipografía como una herramienta de diseño: decorar segmentos puntuales con un look and feel distinto, marcar jerarquías visuales y guiar la lectura de quien visita tu portafolio.
¿Qué es Google Fonts? Es una librería gratuita de tipografías web que puedes importar a tu proyecto con una línea de código y usar directamente en tus reglas CSS.
Cómo aplicar lo aprendido al proyecto de portafolio
Tu tarea en este punto es tomar todo lo que viste sobre fuentes y llevarlo a tu propio portafolio. No es un ejercicio teórico: es el momento de ensuciarte las manos.
Estos son los movimientos concretos que conviene aplicar:
- Importar fuentes específicas desde Google Fonts según el estilo que buscas.
- Asignar diferentes familias tipográficas a secciones distintas del proyecto.
- Decorar segmentos puntuales (títulos, citas, botones) para diferenciarlos del resto.
- Ajustar tamaños, pesos y estilos para construir jerarquía visual.
- Documentar tu avance y compartirlo para recibir retroalimentación.
El objetivo es que tu portafolio empiece a verse como tuyo, no como una plantilla genérica. Cada decisión tipográfica cuenta una parte de tu marca personal.
Qué referencia puedes tomar del proyecto guía
En el proyecto de ejemplo ya se aplicaron varios de estos cambios: importación de fuentes desde Google, uso de tipografías diferentes según la sección y decoración específica de algunos bloques para darles un acento visual distinto. Esa es la dirección que tú también puedes seguir, adaptándola a tu estilo.
¿Cómo elegir fuentes para un portafolio? Combina máximo dos o tres familias: una para títulos, una para cuerpo de texto y, opcionalmente, una de acento para elementos decorativos. Mantén coherencia en todo el sitio.
Qué viene en el siguiente módulo de CSS
Después de trabajar tipografía, el siguiente paso natural es el color. En el próximo módulo vas a ver temas que amplían mucho lo que puedes lograr con estilos.
Estos son los conceptos que vienen:
- Variables en CSS: te permiten guardar estilos reutilizables (como un color o una fuente) en un solo lugar y evitar repetir código.
- Paletas de color: cómo definir y aplicar colores de forma consistente en todo el proyecto.
- Degradados: transiciones suaves entre colores para fondos, botones o elementos decorativos.
- Otros recursos visuales que puedes aplicar directamente desde CSS sin necesidad de imágenes externas.
Las variables CSS son especialmente útiles cuando tu proyecto crece. Si decides cambiar el color principal de tu portafolio, en lugar de buscar y reemplazar en decenas de líneas, modificas un solo valor y se actualiza en todo el sitio.
Ahora te toca a ti. Aplica las fuentes a tu portafolio, experimenta con combinaciones y comparte cómo va quedando en los comentarios.