Utilizar porcentajes para tamaños de texto con CSS

El porcentaje es otra de las medidas o unidades que podemos utilizar en los atributos de hojas de estilo en cascada (CSS) para definir un tamaño. En este artículo veremos ejemplos acerca de modificar los tamaños de los textos por medio de porcentajes, para conseguir nuevos tamaños que sean relativos a los que se están utilizando.

Por ejemplo, podríamos definir un estilo para escribir con un texto el doble de grande del que se esté trabajando:

<span style=”font-size:200%”>Este texto es el doble de grande</span>

Esto quiere decir que el texto será el doble de grande, 2 por las unidades de texto que estemos trabajando. Por ejemplo, si estamos trabajando con tamaños de texto de 10pt, el texto dentro del anterior span sería 20pt. El del siguiente código ejemplifica este caso concreto:

<span style="font-size:10pt;">Hola amigos <span style="font-size:200%">Este texto es el doble de grande</span> </span>

Lo mismo se puede hacer, pero para definir un texto menor, asignando porcentajes por debajo del 100%. Por ejemplo, si quisiéramos hacer un texto de la mitad del tamaño utilizaríamos la siguiente etiqueta:

<span style="font-size:50%">Este texto es la mitad del anterior<,/span>

Si estuviéramos trabajando con un tamaño de texto de 16pt, con la anterior etiqueta se escribiría con tamaño 8pt. El código sería el siguiente:

<span style="font-size:16pt;">Hola amigos
<span style="font-size:50%">Este texto es la mitad del anterior</span>
</span>

Ahora vamos a definir un par de clases para un texto mayor y menor, que podríamos utilizar para aumentar y reducir el texto respectivamente.

<style type="text/css">
   .mayor {font-size:150%}
   .menor {font-size:75%}
</style>

Este código indica que la clase mayor es un texto el 150%, es decir, la mitad más que el anterior, y la clase menor un texto del 75%, es decir tres cuartas partes del anterior. Podríamos utilizar estas clases con un código como este:

Este es un texto normal <span class="mayor">y este es mayor</span>, este vuelve a ser normal <span class="menor">y este es menor</span>

Los distintos ejemplos de este artículo podemos verlos en una página aparte.