Fundamentos Web

Guía de estudio para desarrolladores

A) ¿Qué es la tipografía web?

Esquema de tipografía

La tipografía web es el arte de organizar y presentar el texto en interfaces digitales para maximizar la comunicación. A diferencia del diseño impreso, en la web el texto es fluido y depende del dispositivo del usuario. Un concepto clave es la legibilidad, que es la facilidad con la que se pueden distinguir los caracteres. Para este proyecto, hemos usado dos familias: Sans Serif (Montserrat) para los títulos, que aporta modernidad y limpieza en pantallas, y Serif (Merriweather) para el contenido, cuyos remates ayudan a guiar el ojo en lecturas largas.


La jerarquía visual es fundamental para guiar al lector. Se logra mediante el contraste de tamaños (títulos grandes vs texto pequeño), peso (negritas) y color. En esta página, el título H1 es el elemento más dominante, seguido por los H2 y finalmente el texto base, creando un orden de lectura claro e intuitivo.

B) ¿Qué es el diseño web adaptable?

Esquema responsive

El diseño web adaptable (Responsive Web Design) es una técnica que busca que el contenido de una web se vea bien en cualquier dispositivo, evitando que el usuario tenga que hacer zoom o scroll horizontal. Esto se logra mediante una estructura flexible y el uso de CSS, específicamente las media queries. Estas son reglas condicionales (como @media (max-width: 768px)) que detectan el ancho de la pantalla y aplican estilos diferentes, como hemos hecho aquí cambiando el menú de horizontal a vertical en móviles.


Una estrategia esencial es el Mobile First, que consiste en diseñar primero para la pantalla más pequeña (el celular) y luego añadir complejidad para pantallas más grandes. Esto prioriza el contenido esencial y mejora la velocidad de carga, garantizando una experiencia óptima para la mayoría de los usuarios actuales que navegan desde smartphones.

C) Conclusión personal

En este proyecto aprendí a conectar la estructura (HTML) con el estilo (CSS) de manera eficiente. Comprendí que la elección tipográfica no es solo estética, sino funcional, afectando directamente a si el usuario lee o abandona la página. También entendí la lógica detrás de los puntos de quiebre en las media queries.


Es vital para un programador dominar estos temas porque la web es universalmente accesible. Crear sitios que no se adaptan a móviles o que son difíciles de leer es excluir usuarios. Un buen desarrollador debe garantizar accesibilidad y usabilidad técnica más allá de que el código simplemente "funcione".