La medici n del Tama o de fuente es una parte importante del proceso de dise o de texto. La medici n correcta le permite crear un dise o que sea f cil de Leer y agradable. Afortunadamente, hay varias formas de medir el Tama o de fuente que lo ayudar n a lograr los resultados que desea.
El primer m todo es usar unidades absolutas, como p xeles (px) o puntos (pt). Con estas unidades, puede especificar el Tama o de fuente exacto en su dise o. Sin embargo, tenga en cuenta que tales valores absolutos pueden no ser adecuados para usuarios con visi n limitada o en dispositivos m viles con alta densidad de p xeles.
El segundo m todo es usar unidades de medida relativas, como porcentajes (%). Puede usar porcentajes para especificar el Tama o de fuente en relaci n con otros elementos de la p gina. Por ejemplo, si establece el Tama o de fuente al 100% para el texto del cuerpo, cambiar autom ticamente junto con el valor del Tama o de fuente base.
El tercer m todo es usar unidades de medida relativas, como em o rem. La unidad em se usa para establecer el Tama o de fuente en relaci n con el Tama o de fuente del elemento principal, mientras que la unidad rem se usa para establecer el Tama o de fuente en relaci n con el Tama o de fuente del elemento ra z. Estas unidades relativas son especialmente tiles cuando se crean dise os adaptativos.
El Cuarto m todo es usar un Tama o de fuente establecido en unidades absolutas, seguido de un cambio en su escala utilizando la propiedad transform:scale de CSS. Este m todo puede ser til en ciertos casos en los que necesita cambiar din micamente el Tama o de la fuente en funci n de diferentes condiciones.
El quinto m todo es usar unidades de medida relativas, como vw o vh. La unidad vw determina el Tama o con respecto al ancho del rea visible de la ventana del navegador, y la unidad vh determina el Tama o con respecto a la altura del rea visible de la ventana del navegador. Esto es til para crear dise os que se escalan con el cambio de Tama o de la ventana del navegador.
El sexto m todo es usar variables CSS (propiedades personalizadas). Con las variables CSS, puede establecer un valor de Tama o de fuente en un solo lugar y cambiarlo f cilmente en todo el sitio simplemente cambiando el valor de la variable. Esto es especialmente til cuando se crea un dise o escalable con una gran cantidad de diferentes tama os de fuente.
- 6 maneras de medir el Tama o de fuente
- M todo 1: Regla o papel cuadriculado
- M todo 2: usar p xeles
- M todo 3: porcentaje de valor relativo
6 maneras de medir el Tama o de fuente
1. Unidades absolutas: p xeles (px), mil metros (mm) y pulgadas (in). Establecen el n mero exacto de p xeles, mil metros o pulgadas que ocupar cada letra de texto. Por ejemplo, 14 p xeles o 10 mil metros. La desventaja de este enfoque es la rigidez del Tama o de fuente: al cambiar el Tama o de la ventana del navegador, el texto permanecer sin cambios.
2. Unidades relativas: porcentajes ( % ) atribuibles al elemento principal. Por ejemplo, si el Tama o de fuente del elemento principal es de 12 p xeles, el 150% del Tama o de fuente del elemento principal ser de 18 p xeles. La ventaja de este m todo es la adaptabilidad: el Tama o de la fuente se escalar junto con el cambio de Tama o de la ventana del navegador.
3. Unidades de medida relativas: em y rem. Em es una unidad de medida relativa que es igual al Tama o de fuente del elemento principal. Por ejemplo, si el elemento principal tiene un Tama o de fuente de 12 p xeles, el valor de 1em tambi n ser de 12 p xeles. El valor em se puede establecer tanto para el elemento principal como para el elemento secundario. REM es tambi n una unidad de medida relativa, s lo que siempre se basa en el Tama o de fuente del elemento ra z de la p gina. Esto le permite administrar el Tama o del texto de manera m s flexible.
. Esto le permite separar la estructura del documento de su dise o.
5. Units Relative to the Root Font Size (RFS) es una nueva t cnica que permite establecer el Tama o de fuente con respecto a un valor base especificado y utilizando variables CSS auxiliares.
. Este m todo es til cuando se crea un dise o receptivo y proporciona una escala proporcional de la fuente.
M todo 1: Regla o papel cuadriculado
Para comenzar, seleccione el texto cuya fuente desea medir. Luego tome una regla o papel cuadriculado y adj ntelo a una de las letras del texto. Mida la altura de la letra desde la base hasta la parte superior y anote el valor resultante.
Tenga en cuenta que si utiliza este m todo de medici n, debe tener en cuenta que hay varios par metros que determinan el Tama o de fuente, incluida la altura de las letras, el ancho de las letras, el espacio entre las letras y otros factores. Por lo tanto, la altura medida puede no proporcionar informaci n completa sobre el Tama o de la fuente, pero a n as puede ser una gu a til cuando se trata de texto impreso.
Tenga en cuenta que al imprimir una fuente, las mediciones pueden variar ligeramente dependiendo de la configuraci n de la impresora, el tipo de papel y otros factores, por lo que se recomienda utilizar varios m todos de medici n diferentes para obtener resultados m s precisos.
M todo 2: usar p xeles
Para especificar el Tama o de fuente en p xeles, puede utilizar el atributo style y la propiedad font-size. Por ejemplo:
Texto de ejemplo
T tulo
En este caso, el Tama o de fuente se define en p xeles. Un valor de 12px indica un Tama o de fuente de 12 p xeles y un valor de 24px indica un Tama o de fuente de 24 p xeles.
El uso de p xeles proporciona un valor preciso y predecible, ya que no depende de otros par metros o configuraciones del usuario. Sin embargo, vale la pena recordar que si el usuario ampl a la p gina, la fuente especificada en p xeles permanecer sin cambios, lo que puede distorsionar la composici n Visual.
M todo 3: Porcentaje de valor relativo
Por ejemplo, si tenemos un p rrafo con un Tama o de fuente base dado de 16 p xeles y queremos establecer el Tama o de fuente para el p rrafo de su hijo en el 150% del valor base, podemos usar el siguiente c digo CSS:
| HTML | CSS |
|---|---|
Texto del p rrafo | p { |
Por lo tanto, el Tama o de fuente para un p rrafo ser a igual a 16 p xeles * 150% = 24 p xeles.
El uso de la relaci n porcentual permite la creaci n de dise os din micos y receptivos, ya que el Tama o de fuente cambia autom ticamente cuando cambia el valor subyacente, lo que permite una configuraci n m s flexible del Tama o del texto en la p gina web.