Utilizar porcentajes para tamaños de texto con CSS

  • Por
El tamaño del texto se puede cambiar por medio de CSS, para agrandarlo o disminuirlo, por medio de porcentajes, de modo que el nuevo tamaño sea relativo al tamaño actual.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Juan Fuentes

04/8/2006
Un posible uso de esta característica sería definir un tamaño de letra en pixels/puntos en el body, y luego en el resto usar porcentajes. Así, si queremos tener un tipo de letra más grande, nos basta con modificar el font-size del body, y el resto de elementos se adaptan "automáticamente" al cambio.

Saludos.

chadlers

27/4/2016
como dar estilo(font) automático a palabras especificas?
Tengo un blog y quisiera saber si hay alguna forma de darle un estilo automatico a palabras especificas cuando redacto entradas para mi blog, por ejemplo a la palabra industrial, un estilo automático de en negrita, texto color azul, y asi con muchas otras palabras que se repiten mucho en mis redacciones, escribir la font para cada palabra en cada entrada es mucho trabajo. Entonces busco algun codigo HTML que pueda usar para dar estilos automaticos a las palabras sin que yo tengo siempre que escribirlos manualmente.