Programaclic

8. CSS: el tamaño de la letra (propiedad 'font-size')

Ratón de ordenador

Hasta el momento los cambios efectuados han afectado al color. Pero también se pueden modificar otras propiedades, como el tamaño de la letra. Esto es muy útil para aquellas personas que tienen problemas de visión o para evitar dejarnos los ojos cuando la letra es demasiado pequeña o cuando llevamos muchas horas leyendo.

El tamaño de la letra se define mediante la propiedad 'font-size', que encontrarás asociada a más de un elemento de HTML (body, h1, h2, p). Observa atentamente el siguiente extracto del código CSS de esta página:

body {

font-size: 100%;

font-family: trebuchet, sans-serif;

font-weight: normal;

}

Como ves, en este caso, la unidad de medida utilizada para esta propiedad ha sido el porcentaje (%), pero también encontrarás otras como el pixel (px), el em; o simplemente un nombre: large, small, medium,

¡Ahora te toca a tí!

Vamos a cambiar el tamaño de la letra, modificando en la siguiente regla de estilo el porcentaje dado. Puedes utilizar: 60%, 85%, 140% o 200%.

body {font-size: 100%;}

Después activa el botón 'Comprobar' para ver cómo queda la página. Puedes probar con todas las opciones, si lo deseas. Si no te funciona, fíjate bien en cómo has escrito la regla: con los nombres de los colores bien escritos, los espacios en blanco, etc.

Volver al juego