{"id":3326,"date":"2024-07-01T16:16:34","date_gmt":"2024-07-01T16:16:34","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=3326"},"modified":"2025-11-05T15:04:18","modified_gmt":"2025-11-05T15:04:18","slug":"o-que-sao-fontes-da-web","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-sao-fontes-da-web\/","title":{"rendered":"O que s\u00e3o fontes da web?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#how-do-i-choose-fonts-for-my-website\">Como escolho fontes para o meu site?<\/a><\/li><li><a href=\"#what-is-website-typography\">O que \u00e9 tipografia de site?<\/a><\/li><li><a href=\"#which-font-is-best-for-reading-on-screen\">Qual fonte \u00e9 melhor para leitura na tela?<\/a><\/li><li><a href=\"#what-is-the-best-font-size-for-a-website\">Qual \u00e9 o melhor tamanho de fonte para um site?<\/a><\/li><li><a href=\"#what-exactly-is-a-font-versus-typeface\">O que exatamente \u00e9 uma fonte versus tipo de letra?<\/a><\/li><li><a href=\"#what-are-font-weights-and-styles\">O que s\u00e3o pesos e estilos de fonte?<\/a><\/li><li><a href=\"#what-are-web-safe-fonts\">O que s\u00e3o fontes seguras para a web?<\/a><\/li><li><a href=\"#how-many-fonts-should-a-website-utilize\">Quantas fontes um site deve utilizar?<\/a><\/li><li><a href=\"#is-it-crucial-that-font-consistency-be-maintained-across-all-website-pages\">\u00c9 crucial que a consist\u00eancia da fonte seja mantida em todas as p\u00e1ginas do site?<\/a><\/li><li><a href=\"#how-do-web-fonts-affect-website-performance\">Como as fontes da web afetam o desempenho do site?<\/a><\/li><li><a href=\"#where-can-i-locate-free-web-fonts\">Onde posso localizar fontes da web gratuitas?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"how-do-i-choose-fonts-for-my-website\" style=\"color:#231a50;font-size:32px\"><strong>Como escolho fontes para o meu site?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Selecionar fontes que reflitam sua presen\u00e7a online<strong><em> <\/em><\/strong>A est\u00e9tica e a facilidade de uso da sua presen\u00e7a online s\u00e3o essenciais ao desenvolver sua apar\u00eancia geral e facilidade de uso. Aqui est\u00e3o alguns fatores que voc\u00ea deve ter em mente ao selecionar fontes:<\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>A personalidade da sua marca:<\/strong> Selecione as fontes que melhor refletem a imagem e o tom da sua marca.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Priorize a legibilidade:<\/strong> Escolha fontes que sejam f\u00e1ceis de ler em v\u00e1rios tamanhos, especialmente o corpo do texto.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Concentre-se na hierarquia:<\/strong> Usar fontes diferentes cria uma hierarquia visual; use fontes maiores e mais ousadas para t\u00edtulos e fontes menores para o corpo do texto.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Contraste e harmonia:<\/strong> Combine fontes que contrastem, mas que ainda criem uma apar\u00eancia elegante, como uma mistura de fontes serifadas e sem serifa, que ainda crie uma apar\u00eancia agrad\u00e1vel.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Limite suas op\u00e7\u00f5es:<\/strong><em> <\/em>Muitas fontes podem fazer com que seu site pare\u00e7a desordenado \u2013 use apenas 2 a 3 fontes para m\u00e1xima coer\u00eancia.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-is-website-typography\" style=\"color:#231a50;font-size:32px\"><strong>O que \u00e9 tipografia de site?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">A tipografia de sites refere-se \u00e0 arte de organizar fontes em sites para m\u00e1xima legibilidade e apelo visual, incluindo a sele\u00e7\u00e3o de fontes, o ajuste de tamanhos e espa\u00e7amento conforme necess\u00e1rio e a cria\u00e7\u00e3o de um layout geral que melhora a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"which-font-is-best-for-reading-on-screen\" style=\"color:#231a50;font-size:32px\"><strong>Qual fonte \u00e9 melhor para leitura na tela?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Fontes sem serifa, como Open Sans, Roboto ou Lato, tendem a fornecer melhor legibilidade na tela devido \u00e0s suas linhas claras e formas de letras simples; no entanto, algumas fontes com serifa, como Georgia, ainda podem funcionar para o corpo do texto em tamanhos maiores.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nExperimente diferentes combina\u00e7\u00f5es de fontes at\u00e9 descobrir qual funciona melhor com seu conte\u00fado e p\u00fablico. Considere usar o Fontjoy ou ferramentas semelhantes para ajudar a encontrar fontes complementares.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-is-the-best-font-size-for-a-website\" style=\"color:#231a50;font-size:32px\"><strong>Qual \u00e9 o melhor tamanho de fonte para um site?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">O tamanho de fonte ideal para o corpo do texto \u00e9 de 16 pixels. No entanto, isso pode variar dependendo do seu p\u00fablico-alvo e da sele\u00e7\u00e3o da fonte. T\u00edtulos e subt\u00edtulos podem ser exibidos em fontes maiores (18-20 pixels).<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nCertifique-se de que a legibilidade para todos os usu\u00e1rios seja garantida ao testar os tamanhos de fonte em v\u00e1rios dispositivos e resolu\u00e7\u00f5es de tela. Utilize t\u00e9cnicas de design responsivo, como ajuste din\u00e2mico de tamanho da fonte, para uma visualiza\u00e7\u00e3o ideal em diferentes telas.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-exactly-is-a-font-versus-typeface\" style=\"color:#231a50;font-size:32px\"><strong>O que exatamente \u00e9 uma fonte versus tipo de letra?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Fam\u00edlias tipogr\u00e1ficas referem-se a fam\u00edlias de fontes com caracter\u00edsticas de design compartilhadas (por exemplo, Times New Roman). Fontes referem-se a estilos espec\u00edficos dentro dessa fam\u00edlia (por exemplo, Times New Roman Bold).<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-are-font-weights-and-styles\" style=\"color:#231a50;font-size:32px\"><strong>O que s\u00e3o pesos e estilos de fonte?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">A espessura da fonte refere-se \u00e0 grossura dos tra\u00e7os dentro de uma fam\u00edlia tipogr\u00e1fica (como light, regular e bold). Os estilos de fonte referem-se a varia\u00e7\u00f5es como it\u00e1lico, obl\u00edquo ou condensado.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-are-web-safe-fonts\" style=\"color:#231a50;font-size:32px\"><strong>O que s\u00e3o fontes seguras para a web?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Fontes seguras para a web s\u00e3o fontes instaladas por padr\u00e3o na maioria dos computadores e dispositivos. Quando usadas por sites, as fontes seguras para a web devem ser exibidas corretamente para quase todos os usu\u00e1rios, independentemente do sistema operacional ou tipo de dispositivo \u2013 exemplos de fontes seguras para a web incluem Arial, Verdana, Georgia Times New Roman e Tahoma. Elas s\u00e3o uma alternativa confi\u00e1vel quando as fontes da web n\u00e3o est\u00e3o dispon\u00edveis.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"how-many-fonts-should-a-website-utilize\" style=\"color:#231a50;font-size:32px\"><strong>Quantas fontes um site deve utilizar?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Ao projetar a sele\u00e7\u00e3o de fontes do seu site, procure selecionar duas ou tr\u00eas fontes para alcan\u00e7ar uma est\u00e9tica elegante e equilibrada; uma fonte para t\u00edtulos, outra para o corpo do texto e uma terceira para acentuar ou destacar elementos especiais \u00e9 comumente usado.<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Esta diretriz ajuda a criar um site atraente e f\u00e1cil de ler. No entanto, esta n\u00e3o \u00e9 uma regra r\u00edgida; alguns sites podem optar por usar mais ou menos fontes, dependendo de seus objetivos de design e necessidades de conte\u00fado exclusivos.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"is-it-crucial-that-font-consistency-be-maintained-across-all-website-pages\" style=\"color:#231a50;font-size:32px\"><strong>\u00c9 crucial que a consist\u00eancia da fonte seja mantida em todas as p\u00e1ginas do site?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Sim. A consist\u00eancia tipogr\u00e1fica \u00e9 necess\u00e1ria para apar\u00eancias profissionais e experi\u00eancias do usu\u00e1rio, ao mesmo tempo em que aprimora a legibilidade e melhora o reconhecimento da marca.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"how-do-web-fonts-affect-website-performance\" style=\"color:#231a50;font-size:32px\"><strong>Como as fontes da web afetam o desempenho do site?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Fontes da web podem impactar significativamente o desempenho do site; no entanto, com t\u00e9cnicas de otimiza\u00e7\u00e3o adequadas, como usar menos fontes e aproveitar o cache do navegador, os efeitos geralmente s\u00e3o m\u00ednimos.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"where-can-i-locate-free-web-fonts\" style=\"color:#231a50;font-size:32px\"><strong>Onde posso localizar fontes da web gratuitas?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Existem muitos recursos dispon\u00edveis online que oferecem acesso gratuito \u00e0s suas fontes da web, mas certifique-se de verificar os acordos de licenciamento antes de utiliz\u00e1-las:<\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><a href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Google Fonts:<\/strong><\/a> Inclui uma grande cole\u00e7\u00e3o de fontes de c\u00f3digo aberto.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><a href=\"https:\/\/www.fontsquirrel.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Font Squirrel<\/strong><\/a><strong>:<\/strong> Oferece uma sele\u00e7\u00e3o personalizada de fontes gratuitas de alta qualidade, adequadas para uso comercial.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><a href=\"https:\/\/www.dafont.com\/pt\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>DaFont:<\/strong><\/a> Fornece acesso a uma vasta biblioteca com diversos estilos de fontes, incluindo fontes decorativas e tem\u00e1ticas.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"conclusion\" style=\"color:#231a50;font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Fontes da web podem ser um meio extremamente eficaz de melhorar o design e a experi\u00eancia do usu\u00e1rio do site. Ao escolh\u00ea-las e aplic\u00e1-las cuidadosamente aos designs de seus sites, os designers podem aumentar o apelo visual, a legibilidade e a identifica\u00e7\u00e3o da marca em uma escala mais ampla - com tantas fontes ao nosso alcance, a express\u00e3o criativa se torna ilimitada!<\/p>","protected":false},"excerpt":{"rendered":"<p>How do I choose fonts for my website? Selecting fonts that reflect your online presence&#8217;s aesthetic and user-friendliness is critical when developing its overall appearance and user-friendliness. Here are a few factors you should keep in mind when selecting fonts: What is website typography? Website typography refers to the art of organizing typefaces on websites [&hellip;]<\/p>","protected":false},"author":39,"featured_media":3355,"template":"","answers_category":[28],"class_list":["post-3326","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7353,"card_image":3355,"content":[{"acf_fc_layout":"header_section","title":"O que s\u00e3o fontes da web?","descriptions":"<span style=\"font-weight: 400;\">Web fonts are digital typefaces designed specifically for use on websites. <\/span>\r\n\r\nAs opposed to system fonts that come preinstalled on devices, these web fonts can be downloaded from servers when visitors arrive at any given website and ensure consistent typography across platforms.","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Focus on design","body":"While web fonts offer versatility in design aspects, standard fonts aren't as varied as web fonts are."},{"label":"Prioritize readability","body":"Choose legible fonts like Open Sans for body text and add serif fonts like Georgia for larger headings to create an overall balanced appearance."},{"label":"Optimize for speed","body":"Although web fonts may have some impact on loading times, optimizing techniques can minimize this impact for an optimal user experience."}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/3326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/3355"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=3326"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=3326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}