font-sizeEl aprendizaje de unidades absolutas y relativas aplica también para otras propiedades que requieran dimensiones, como
margin, padding, width, heigth, border y otras.
Info extraída de W3Schools
px, em y %Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente con ese tamaño.
Las unidades de longitud absoluta no se recomiendan para usar en pantalla, porque los tamaños de pantalla varían mucho. Sin embargo, se pueden utilizar si se conoce el medio de salida, por ejemplo, para el diseño de impresión.
px)Los píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de bajo dpi,
1px es un píxel de dispositivo (punto) de la pantalla. Para impresoras y pantallas de alta resolución, 1px
implica múltiples píxeles del dispositivo.
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto.
Párrafo de 10px
Párrafo de 20px
Párrafo de 30px
Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escalan mejor entre diferentes medios de renderizado.
emPara permitir a los usuarios cambiar el tamaño del texto (en el menú del navegador), muchos desarrolladores
usan em en lugar de píxeles.
1em es igual al tamaño de fuente actual. El tamaño de texto predeterminado en los navegadores es 16px. Entonces, el tamaño predeterminado de 1em es 16px.
El tamaño se puede calcular de px a em usando esta fórmula: px / 16 = em
Párrafo de 0.7em
Párrafo de 1em
Párrafo de 1.3em
remRelativo al tamaño de fuente del elemento raíz <html>.
Párrafo de 0.7rem
Párrafo de 1rem
Párrafo de 1.3rem
%Relativo al elemento padre.
Párrafo de 70% del tamaño de fuente del elemento padre.
Párrafo de 100% del tamaño de fuente del elemento padre.
Párrafo de 130% del tamaño de fuente del elemento padre.
Si no especifica un tamaño de fuente, el predeterminado es:
h1: 32px (2em)h2: 24px (1.5em)h3: 18.72px (1.17em)h4: 16px (1em)h5: 13.28px (0.83em)h6: 10.72px (0.67em)px, em y %El píxel es una medida estática, mientras que el porcentaje y em son medidas relativas. El
porcentaje depende del tamaño de fuente principal.
em es relativo al tamaño de fuente actual del elemento (2em significa 2 veces el tamaño de la fuente
actual). Entonces, si el tamaño de fuente del cuerpo es de 16 píxeles, entonces el 150% será de 24 píxeles (1,5
* 16) y 2em será de 32 píxeles (16 * 2).
Conversor de píxels a em y viceversa
| px | em | % |
|---|---|---|
| 10px | 0.6250em | 62.50% |
| 11px | 0.6875em | 68.75% |
| 12px | 0.7500em | 75.00% |
| 13px | 0.8125em | 81.25% |
| 14px | 0.8750em | 87.50% |
| 15px | 0.9375em | 93.75% |
| 16px | 1.0000em | 100.00% |
| 17px | 1.0625em | 106.25% |
| 18px | 1.1250em | 112.50% |
| 19px | 1.1875em | 118.75% |
| 20px | 1.2500em | 125.00% |
cm)Párrafo de 0.3cm
Párrafo de 0.6cm
Párrafo de 1cm
mm)Párrafo de 3mm
Párrafo de 6mm
Párrafo de 10mm
in)Párrafo de 0.12in
Párrafo de 0.24in
Párrafo de 0.39in
pt)Párrafo de 1pt
Párrafo de 5pt
Párrafo de 10pt
pc)Párrafo de 0.1pc
Párrafo de 0.5pc
Párrafo de 1pc
vwRelativo al 1% del ancho de la la ventana del navegador (viewport)
Párrafo de 0.5vw.
Párrafo de 2vw.
Párrafo de 5vw.
vhRelativo al 1% del alto de la la ventana del navegador (viewport)
Párrafo de 0.5vh.
Párrafo de 2vh.
Párrafo de 5vh.
vminEn relación con el 1% de la dimensión más pequeña de la la ventana del navegador (viewport)
Párrafo de 0.5vmin.
Párrafo de 2vmin.
Párrafo de 5vmin.
vmaxEn relación con el 1% de la dimensión más grande de la la ventana del navegador (viewport)
Párrafo de 0.5vmax.
Párrafo de 2vmax.
Párrafo de 5vmax.
chRelativo al ancho del "0" (cero)
Párrafo de 0.5ch.
Párrafo de 2ch.
Párrafo de 5ch.
exEn relación con la altura x de la fuente actual (rara vez se usa)
Párrafo de 0.5ex.
Párrafo de 2ex.
Párrafo de 5ex.