Teoría de las Medidas de Texto
Primero que nada, existen dos tipos de medidas para las fuentes en CSS:
Medidas Fijas: como los centímetros, milímetros, puntos, píxeles, etc.
Medidas Relativas: son aquellas medidas que dependen de un "algo", como por ejemplo el contenedor del elemento.
Medidas Fijas
Las medidas fijas son aquellas expresadas en valores fijos y estandarizados que no dependen de ningún factor externo; sin importar la circunstancia, siempre se expresarán en la misma dimensión. Por su parte, esta medida puede ser expresada en múltiples formatos, los cuales son:
PX: píxeles
Cm: centímetros
mm: milímetros
Pt: puntos
Medidas Relativas
Se tratan de aquellas medidas que están sujetas a las características del contenedor en el que se encuentran; son empleadas principalmente para los diseños responsive, ya que se ajustan en base a los cambios que ocurran en el contenedor en cuestión.
Constan de varios tipos de medidas diferentes:
-
Em
Por defecto, esta unidad de medida está compuesta por 16 píxeles; es posible definir de cuántas unidades se desea el tamaño de la fuente de la siguiente forma:
En estos casos se le puede dar el valor que se desee, sin embargo, hay que tener presente que el número de unidades utilizadas es igual a multiplicar este valor por el número de px que posea "em" en ese momento, ya que esto puede ser modificado por las dimensiones de la caja contenedora.
El valor de "em" es definido por la herencia en base a las dimensiones del contenedor del elemento actual; por ejemplo, si definimos un valor de letra de 20px en el contenedor, en el elemento hijo el valor de cada "em" se ajustará a esos 20px. Por lo tanto, el tamaño de letra aplicado en el contenedor define el valor de cada unidad "em" utilizada en el elemento hijo.
Pero esto no queda así; realmente el valor de "em" es definido por el valor de cualquier propiedad que trabaje con unidades de medida, por lo tanto, verdaderamente las dimensiones, el padding, el margin, etc., todos estos valores aplicados en el contenedor afectarán el valor de cada unidad "em" del elemento hijo.
-
Rem
Este valor tiene como referencia al tamaño de la fuente definido en el elemento root (raíz).
-
Viewport
Se trata de un valor que hace referencia a las dimensiones de la pantalla del dispositivo, en la cual 100v equivale al total de la dimensión de la pantalla. Esta medida se divide en dos: el "viewport width (vw)" y el "viewport height (vh)"; es decir, uno aplica para el ancho de la pantalla y el otro para el alto de esta.
En este ejemplo se está definiendo que las dimensiones del formulario sean iguales a la mitad de las dimensiones de la pantalla.