Medidas o tamaños en CSS

En el diseño web, siempre las medidas y tamaños CSS son importantes, por el hecho de que no solo cada navegador tiene sus propias “pequeñas variasiones” sino que tambien influyen las diferentes resoluciones de nuestros visitantes al vizualizar nuestra web, y para tener mas entendimiento en cuanto a las unidades de medida conoscamoslas.

Unidad de medida de porcentajes en css:

%
Este tipo de medida, es importante cuando tenemos un diseño fluido, obien adaptable a cualquier resolucion.

Unidad de medidas absolutas en css:

cm (centimetros)
in (pulgadas)
mm (milimetros)
pc (picas)
px (pixeles)
pt (puntos)
Este tipo de medidas, nos permite tener tamaños fijos, y medidos, pero hace que nuestro diseño sea estatico y menos fluido, aun que la unidad de “px” tiene un valor diferente dependiendo de su navegador del visitante, comun mente son 96px por pulgada en nuestros monitores, y otros 72px por pulgada, y si usamos pt (puntos) en vez de px (pixeles) el tamaño del punto varia segun la resolucion de pantalla de nuestros visitantes y no del navegador como los px (pixeles).

Unidad de medidas relativas en css:

em
ex
Estos tipos de medidas, son las mas usadas por ser mas compatibles en diferentes resoluciones, y navegadores.
Nos permiten tener diseños fluidos y adaptables para una mejor visualizacion en nuestras webs.

Pero bueno aqui les traigo una tabla de ejemplo de estos populares “tipos de medidas css” para ir jugando con los tamaños e ir entendiendo estos…

Tabla: Tipos de medidas css

Tipos de tamaños y/o medidas de textos/fuentes en CSS
Otra alternativa pero poco usada para el tamaño de nuestras fuentes
font-size: xxsmall;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
Ejemplo:

xxsmall
x-small
small
medium
large
x-large
xx-large
smaller
larger

Segun el libro de CSS, es mejor declarar los tamaños de fuentes de nuestro sitio con medidas relativas, es decir, convertir desde px a em, nuestras fuentes, y es facil tansolo agregando esta simple linea al body.

1

body {font-size: 62.5%;}

Y hace que 1em sea equivalente a 10px; y por ejemplo: yo suelo usar 12px de tamaño estandar en mis contenidos obien, 9pt, 0.75em, 75%, entonces ya no serian 0.75em, el tamaño de mi fuente sino 1.2em y asi hacer mas estandar y adaptable nuestros textos en diferentes resoluciones.

Pero bueno aprovecho para dejarles un conversor de tamaños de textos CSS… para evitar problemas cuando no tenemos el “font-size: 62.5%“,

Herramienta Web “EM Calculator” – Calcular tamaño de PX a EM CSS