kakao-combos-blog-kakao
Medidas-Em-y-REM-Kakao-Media

05 Nov ¡Conozcamos un poco de rem y em!

La manera en que creamos páginas web está constantemente cambiando. Ya sea por avances tecnológicos, nuevos dispositivos o innovadores procesos, el desarrollo web siempre está a la vanguardia del cambio.

Es por todo lo anterior que es difícil poder abordar todo lo que la palabra “Desarrollo web” implica, porque dentro de ello se tratan temas como HTML5, CSS3, PHP, Ruby, Frameworks, etc… Pero en esta ocasión queremos hablar un poco acerca de CSS3 y la forma de asignar los tamaños de las fuentes en un sitio web, ya que hoy en día se están utilizando nuevas formas de declarar valores de tamaños de fuentes que pueden ser un poco más viables con respecto a la adaptación de la misma. Queremos aclarar que en el post del día de hoy ocuparemos un lenguaje más técnico que el que usualmente utilizamos para nuestro blog.

Con el término “valores de tamaños de las fuentes” nos referimos a “em”, “rem” y “porcentaje” que son las medidas que ayudan a que las fuentes puedan adaptarse según la configuración del navegador, una forma práctica de probar esto que les comentamos es yendo al navegador (Chrome preferiblemente) y dirigirnos a las Opciones del navegador, luego en las configuraciones buscaremos una opción llamada Contenido web (Web content en inglés) y cambiamos el tamaño que la fuente trae por defecto. El cambio lo podemos notar en páginas como al realizar busqueda en google, donde veremos que el tamaño de la fuente varía en relación al tamaño original,sin embargo no todas las páginas de internet son afectadas, debido a que no han sido trabajadas con medidas em o rem,  acá les dejamos un ejemplo del antes y el después al configurar las medidas:

Configuracion-EM-REM2-Kakao-Media

Para entrar en materia, un “em” es normalmente el tamaño de una letra que se encuentra dentro de un elemento al cual se esté aplicando esta medida, esto quiere decir que si un elemento tiene asignado un tamaño de fuente de 16 pixeles, entonces 1 em será igual a 16px, en todo caso, 1 em de manera predeterminada vale 16px porque los navegadores por defecto definen un font-size de 16px al HTML.

La unidad “em” es escalable y depende de su elemento padre, o elemento principal, por ejemplo si tenemos un header con un font-size igual a 1em (16px), el elemento hijo tiene una fuente de 1.3 em, de forma que este se muestra un 30% mas grande que el del contenedor (header), algo como decir así: Header = 1em (16px) entonces el hijo mide 1.3em (16px x 1.3 = 20.8px). Esto es secuencial, es decir, si dentro del hijo del header agregas otro hijo, la medida va a aumentar un 30% más.

Si no te gustaría tener todo este enredo y mantener solamente una medida exacta para cada tamaño de letra y que además sea adaptable a la configuración del usuario, también puedes usar la medida “rem”.

La unidad rem es bastante sencilla. Permite basar sus unidades em en una unidad principal, definida en el elemento html . De esta manera , usted podría hacer los cambios que desees, ajustes font- size en todo tipo de lugares en su hoja de estilo , y cualquier tamaño definido con ‘rem’ sería relativo a la unidad de raíz, y no iba a heredar de los padres como es el caso de ‘ em ‘ (que aún se podía usar, que le permite crear diferentes contextos de la unidad de raíz sin dejar de ser capaz de hacer referencia a la unidad de raíz) .

El uso de rem es importante porque nos permite cierta estructura para poder definir partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.  Como un punto extra es importante recalcar que estos valores también son utilizados para definir valores de contenedores dentro del layout.

En conclusión, muchos desarrolladores recomiendan utilizar la medida rem para definir valores de tamaños de fuentes, pero al igual hay otros que recomiendan el uso de em en vez de rem. Al final es tu decisión escoger qué medidas utilizar al momento de desarrollar, pero te recordamos que es importante tomar en cuenta estos valores, así que si no lo has hecho, al igual que nosotros, deberías de comenzar a usar “rem” o “em” en tus webs.

Comparte este post:
No hay comentarios

Comentar post