{"id":3885,"date":"2016-07-13T10:43:05","date_gmt":"2016-07-13T08:43:05","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=3885"},"modified":"2024-06-05T14:26:09","modified_gmt":"2024-06-05T12:26:09","slug":"reglas-tipografia-web-disenador-deberia-saber","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/reglas-tipografia-web-disenador-deberia-saber\/","title":{"rendered":"Reglas de tipograf\u00eda web que todo dise\u00f1ador deber\u00eda saber"},"content":{"rendered":"<p>Podr\u00edamos haber titulado este art\u00edculo como \u201cEl usuario, ese gran olvidado\u201d \u00a0y, es entorno a \u00e9l, al protagonista indiscutible de la web, al que vamos a intentar facilitar la vida a trav\u00e9s de estas <strong>buenas pr\u00e1cticas de tipograf\u00eda web<\/strong>. Y decimos facilitar la vida porque los dise\u00f1adores, en muchas ocasiones, priorizamos la est\u00e9tica frente a las necesidades del usuario. \u00bfY cu\u00e1l es la necesidad m\u00e1s inmediata del usuario?\u00a0 \u00a1Encontrar lo que busca! As\u00ed que vamos a pon\u00e9rselo f\u00e1cil.<\/p>\n<p>Varios aspectos influyen en la experiencia de usuario, y todos han de ser trabajados con el mismo cuidado: la est\u00e9tica, la calidad del contenido, la colocaci\u00f3n de los elementos, la legibilidad, etc.<\/p>\n<p>En este art\u00edculo nos centraremos en el uso adecuado de la tipograf\u00eda web, pero antes de comenzar escribid 100 veces en la pizarra:<\/p>\n<p><strong>\u00a1Toda decisi\u00f3n debe girar entorno a la LEGIBILIDAD!<br \/>\n<\/strong>(aunque sea como referencia de lo que estamos sacrificando para potenciar otros aspectos)<\/p>\n<h2>Tipo de fuente<\/h2>\n<p>En cuanto a la elecci\u00f3n de la tipograf\u00eda, siendo el primer paso l\u00f3gico, enumeramos una serie de buenas pr\u00e1cticas:<\/p>\n<ul>\n<li>Cuidado con las tipograf\u00edas demasiado comunes como la Arial =&gt; carecen de personalidad.<\/li>\n<li>Elegir mal la tipograf\u00eda puede arruinar el dise\u00f1o =&gt; intentaremos cumplir las expectativas emocionales de los usuarios finales.<\/li>\n<li>No usar demasiados tipos diferentes de fuentes =&gt; se recomiendan 3 como m\u00e1ximo.<\/li>\n<li>Y si vas a usar diferentes tipograf\u00edas, aseg\u00farate de que contrasten entre s\u00ed\u2026 \u00bfsi no para qu\u00e9 lo haces?<\/li>\n<\/ul>\n<h2>Propiedades de la fuente<\/h2>\n<ul>\n<li>Partiendo de la base de que tan s\u00f3lo en Espa\u00f1a vivimos 25 millones de miopes, por favor, \u00a1tenednos en cuenta! Recomendamos un tama\u00f1o m\u00ednimo de 13px\/14px.<\/li>\n<li>Debemos tener especial cuidado con el contraste entre el fondo y el color de texto. Os recomendamos esta web donde podr\u00e9is poner a prueba la puntuaci\u00f3n de dicho contraste: colorable.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3886\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-1024x470.png\" alt=\"Colorable\" width=\"620\" height=\"285\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-1024x470.png 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-300x138.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-768x352.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-1536x705.png 1536w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable-360x165.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/colorable.png 1815w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<ul>\n<li>Evita escribir todo en may\u00fasculas = ralentiza la lectura. Se suele usar para destacar mensajes cortos como pueden ser t\u00edtulos, subt\u00edtulos o conceptos clave.<\/li>\n<li>Lo mismo pasa con la cursiva.<\/li>\n<li>Subrayados demasiado largos, \u00a1no gracias!, excepto para t\u00edtulos con un tama\u00f1o de letra considerablemente grande.<\/li>\n<\/ul>\n<h2>Propiedades del p\u00e1rrafo<\/h2>\n<p>Una vez que ya tenemos claras las fuentes que vamos a usar, nos centraremos en la legibilidad del contenido en s\u00ed:<\/p>\n<ul>\n<li>Usa un interlineado adecuado =&gt; la recomendaci\u00f3n est\u00e1 en una proporci\u00f3n de un 20% mayor que el tama\u00f1o de la letra, es decir, si estamos usando un tama\u00f1o de letra de 14px para un p\u00e1rrafo, el interlineado deber\u00e1 ser de 14 x 1\u20192 = 16,8 px<\/li>\n<li>\u00a1Prohibido utilizar texto justificado! El texto justificado funciona aumentando el hueco entre palabras hasta encajar la l\u00ednea en las delimitaciones del p\u00e1rrafo. Estos huecos provocan un efecto cascada que distraen el ojo pudiendo hacer que incluso saltemos de l\u00ednea involuntariamente.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3887\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-1024x552.jpg\" alt=\"Texto justificado movil\" width=\"620\" height=\"334\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-1024x552.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-300x162.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-768x414.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-1536x828.jpg 1536w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil-360x194.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/07\/tipografia-movil.jpg 1856w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<ul>\n<li>Juega con el entorno que rodea el contenido: los espacios en blanco entre p\u00e1rrafos ayudan a descansar la mirada y al mismo tiempo a concentrar la atenci\u00f3n de nuestras visitas.<\/li>\n<li>La norma de oro: la longitud recomendada para un p\u00e1rrafo est\u00e1 comprendida entre 45 y 75 palabras. M\u00e1s all\u00e1 de all\u00ed provocar\u00e1s que el usuario se haya perdido por el camino\u2026 \u00a1con lo que nos ha costado que lo encontrara!<\/li>\n<li>En web no se lee, \u00abse escanea\u00bb el texto: est\u00e1 demostrado que tan s\u00f3lo se lee un 25% del contenido completo de una web, \u00a1\u00fasalo bien!<\/li>\n<\/ul>\n<p>Estas son algunas de las pr\u00e1cticas de tipograf\u00eda web que recomendamos tener en cuenta a la hora de desarrollar un proyecto. Si necesitas ayuda en el dise\u00f1o de tu proyecto, contacta con nosotros, nuestro <a href=\"https:\/\/www.hiberus.com\/agencia-digital\/usabilidad-y-experiencia-de-usuario\">equipo de Dise\u00f1o y Usabilidad<\/a> estar\u00e1 encantado de ayudarte.<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n                        <p>Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3885#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>Podr\u00edamos haber titulado este art\u00edculo como \u201cEl usuario, ese gran olvidado\u201d \u00a0y, es entorno a \u00e9l, al protagonista indiscutible de la web,&#8230;<\/p>\n","protected":false},"author":35,"featured_media":3888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[31,143,91],"class_list":{"0":"post-3885","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-diseno","10":"tag-diseno-web","11":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=3885"}],"version-history":[{"count":6,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3885\/revisions"}],"predecessor-version":[{"id":43158,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3885\/revisions\/43158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/3888"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=3885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=3885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=3885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}