{"id":1348,"date":"2012-04-04T19:01:35","date_gmt":"2012-04-04T17:01:35","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=1348"},"modified":"2021-02-24T17:03:15","modified_gmt":"2021-02-24T16:03:15","slug":"google-fonts-y-la-importancia-de-la-tipografia-en-el-diseno-web","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/webs-para-fotografos\/google-fonts-y-la-importancia-de-la-tipografia-en-el-diseno-web","title":{"rendered":"Google Fonts y la importancia de la tipograf\u00eda en el dise\u00f1o web"},"content":{"rendered":"<p>Tradicionalmente las tipograf\u00edas usadas en dise\u00f1o web se han limitado a las llamadas fuentes <em>seguras<\/em>, aquellas que vienen instaladas por defecto en casi todos los PCs: \u00a0nombres m\u00edticos como <em>verdana, arial, geneva, times new roman<\/em>&#8230;<\/p>\n<p>Esto es un factor muy limitante porque la tipograf\u00eda puede marcar la diferencia en un dise\u00f1o web.<\/p>\n<div id=\"attachment_1354\" style=\"width: 517px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1354\" class=\"size-full wp-image-1354\" title=\"Ejemplo de un men\u00fa con fuentes nativas\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot105.jpg\" alt=\"Ejemplo de un men\u00fa con fuentes nativas\" width=\"507\" height=\"143\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot105.jpg 507w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot105-300x85.jpg 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><p id=\"caption-attachment-1354\" class=\"wp-caption-text\">Un men\u00fa con una fuente Rock Salt desde Google Fonts<\/p><\/div>\n<p>Fuentes existen miles, pero usar algunas de ellas en una web siempre ha sido complicado porque si el usuario no tiene la fuente instalada en su PC, el navegador la sustituye por otra y la web termina teniendo un aspecto totalmente diferente al dise\u00f1o inicial. Ante este problema se han usado varias soluciones: peque\u00f1os fragmentos de Flash, im\u00e1genes que sustituyen al texto, etc. Estos remedios a su vez tienen sus inconvenientes porque no son, por as\u00ed decirlo,\u00a0<em>naturales<\/em>.<\/p>\n<p>Existe otra soluci\u00f3n para usar fuentes <em>raras <\/em>en cualquier web: si el usuario no la tiene instalada, se descarga en ese momento del mismo modo que las im\u00e1genes y el resto de componentes de la web y se usa como cualquier otra fuente. Al fin y al cabo una fuente se puede contener un fichero.<\/p>\n<h3>Google Fonts<\/h3>\n<p>Esta soluci\u00f3n puede ser la definitiva, y un impulso decisivo puede ser un <em>recopilatorio<\/em> de fuentes creado por Google y que se llama, sorpr\u00e9ndanse,\u00a0<em><a title=\"Google Fonts\" href=\"http:\/\/www.google.com\/webfonts\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a><\/em>. Cuenta ya con cerca de 500 fuentes distintas que pueden utilizarse libremente en todo tipo de webs. Los ficheros que contienen las fuentes permanecen el la red de servidores de Google, lo que favorece su descarga r\u00e1pida.<\/p>\n<div id=\"attachment_1360\" style=\"width: 489px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1360\" class=\"size-full wp-image-1360\" title=\"Advent Pro\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot106.jpg\" alt=\"\" width=\"479\" height=\"127\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot106.jpg 479w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2012\/04\/screenshot106-300x80.jpg 300w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><p id=\"caption-attachment-1360\" class=\"wp-caption-text\">El mismo men\u00fa con la fuente Advent Pro<\/p><\/div>\n<h3>Ventajas<\/h3>\n<ul>\n<li>Muy f\u00e1ciles de usar<\/li>\n<li>M\u00e1s riqueza y personalidad para cualquier web<\/li>\n<li>Se pueden usar en todo tipo de textos: t\u00edtulos y men\u00fas pero tambi\u00e9n contenidos.<\/li>\n<li>Funcionan como cualquier otra fuente, los textos se pueden seleccionar y copiar y son totalmente <em>visibles<\/em>\u00a0para los buscadores.<\/li>\n<\/ul>\n<h3>Inconvenientes<\/h3>\n<ul>\n<li>El fichero de cada fuente necesita ser descargado para usarse en la web, al menos la primera vez. Esto puede retardar ligeramente la navegaci\u00f3n. No es recomendable usar muchas fuentes de este tipo al mismo tiempo (idealmente una o dos). Una fuente t\u00edpica puede pesar entre 30 y 90Kb, lo mismo que una imagen de tama\u00f1o peque\u00f1o\/mediano.<\/li>\n<li>Tienen los mismos inconvenientes que las fuentes <em>normales<\/em>, por tanto si en un navegador o sistema operativo (\u00bfalguien dijo Microsoft?) los textos normales no se ven suavizados (sin <em>antialiasing<\/em>) las fuentes de Google Fonts se ver\u00e1n igual de mal.<\/li>\n<\/ul>\n<h3>Bluekea y Google Fonts<\/h3>\n<p>En Bluekea vamos a comenzar a apostar por Google Fonts para nuestras webs de fotograf\u00eda, comenzando por un nuevo dise\u00f1o que vamos a publicar dentro de muy poco&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tradicionalmente las tipograf\u00edas usadas en dise\u00f1o web se han limitado a las llamadas fuentes seguras, aquellas que vienen instaladas por defecto en casi todos los PCs: \u00a0nombres m\u00edticos como verdana, arial, geneva, times new roman&#8230; Esto es un factor muy &hellip; <a href=\"https:\/\/bluekea.com\/blog\/webs-para-fotografos\/google-fonts-y-la-importancia-de-la-tipografia-en-el-diseno-web\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1354,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-1348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webs-para-fotografos"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=1348"}],"version-history":[{"count":1,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1348\/revisions"}],"predecessor-version":[{"id":5369,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1348\/revisions\/5369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/1354"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=1348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=1348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=1348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}