{"id":34444,"date":"2017-05-15T16:46:41","date_gmt":"2017-05-15T16:46:41","guid":{"rendered":"https:\/\/codewebbarcelona.com\/las-fuentes-mas-populares-diseno-web\/"},"modified":"2026-04-21T05:22:08","modified_gmt":"2026-04-21T05:22:08","slug":"les-fonts-mes-populars-disseny-web","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/","title":{"rendered":"Els tipus de lletra m\u00e9s populars per al disseny web"},"content":{"rendered":"<p>Quan parlem de <strong>disseny web<\/strong>, ens referim a l\u2019estructuraci\u00f3 del contingut, a l\u2019\u00fas adequat de les imatges i a la import\u00e0ncia d\u2019escollir una o diverses <strong>bones tipografies que reforcin el disseny<\/strong> que volem transmetre.<\/p>\n<p>Sens dubte, la plataforma de refer\u00e8ncia a l\u2019hora de triar tipografies per a la web \u00e9s google\u00a0fonts: <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/fonts.google.com\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Google Fonts per triar la teva tipografia en el disseny web<\/h2>\n<p>Fa uns anys, com ja sabreu, el m\u00e9s habitual quan <strong>disseny\u00e0vem una p\u00e0gina web<\/strong> era utilitzar les tipografies de sistema, ja que la majoria de navegadors no permetien fer servir tipografies externes.<\/p>\n<p>Des de fa temps, per\u00f2, amb els navegadors actualitzats, tenim centenars de tipografies a l\u2019abast i, amb l\u2019arribada de google fonts, encara \u00e9s m\u00e9s senzill.<\/p>\n<p>&nbsp;<\/p>\n<h3>Les tipografies m\u00e9s populars segons Google Fonts<\/h3>\n<p>A continuaci\u00f3, compartim el r\u00e0nquing de les 5 tipografies m\u00e9s utilitzades segons Google Fonts. Aquesta classificaci\u00f3 es basa en el nombre de sol\u00b7licituds que rep cada tipografia.<\/p>\n<h3>1. Roboto<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-735\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/roboto-1024x979-2.jpg\" alt=\"roboto\" width=\"1024\" height=\"979\" \/><\/p>\n<p>Dissenyada per Christian Robertson, \u00e9s una tipografia mec\u00e0nica i geom\u00e8trica. Es fa servir en ni m\u00e9s ni menys que <strong>32.600 milions de llocs web<\/strong>.<\/p>\n<p><a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Veure Roboto<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>2. Open Sans<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-736\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/open-sans-1024x940-2.jpg\" alt=\"open sans\" width=\"1024\" height=\"940\" \/><\/p>\n<p>En segon lloc trobem Open Sans, una tipografia creada per Steve Matteson. Ha estat optimitzada per garantir una lectura excel\u00b7lent tant en format web com impr\u00e8s. Amb Open Sans <strong>s\u2019han dissenyat 28.000 milions de p\u00e0gines web<\/strong>. Nosaltres l\u2019hem utilitzada en diversos projectes i, sincerament, \u00e9s una de les nostres preferides.<\/p>\n<p><a href=\"https:\/\/fonts.google.com\/specimen\/Open+Sans\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Veure Open Sans<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>3.\u00a0Lato<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-737\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/lato-1024x754-2.jpg\" alt=\"lato\" width=\"1024\" height=\"754\" \/><\/p>\n<p>Lato, dissenyada per \u0141ukasz Dziedzic, \u00e9s una sans serif utilitzada en 6.980 milions de llocs web. Ofereix una \u00e0mplia gamma de pesos, des d\u2019una negreta molt marcada fins a un pes ultralleuger. Aquesta tipografia em porta records especials, ja que si no vaig errat, va ser una de les primeres que vaig fer servir amb Google Fonts, deixant enrere la cl\u00e0ssica Arial.<\/p>\n<p><a href=\"https:\/\/fonts.google.com\/specimen\/Lato\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Veure Lato<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>4. Slabo 27px<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-738\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/slabo-1024x496-2.jpg\" alt=\"slabo\" width=\"1024\" height=\"496\" \/><\/p>\n<p>Dissenyada per John Hudson, Slabo 27px \u00e9s una tipografia for\u00e7a singular. Es tracta d\u2019una <strong>tipografia pensada espec\u00edficament per utilitzar-se a la mida concreta<\/strong> de 27px. Est\u00e0 orientada a entorns digitals, com el disseny web i el m\u00e0rqueting online. A m\u00e9s, <strong>tamb\u00e9 existeix la Slabo 13px<\/strong>. El fet d\u2019estar creada per a una mida concreta permet obtenir un <strong>resultat visual impecable<\/strong>.<\/p>\n<p><a href=\"https:\/\/fonts.google.com\/specimen\/Slabo+27px\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Veure Slabo 27px<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quan parlem de disseny web, ens referim a l\u2019estructuraci\u00f3 del contingut, a l\u2019\u00fas adequat de les imatges i a la import\u00e0ncia d\u2019escollir una o diverses bones tipografies que reforcin el disseny que volem transmetre. Sens dubte, la plataforma de refer\u00e8ncia a l\u2019hora de triar tipografies per a la web \u00e9s google\u00a0fonts: https:\/\/fonts.google.com\/ &nbsp; Google Fonts [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4078,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208],"class_list":["post-34444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona\" \/>\n<meta property=\"og:description\" content=\"Quan parlem de disseny web, ens referim a l\u2019estructuraci\u00f3 del contingut, a l\u2019\u00fas adequat de les imatges i a la import\u00e0ncia d\u2019escollir una o diverses bones tipografies que reforcin el disseny que volem transmetre. Sens dubte, la plataforma de refer\u00e8ncia a l\u2019hora de triar tipografies per a la web \u00e9s google\u00a0fonts: https:\/\/fonts.google.com\/ &nbsp; Google Fonts [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-15T16:46:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T05:22:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2543\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Els tipus de lletra m\u00e9s populars per al disseny web\",\"datePublished\":\"2017-05-15T16:46:41+00:00\",\"dateModified\":\"2026-04-21T05:22:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\"},\"wordCount\":414,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\"],\"inLanguage\":\"ca\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\",\"name\":\"Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg\",\"datePublished\":\"2017-05-15T16:46:41+00:00\",\"dateModified\":\"2026-04-21T05:22:08+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg\",\"width\":2543,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/","og_locale":"ca_ES","og_type":"article","og_title":"Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona","og_description":"Quan parlem de disseny web, ens referim a l\u2019estructuraci\u00f3 del contingut, a l\u2019\u00fas adequat de les imatges i a la import\u00e0ncia d\u2019escollir una o diverses bones tipografies que reforcin el disseny que volem transmetre. Sens dubte, la plataforma de refer\u00e8ncia a l\u2019hora de triar tipografies per a la web \u00e9s google\u00a0fonts: https:\/\/fonts.google.com\/ &nbsp; Google Fonts [&hellip;]","og_url":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/","og_site_name":"Code Barcelona","article_published_time":"2017-05-15T16:46:41+00:00","article_modified_time":"2026-04-21T05:22:08+00:00","og_image":[{"width":2543,"height":700,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Escrit per":"cd26Bc","Temps estimat de lectura":"2 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Els tipus de lletra m\u00e9s populars per al disseny web","datePublished":"2017-05-15T16:46:41+00:00","dateModified":"2026-04-21T05:22:08+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/"},"wordCount":414,"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg","articleSection":["Disseny i desenvolupament web"],"inLanguage":"ca"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/","url":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/","name":"Els tipus de lletra m\u00e9s populars per al disseny web - Code Barcelona","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg","datePublished":"2017-05-15T16:46:41+00:00","dateModified":"2026-04-21T05:22:08+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/codewebbarcelona.com\/ca\/les-fonts-mes-populars-disseny-web\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/las-fuentes-mas-populares-para-el-diseno-web-featured.jpg","width":2543,"height":700},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/ca\/#website","url":"https:\/\/codewebbarcelona.com\/ca\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/34444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/comments?post=34444"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/34444\/revisions"}],"predecessor-version":[{"id":34455,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/34444\/revisions\/34455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media\/4078"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media?parent=34444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/categories?post=34444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}