Unidades de medida CSS

font-size es un estilo que nos indica el tamaño de la fuente. Esta clase la explicaremos más adelante, en el artículo de estilos de fuente. Ahora lo que vamos a ver son las diferentes unidades de medida en CSS que podemos encontrar.

Pixels en CSS: px

Las medidas se miden en pixels. Se escribe de la siguiente manera:

<p style="font-size:10px;">Texto de 10 pixels</p>

<p style="font-size:12px;">Texto de 12 pixels</p>

<p style="font-size:14px;">Texto de 14 pixels</p>

<p style="font-size:16px;">Texto de 16 pixels</p>

<p style="font-size:18px;">Texto de 18 pixels</p>

<p style="font-size:20px;">Texto de 20 pixels</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Inches o pulgadas en CSS: in

Las medidas se miden en pulgadas. Se escribe de la siguiente manera:

<p style="font-size:0.2in;">Texto de 0.2 pulgadas</p>

<p style="font-size:0.3in;">Texto de 0.3 pulgadas</p>

<p style="font-size:0.4in;">Texto de 0.4 pulgadas</p>

<p style="font-size:0.5in;">Texto de 0.5 pulgadas</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Milímetros en CSS: mm

Las medidas se miden en milímetros. Se escribe de la siguiente manera:

<p style="font-size:8mm;">Texto de 8 milímetros</p>

<p style="font-size:9mm;">Texto de 9 milímetros</p>

<p style="font-size:10mm;">Texto de 10 milímetros</p>

<p style="font-size:11mm;">Texto de 11 milímetros</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Centímetros en CSS: cm

Las medidas se miden en centímetros. Se escribe de la siguiente manera:

<p style="font-size:0.5cm;">Texto de 0.5 centímetros</p>

<p style="font-size:1cm;">Texto de 1 centímetros</p>

<p style="font-size:1.2cm;">Texto de 1.2 centímetros</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Picas en CSS: pc

Las medidas se miden en picas. Se escribe de la siguiente manera:

<p style="font-size:1pc;">Texto de 1 picas</p>

<p style="font-size:2pc;">Texto de 2 picas</p>

<p style="font-size:3pc;">Texto de 3 picas</p>

<p style="font-size:4pc;">Texto de 4 picas</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Puntos en CSS: pt

Las medidas se miden en puntos. Se escribe de la siguiente manera:

<p style="font-size:15pt;">Texto de 15 puntos</p>

<p style="font-size:20pt;">Texto de 20 puntos</p>

<p style="font-size:25pt;">Texto de 25 puntos</p>

<p style="font-size:30pt;">Texto de 30 puntos</p>

<p style="font-size:35pt;">Texto de 35 puntos</p>

Y aquí podemos ver el efecto de cada tamaño en el mismo texto:

Existen dos tipos más que son em y ex.