fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

Unidades de medida de tipografía en CSS


En CSS, puedes definir el tamaño de una tipografía utilizando diversas unidades de medida. Algunas de las unidades más comunes para definir el tamaño de la fuente son:

  1. px (píxeles): Esta unidad fija el tamaño de la fuente en píxeles. Los píxeles son una unidad absoluta y proporcionan un control preciso sobre el tamaño de la fuente. Sin embargo, no escalan con el zoom del navegador y pueden no ser tan accesibles.
   font-size: 16px; /* Tamaño de fuente en píxeles */
  1. em: La unidad «em» se basa en el tamaño de fuente del elemento padre. Un valor de 1em es igual al tamaño de fuente actual del elemento. Por ejemplo, si el tamaño de fuente del elemento padre es 16px, 1em será igual a 16px.
   font-size: 1.5em; /* Tamaño de fuente 1.5 veces el tamaño del elemento padre */
  1. rem: Similar a «em», pero se basa en el tamaño de fuente del elemento raíz (<html>). Esto hace que sea más predecible y fácil de manejar en diseños complejos.
   font-size: 1.5rem; /* Tamaño de fuente 1.5 veces el tamaño del elemento raíz */
  1. % (porcentaje): La unidad de porcentaje se basa en el tamaño de fuente del elemento padre. Un valor de 100% equivale al tamaño de fuente actual del elemento padre.
   font-size: 150%; /* Tamaño de fuente 150% del tamaño del elemento padre */
  1. vw (ancho de ventana): Esta unidad se basa en el ancho de la ventana gráfica (viewport width). Por ejemplo, 1vw es igual al 1% del ancho de la ventana gráfica.
   font-size: 5vw; /* Tamaño de fuente igual al 5% del ancho de la ventana gráfica */
  1. vh (alto de ventana): Similar a vw, pero se basa en el alto de la ventana gráfica (viewport height).
   font-size: 3vh; /* Tamaño de fuente igual al 3% del alto de la ventana gráfica */
  1. vmin y vmax: Estas unidades se basan en el tamaño más pequeño (vmin) o más grande (vmax) de la ventana gráfica. Pueden ser útiles para fuentes responsivas en diseños adaptativos.
   font-size: 3vmin; /* Tamaño de fuente igual al 3% del tamaño más pequeño de la ventana gráfica */

Cada una de estas unidades tiene sus propias ventajas y desventajas, y la elección de la unidad depende del diseño y los requisitos específicos de tu proyecto. Las unidades relativas como «em», «rem» y porcentajes son especialmente útiles para crear diseños flexibles y responsive.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla linux local mac node.js pagina pagina web php post problemas producto red servicio servidor solución split sql sql server stock string windows woocommerce wordpress