La tipografia responsive és un aspecte crucial del disseny web modern, ja que garanteix que el text sigui llegible i atractiu en qualsevol dispositiu, des de telèfons mòbils fins a pantalles d'escriptori grans. En aquesta secció, explorarem com implementar tipografia que s'adapti de manera fluida a diferents mides de pantalla.

1. Unitats Relatives vs Absolutes:

   • Unitats Absolutes: Inclouen píxels (px), que són fixos i no canvien amb la mida de la pantalla.
   • Unitats Relatives: Inclouen em, rem, %, vw, i vh, que s'ajusten segons el context o la mida de la pantalla.

2. Escalabilitat de la Tipografia:

   • Utilitzar unitats relatives com em i rem per assegurar que la mida del text s'ajusti proporcionalment a la mida de la pantalla o a la mida de font base.

3. Media Queries per a Tipografia:

   • Utilitzar media queries per canviar la mida de la font en funció de l'amplada de la pantalla.

Objectiu: Crear un estil CSS que faci que la tipografia d'un lloc web sigui responsive utilitzant unitats relatives i media queries.

Instruccions:

1. Defineix una mida de font base en html.
2. Utilitza rem per establir la mida de font dels elements h1, h2, i p.
3. Implementa media queries per ajustar la mida de font en pantalles de 768px i 1024px.

Solució:

• No utilitzar unitats relatives: Evita utilitzar píxels per a la mida de font, ja que no s'adapten bé a diferents dispositius.
• Oblidar-se de les media queries: Assegura't d'incloure media queries per ajustar la tipografia en diferents mides de pantalla.
• No provar en diferents dispositius: Sempre prova el teu disseny en diversos dispositius per assegurar-te que la tipografia es veu bé a tot arreu.

La tipografia responsive és essencial per a un bon disseny web, ja que millora la llegibilitat i l'experiència de l'usuari. Utilitzant unitats relatives i media queries, pots assegurar-te que el teu text es vegi bé en qualsevol dispositiu. En el següent mòdul, explorarem patrons de disseny responsive comuns que t'ajudaran a crear dissenys més efectius.