Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding, border etc. lo hemos hecho a través de pixeles o porcentaje. Esto debido a que la forma más sencilla de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en una computadora, es el tamaño de un pixel del monitor.
Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más indicadas para algunas situaciones que otras.
Disponemos de las siguientes unidades de medida:
px (pixeles) em (altura de la fuente por defecto) ex (altura de la letra x minúscula) in (pulgadas) cm (centímetros) mm (milímetros) pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) pc (picas, 1 pc es lo mismo que 12 puntos) % (porcentaje)
Un ejemplo que muestra una serie de párrafos asignando la propiedad font-size con distintos valores y unidades de medida:
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pixel1">Este texto tiene 12 px<p> <p class="pixel2">Este texto tiene 15 px</p> <p class="em1">Este texto tiene 1 em</p> <p class="em2">Este texto tiene 1.5 em</p> <p class="ex1">Este texto tiene 1 ex</p> <p class="ex2">Este texto tiene 1.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1.5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1.5 cm</p> <p class="mm1">Este texto tiene 10 mm</p> <p class="mm2">Este texto tiene 15 mm</p> <p class="pt1">Este texto tiene 10 pt</p> <p class="pt2">Este texto tiene 15 pt</p> <p class="pc1">Este texto tiene 1 pc</p> <p class="pc2">Este texto tiene 1.5 pc</p> <p class="porcentaje1">Este texto tiene 150%</p> <p class="porcentaje2">Este texto tiene 200%</p> </body> </html>
La hoja de estilo correspondiente es:
.pixel1 {
font-size:12px;
}
.pixel2 {
font-size:15px;
}
.em1{
font-size:1em;
}
.em2{
font-size:1.5em;
}
.ex1{
font-size:1ex;
}
.ex2{
font-size:1.5ex;
}
.in1{
font-size:1in;
}
.in2{
font-size:1.5in;
}
.cm1{
font-size:1cm;
}
.cm2{
font-size:1.5cm;
}
.mm1{
font-size:10mm;
}
.mm2{
font-size:15mm;
}
.pt1{
font-size:10pt;
}
.pt2{
font-size:15pt;
}
.pc1{
font-size:1pc;
}
.pc2{
font-size:1.5pc;
}
.porcentaje1{
font-size:150%;
}
.porcentaje2{
font-size:200%;
}
Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el monitor.
La unidad em hace referencia al tamaño en píxeles de la letra que se está utilizando. Si definimos en el body:
body {
font-size:14px;
}
Y luego utilizamos em para definir tamaños de otras fuentes del documento relativas a dicho valor:
h1 {
font-size:2.5em;
}
h2 {
font-size:2em;
}
Estamos diciendo que el elemento h1 tiene un tamaño de 2.5*14=35 píxeles.
El elemento h2 tiene un tamaño de 2*14=28 píxeles.
Como vemos al utilizar la unidad em cuando cambiamos el tamaño de la fuente en el body se recalculan todos los tamaños de fuentes donde utilizamos la medida relativa em.