{"id":2219,"date":"2022-12-20T10:14:30","date_gmt":"2022-12-20T10:14:30","guid":{"rendered":"https:\/\/keruanima.com\/?p=2219"},"modified":"2022-12-20T10:15:52","modified_gmt":"2022-12-20T10:15:52","slug":"tipos-de-tamanos-de-fuente-en-web-y-por-que-usar-rem","status":"publish","type":"post","link":"https:\/\/keruanima.com\/en\/diseno\/diseno-web\/tipos-de-tamanos-de-fuente-en-web-y-por-que-usar-rem\/","title":{"rendered":"Tipos de tama\u00f1os de fuente en web y por qu\u00e9 usar REM"},"content":{"rendered":"<h2 class=\"wp-block-heading\">introducci\u00f3n<\/h2>\n\n\n\n<p>Hoy vamos a hablar de unidades de medida que un dise\u00f1ador que trabaje para web debe tener en cuenta<\/p>\n\n\n\n<p><strong>pero antes un dato curioso importante:<\/strong><\/p>\n\n\n\n<p>El tama\u00f1o m\u00ednimo recomendado para el texto en una p\u00e1gina web es de 16 p\u00edxeles. Esto se debe a que el tama\u00f1o de fuente de 16 p\u00edxeles es legible en la mayor\u00eda de los dispositivos y pantallas sin ser demasiado peque\u00f1o o dif\u00edcil de leer.<\/p>\n\n\n\n<p>Sin embargo, es importante tener en cuenta que el tama\u00f1o m\u00ednimo adecuado para el texto puede variar en funci\u00f3n de varios factores, como el tipo de fuente utilizado, el dise\u00f1o de la p\u00e1gina y el p\u00fablico objetivo. Por ejemplo, si est\u00e1 creando una p\u00e1gina web para personas mayores o con discapacidad visual, es posible que desee utilizar un tama\u00f1o de fuente mayor para garantizar la legibilidad.<\/p>\n\n\n\n<p>En general, es importante asegurarse de que el tama\u00f1o de fuente es legible y c\u00f3modo de leer, ya que un tama\u00f1o de fuente demasiado peque\u00f1o puede ser dif\u00edcil de leer y puede disuadir a los visitantes de la p\u00e1gina. Al mismo tiempo, es importante no utilizar un tama\u00f1o de fuente demasiado grande, ya que puede hacer que la p\u00e1gina se vea desorganizada y dif\u00edcil de navegar.<\/p>\n\n\n\n<p>Dicho esto&#8230; vamos al meollo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">tipos de unidades de medida de tama\u00f1o de fuente usados en dise\u00f1o web<\/h2>\n\n\n\n<p>En dise\u00f1o web, hay varias unidades de medida que se pueden utilizar para especificar el tama\u00f1o de fuente de un elemento. Algunas de las unidades de medida m\u00e1s comunes son:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>P\u00edxeles (px):<\/strong> los p\u00edxeles son una unidad de medida absoluta que se utiliza para especificar el tama\u00f1o de fuente de un elemento en t\u00e9rminos de p\u00edxeles. Por ejemplo, si se establece el tama\u00f1o de fuente de un elemento en 16 p\u00edxeles, el tama\u00f1o de fuente del elemento ser\u00e1 de 16 p\u00edxeles independientemente del tama\u00f1o de la pantalla o del dispositivo en el que se visualice.<\/li>\n\n\n\n<li><strong>Puntos (pt):<\/strong> los puntos son una unidad de medida utilizada en la tipograf\u00eda y se utilizan a menudo para especificar el tama\u00f1o de fuente en impresi\u00f3n. En dise\u00f1o web, se pueden utilizar puntos para especificar el tama\u00f1o de fuente, pero suelen ser menos precisos que otros tipos de unidades de medida debido a las diferencias en la resoluci\u00f3n de pantalla y la forma en que los navegadores interpretan los puntos.<\/li>\n\n\n\n<li><strong>EM:<\/strong> la unidad EM se refiere al tama\u00f1o de fuente del elemento padre del elemento en el que se est\u00e1 utilizando. Por ejemplo, si el elemento padre tiene un tama\u00f1o de fuente de 16 p\u00edxeles y se establece el tama\u00f1o de fuente de un elemento hijo en 2 EM, el tama\u00f1o de fuente del elemento hijo ser\u00e1 de 32 p\u00edxeles (2 x 16 = 32).<\/li>\n\n\n\n<li><strong>REM:<\/strong> la unidad REM se refiere al tama\u00f1o de fuente del elemento ra\u00edz de la p\u00e1gina, que es el elemento HTML. Por ejemplo, si se establece el tama\u00f1o de fuente del elemento ra\u00edz en 16 p\u00edxeles y se establece el tama\u00f1o de fuente de un elemento en 2 REM, el tama\u00f1o de fuente del elemento ser\u00e1 de 32 p\u00edxeles (2 x 16 = 32).<\/li>\n\n\n\n<li><strong>Porcentajes (%):<\/strong> los porcentajes se pueden utilizar para especificar el tama\u00f1o de fuente en t\u00e9rminos del tama\u00f1o de fuente del elemento padre. Por ejemplo, si el tama\u00f1o de fuente del elemento padre es de 16 p\u00edxeles y se establece el tama\u00f1o de fuente de un elemento hijo en 200%, el tama\u00f1o de fuente del elemento hijo ser\u00e1 de 32 p\u00edxeles (200% x 16 p\u00edxeles = 32 p\u00edxeles).<\/li>\n<\/ol>\n\n\n\n<p>Cada unidad de medida tiene sus propias ventajas y desventajas y puede ser m\u00e1s adecuada para determinadas situaciones. Es importante elegir la unidad de medida adecuada en funci\u00f3n de las neces<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfqu\u00e9 es rem y em y en que se diferencian?<\/h2>\n\n\n\n<p>REM (Root EM) y EM son dos unidades de medida utilizadas en la tipograf\u00eda y el dise\u00f1o web para especificar tama\u00f1os de fuente y espaciado.<\/p>\n\n\n\n<p>La unidad REM se refiere al tama\u00f1o de fuente del elemento ra\u00edz de la p\u00e1gina, que es el elemento HTML. Como ya se ejemplifico, si se establece el tama\u00f1o de fuente del elemento ra\u00edz en 16 p\u00edxeles y se establece el tama\u00f1o de fuente de un elemento en 2 REM, el tama\u00f1o de fuente del elemento ser\u00e1 de 32 p\u00edxeles (2 x 16 = 32).<\/p>\n\n\n\n<p>Por otro lado, la unidad EM se refiere al tama\u00f1o de fuente del elemento padre del elemento en el que se est\u00e1 utilizando. Como ya se ejemplifico, si el elemento padre tiene un tama\u00f1o de fuente de 16 p\u00edxeles y se establece el tama\u00f1o de fuente de un elemento hijo en 2 EM, el tama\u00f1o de fuente del elemento hijo ser\u00e1 de 32 p\u00edxeles (2 x 16 = 32).<\/p>\n\n\n\n<p>Una de las principales diferencias entre REM y EM es que REM siempre se refiere al tama\u00f1o de fuente del elemento ra\u00edz, mientras que EM se refiere al tama\u00f1o de fuente del elemento padre. Esto significa que si se cambia el tama\u00f1o de fuente del elemento ra\u00edz en una p\u00e1gina, todos los elementos que utilizan REM cambiar\u00e1n su tama\u00f1o de fuente en consecuencia, mientras que los elementos que utilizan EM mantendr\u00e1n su tama\u00f1o de fuente original basado en el tama\u00f1o de fuente del elemento padre.<\/p>\n\n\n\n<p>Otra diferencia importante es que REM tiene un comportamiento m\u00e1s predecible y consistente en diferentes navegadores y dispositivos, mientras que EM puede variar en su comportamiento debido a la forma en que los navegadores y dispositivos interpretan el tama\u00f1o de fuente del elemento padre.<\/p>\n\n\n\n<p>En resumen, REM es una unidad de medida m\u00e1s consistente y predecible en t\u00e9rminos de tama\u00f1o de fuente y espaciado, mientras que EM se basa en el tama\u00f1o de fuente del elemento padre y puede tener un comportamiento menos predecible en diferentes navegadores y dispositivos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfes mejor rem o em?<\/h2>\n\n\n\n<p>En t\u00e9rminos generales, se recomienda utilizar REM para la mayor\u00eda de las aplicaciones de dise\u00f1o web. Esto se debe a que REM tiene un comportamiento m\u00e1s predecible y consistente en diferentes navegadores y dispositivos, lo que puede ayudar a evitar problemas de dise\u00f1o y asegurar que el contenido se muestre de manera consistente en todos los dispositivos.<\/p>\n\n\n\n<p>Otra ventaja de utilizar REM es que es m\u00e1s f\u00e1cil de usar y mantener a largo plazo. Al utilizar REM, puede establecer una escala de tama\u00f1os de fuente y espaciado basada en el tama\u00f1o de fuente del elemento ra\u00edz, lo que hace que sea m\u00e1s f\u00e1cil ajustar los tama\u00f1os de fuente y espaciado en toda la p\u00e1gina simplemente modificando el tama\u00f1o de fuente del elemento ra\u00edz.<\/p>\n\n\n\n<p>Sin embargo, hay algunas situaciones en las que puede ser \u00fatil utilizar EM. Por ejemplo, si desea que un elemento hijo tenga un tama\u00f1o de fuente que sea un porcentaje del tama\u00f1o de fuente del elemento padre, EM puede ser la mejor opci\u00f3n. Por ejemplo, si desea que un elemento hijo tenga el doble del tama\u00f1o de fuente del elemento padre, puede utilizar 2 EM. Sin embargo, es importante tener en cuenta que EM puede tener un comportamiento menos predecible y consistente en diferentes navegadores y dispositivos, por lo que es posible que deba realizar pruebas adicionales para asegurarse de que el dise\u00f1o se vea correctamente en todos los dispositivos.<\/p>\n\n\n\n<p>En resumen, REM es la unidad de medida m\u00e1s recomendada para la mayor\u00eda de las aplicaciones de dise\u00f1o web debido a su comportamiento predecible y consistente, mientras que EM puede ser \u00fatil en situaciones espec\u00edficas en las que se desee basar el tama\u00f1o de fuente o el espaciado en el tama\u00f1o de fuente del elemento padre.<\/p>","protected":false},"excerpt":{"rendered":"<p>En dise\u00f1o web, hay varias unidades de medida que se pueden utilizar para especificar el tama\u00f1o de fuente de un elemento. Aqu\u00ed te las explico.<\/p>","protected":false},"author":1,"featured_media":2220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,13,68],"tags":[54,121,14,118,67,117,116,120,115,122,114],"class_list":["post-2219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-diseno-web","category-ui-y-ux","tag-diseno","tag-diseno-ux","tag-diseno-web","tag-em","tag-recomendaciones","tag-rem","tag-rem-o-em","tag-tamano-de-letra","tag-tamanos-de-fuente","tag-ui-ux","tag-unidades-de-medida"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/comments?post=2219"}],"version-history":[{"count":2,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2219\/revisions"}],"predecessor-version":[{"id":2222,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2219\/revisions\/2222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media\/2220"}],"wp:attachment":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media?parent=2219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/categories?post=2219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/tags?post=2219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}