{"id":1840,"date":"2020-09-16T09:00:16","date_gmt":"2020-09-16T07:00:16","guid":{"rendered":"https:\/\/comsentido.es\/?p=1840"},"modified":"2024-05-13T10:35:28","modified_gmt":"2024-05-13T08:35:28","slug":"tipografias-y-fuentes-para-tu-web","status":"publish","type":"post","link":"https:\/\/comsentido.es\/ca\/tipografias-y-fuentes-para-tu-web\/","title":{"rendered":"Tipograf\u00edas y fuentes para tu web"},"content":{"rendered":"
<\/div>

Nuestra p\u00e1gina web es como el escaparate virtual de nuestro negocio,\u00a0 por ello debe ser clara, limpia y bonita.<\/strong>\u00a0Y aunque en cuanto al estilo de las p\u00e1ginas web podr\u00edamos estar hablando mucho tiempo, hoy venimos a hablar de algo muy importante: las tipograf\u00edas.<\/strong><\/p>\n

<\/p>\n

La tipograf\u00eda<\/strong>, es decir, el tipo de letra que escojas ser\u00e1 parte de la est\u00e9tica de tu p\u00e1gina web, ayudar\u00e1 a darle una unidad al concepto que est\u00e9s buscando<\/strong>, y formar\u00e1 parte de tu identidad corporativa. Por eso, debes darle la importancia que requiere. Adem\u00e1s, al igual que en las letras manuscritas, debe ser una letra legible que ayude a ver los contenidos<\/strong>, que en ning\u00fan caso entorpezca la lectura.<\/p>\n

Pero como es algo m\u00e1s complicado que eso, queremos facilitarte los aspectos que debes tener en cuenta al elegir tu tipograf\u00eda ideal:<\/strong><\/p>\n

Familias tipogr\u00e1ficas<\/strong><\/h2>\n

Existen muchas clasificaciones de familias tipogr\u00e1ficas, ya que cada vez hay m\u00e1s y m\u00e1s fuentes donde elegir. Pero vamos a centrarnos en dos en concreto ya que, de esas, parten todas las dem\u00e1s. <\/strong><\/p>\n

Fuentes \u201cSerif\u201d <\/strong><\/h4>\n

Esta tipolog\u00eda incluye todas aquellas fuentes que, como su nombre indica, poseen \u201cserif\u201d. Es decir, contienen un remate externo<\/strong> o un acabado que queda con un adorno fuera de la propia letra. El ejemplo m\u00e1s caracter\u00edstico es la Times New Roman<\/strong>, pero tambi\u00e9n lo son la Book Antiqua o la Georgia. Esta familia se usa habitualmente en los documentos impresos; en libros, diarios, revistas\u2026<\/p>\n

Fuentes \u201cSans Serif\u201d<\/strong><\/h4>\n

En el otro lado de la balanza aparecen las Sans Serif. Estas son aquellas que no poseen estos remates o decoraciones. Por ejemplo, esta que estamos usando.<\/strong> (Arial, Calibri, Impact\u2026) Esta tipolog\u00eda es muy \u00fatil para los cuerpos de las publicaciones, por ejemplo. Adem\u00e1s, es la que se pone por defecto en las redes sociales. Si nos fijamos, tanto Instagram como WhatsApp, Facebook\u2026 Todas usan letras Sans Serif.<\/strong><\/p>\n

Otras fuentes: scripts y decorativas<\/strong><\/h4>\n

Adem\u00e1s de estas dos fuentes principales existen muchos otros estilos de fuentes tipogr\u00e1ficas. Algunas de ellas, que en los \u00faltimos a\u00f1os se utilizan mucho son las scripts o manuscritas, es decir, aquellas fuentes tipogr\u00e1ficas que simulan la escritura a mano.<\/strong> Es una buena elecci\u00f3n para t\u00edtulos, para poner el nombre a modo firma al final de un documento, para algo m\u00e1s emotivo…<\/p>\n

Por otro lado, tambi\u00e9n se utilizan las tipograf\u00edas decorativas,<\/strong> es decir, todas aquellas que tienen elementos puramente est\u00e9ticos.<\/strong> Hay que tener especial cuidado con estas fuentes ya que pueden entorpecer o dificultar la lectura.<\/p>\n

Jerarqu\u00eda tipogr\u00e1fica <\/strong><\/h2>\n

Y c\u00f3mo no, en nuestra p\u00e1gina web queremos que unos textos destaquen sobre otros<\/strong>. No es lo mismo el titular que esa cita que a\u00f1adimos para que la web tenga dinamismo. Para ello, hay que aplicarle una jerarqu\u00eda. <\/strong>\u00bfSab\u00edas que existen los H1, H2, H3\u2026? Eso significa Heading 1, Heading 2\u2026 Es decir, normalmente las p\u00e1ginas ya te ofrecen la opci\u00f3n<\/strong> de jerarquizar tus contenidos<\/strong>. Pero, adem\u00e1s de aplicarlo, es muy importante tener en cuenta qu\u00e9 tipo de letra usar\u00e1s para cada uno de ellos. Aun que combinar fuentes es muy tentador\u2026 lo mejor es no excederse y no usar m\u00e1s de tres tipograf\u00edas distintas. <\/strong>Pero es posible jerarquizar con la misma tipograf\u00eda. <\/strong>\u00bfC\u00f3mo? Usando sus variaciones.<\/p>\n

Para empezar, puedes jerarquizar con el tama\u00f1o de fuente<\/strong>. El heading o titular 1 no ser\u00e1 igual de grande que el cuerpo, por ejemplo. Pero adem\u00e1s puedes usar la fuente en negrita, o en cursiva para jerarquizar aun m\u00e1s tus contenidos. De este modo, todos los usuarios tendr\u00e1n muy claro qu\u00e9 es lo m\u00e1s importante de tu web, y llevar\u00e1n una lectura f\u00e1cil y guiada que har\u00e1 que no se sientan perdidos o cansados de estar en ella. Adem\u00e1s, existe otro componente que cabe tenerse en cuenta a la hora de jerarquizar los contenidos: el color. Aunque, de nuevo, es muy importante que tu web no se convierta en un arco\u00edris sin sentido, el contenido puede servir para darle m\u00e1s importancia a aquellas partes que quieras destacar.<\/p>\n

Qu\u00e9 fuente usar en cada caso<\/strong><\/h2>\n

Pese que hay fuentes m\u00e1s adecuadas que otras a la hora de crear tu p\u00e1gina web, no existe una fuente perfecta para cada una, sino que m\u00e1s bien esa elecci\u00f3n va a ser tuya.<\/strong> Pero s\u00ed hay algunas pautas que no est\u00e1 mal tener en cuenta. \u00bfCu\u00e1les? Saber a qu\u00e9 p\u00fablico te diriges. Esto ser\u00e1 fundamental a la hora de escoger la fuente de tu web, ya que el p\u00fablico al que te dirijas har\u00e1 que haya fuentes que ni se te pase por la cabeza utilizar. Por ejemplo, si tu p\u00e1gina web ser\u00e1 para ni\u00f1os, una opci\u00f3n genial es buscar una fuente m\u00e1s divertida<\/strong> (pero siempre siempre legible) para darle un toque m\u00e1s infantil y atractivo para el que ser\u00e1 tu p\u00fablico. En cambio, si tu web es una de marketing digital<\/strong> como lo es coMsentido<\/a>, conviene una fuente tipogr\u00e1fica m\u00e1s seria,<\/strong> quiz\u00e1 una Sans Serif, aunque se puede combinar con:<\/p>\n

Color de la tipograf\u00eda<\/strong><\/h4>\n

Como ya sabemos, el color<\/a> sirve para jerarquizar los contenidos, pero tambi\u00e9n para darle unidad y est\u00e9tica a tu p\u00e1gina web<\/strong>. En el caso de coMsentido, usamos los colores corporativos ya que, adem\u00e1s de ser nuestros colores de marca y ayudarnos a crear una marca s\u00f3lida, \u00a1nos encantan!<\/p>\n

Tama\u00f1o de la tipograf\u00eda<\/strong><\/h4>\n

El tama\u00f1o de la fuente que escojamos no solo va a servir para jerarquizar, sino que tambi\u00e9n es importante ver si es el adecuado para ser le\u00eddo. Si el cuerpo de tu p\u00e1gina es demasiado peque\u00f1o no ser\u00e1 atractivo a la lectura<\/strong>, pero si es demasiado grande tampoco favorecer\u00e1 que los usuarios que accedan a ella decidan leerlo<\/strong>. Por tanto, debes buscar el punto medio, que, c\u00f3mo no, depender\u00e1 de la tipograf\u00eda.<\/p>\n

Otros aspectos para tener en cuenta<\/strong><\/h2>\n

Si pensabas que hab\u00edamos acabado\u2026 \u00a1Aun no! Quedan algunos puntos que deber\u00e1s tener en cuenta al realizar tu p\u00e1gina web.<\/p>\n

Interlineado<\/strong><\/h4>\n

El interlineado har\u00e1 que la fuente que hayas usado se vea bien<\/strong>. De nuevo, un interlineado demasiado grande quedar\u00e1 poco est\u00e9tico y \u00fatil, ya que no inspirar\u00e1 a seguir leyendo. Y un interlineado peque\u00f1o en exceso, har\u00e1 que no sea atractivo a la vista, o que incluso sea dif\u00edcil leer tus contenidos. Por eso, el interlineado es algo que deber\u00e1s mirar y volver a mirar para que no te falte ning\u00fan detalle.<\/strong><\/p>\n

Espacios en blanco<\/strong><\/h4>\n

Los espacios en blanco en el dise\u00f1o son fundamentales. Una p\u00e1gina web demasiado cargada har\u00e1 que todo el que entre tengo demasiados est\u00edmulos y no podr\u00e1 centrar su atenci\u00f3n<\/strong>. Por eso, entre texto y texto, es muy importante que haya espacio en blanco,<\/strong> as\u00ed como entre titular y cuerpo, por ejemplo. \u00a1Debemos perder el miedo al espacio en blanco!<\/p>\n

Distribuci\u00f3n en el espacio<\/strong><\/h4>\n

No solo es importante la jerarqu\u00eda para guiar a los distintos usuarios, tambi\u00e9n lo es el c\u00f3mo est\u00e1 distribuida cada una de las p\u00e1ginas de tu web<\/strong>. Es importante que tenga una distribuci\u00f3n clara y con sentido,<\/strong> ya que, si no, no llegar\u00e1 aquello que pretendes que todo el mundo lea.<\/p>\n

Uso de las may\u00fasculas <\/strong><\/h4>\n

Aunque las may\u00fasculas son muy tentadoras\u2026 \u00a1no hay que abusar de ellas!<\/strong> Meter may\u00fasculas en medio de un texto, por ejemplo, es hacer un uso err\u00f3neo de ellas. \u00a1Para eso est\u00e1n las negritas! Aunque de vez en cuando y de manera muy puntual puede hacerse, no es nada recomendable excederse con ellas. <\/strong><\/p>\n

Navegadores y tipograf\u00eda<\/strong><\/h2>\n

Finalmente, no podemos olvidar para qui\u00e9n escribimos, y ahora no me refiero a la persona que nos leer\u00e1\u2026 \u00a1sino al navegador que usemos! <\/strong>Debemos adaptar la tipograf\u00eda a la p\u00e1gina que estemos usando ya que, si es una fuente muy muy exclusiva o diferente, es posible que el navegador no te la reconozca y se ponga la que venga por defecto.<\/strong> Por eso, antes de hacer todo el trabajo para nada\u2026 Comprueba que pueda usarse.<\/p>\n

Y para eso tambi\u00e9n tenemos un truco casi inigualable\u2026 \u00a1Desc\u00e1rgala en Google Font! <\/strong>Estas fuentes est\u00e1n hechas para funcionar en Google, as\u00ed que, si quieres asegurarte desde un principio, esta es una clave que deber\u00e1s apuntar. <\/strong><\/p>\n

\u00a0<\/strong><\/p>\n

Ahora que ya sabes todo lo necesario sobre las tipograf\u00edas para tu web\u2026 \u00a1l\u00e1nzate a hacerla! Desde coMsentido esperamos que este post te haya sido muy \u00fatil y si quieres sabes m\u00e1s, consulta nuestro blog<\/a>, estamos seguras de que encontrar\u00e1s contenidos de tu inter\u00e9s. <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Nuestra p\u00e1gina web es como el escaparate virtual de nuestro negocio,\u00a0 por ello debe ser clara, limpia y bonita.\u00a0Y aunque en cuanto al estilo de las p\u00e1ginas web podr\u00edamos estar hablando mucho tiempo, hoy venimos a hablar de algo muy importante: las tipograf\u00edas.<\/p>\n","protected":false},"author":6,"featured_media":2777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[6],"tags":[14,413,403,401,402,407,411,412,406,410,327,405,404,414,409,399,400,408],"class_list":["post-1840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-comsentido","tag-cuerpo","tag-familias-de-tipografia","tag-fuente","tag-fuente-tipografica","tag-google-form","tag-jerarquias","tag-jerarquizar-contenido","tag-negrita","tag-nuestra-pagina-web","tag-pagina-web","tag-sans-serif","tag-serif","tag-texto","tag-tipo-de-letra","tag-tipografia","tag-tipografias","tag-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/posts\/1840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/comments?post=1840"}],"version-history":[{"count":0,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/posts\/1840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/media\/2777"}],"wp:attachment":[{"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/media?parent=1840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/categories?post=1840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comsentido.es\/ca\/wp-json\/wp\/v2\/tags?post=1840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}