Tipografia é a arte e a técnica de organizar tipos para comunicar de forma eficaz. Envolve formatar texto e selecionar fontes apropriadas. Nesta lição, você aprenderá as melhores práticas para usar a tipografia de uma forma que melhore a legibilidade, hierarquia e acessibilidade. Vamos começar com a legibilidade. Você deve escolher fontes claras e simples para tornar seus designs fáceis de entender. Isso é particularmente importante para o texto principal do seu site. Os usuários têm mais probabilidade de interagir com seu conteúdo se a fonte for fácil de ler. Algumas fontes frequentemente usadas para desenvolvimento web são Roboto, Open Sans, Poppins, Lato e Barlow. Mas há muitos para escolher e você definitivamente encontrará um que atenda às suas necessidades. O texto também deve ser grande o suficiente para que todos possam lê-lo. Você deve tentar manter as linhas relativamente curtas. O número específico de caracteres por linha realmente depende do seu projeto. Mas manter as linhas curtas tornará o conteúdo mais fácil de ler. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-1.png" alt="Three levels of text hierarchy: 'Heading' in large bold serif, 'Subheading' in medium bold serif, and 'Text' in small regular weight" /> Você pode usar o tamanho da fonte para criar uma hierarquia visual para títulos, subtítulos, parágrafos e outros elementos. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-2.png" alt="G.E.A.R ACADEMY's landing page showing 'Learn to code — for free.', 'Build projects.', and 'Earn certifications.' in progressively smaller text, with a 'Get started (it's free)' button below" /> Por exemplo, o título principal em uma página da web deve ter uma fonte maior, seguido por subtítulos com tamanhos de fonte menores. Isso dará a cada elemento na hierarquia um tamanho de fonte específico que ajuda os usuários a navegar pela estrutura visualmente. Você deve usar no máximo duas ou três fontes para criar uma consistência visual. Usar muitas fontes pode tornar o texto mais difícil de ler e enfraquecer a identidade da sua marca. Isso também pode impactar a experiência do usuário ao aumentar o tempo de carregamento do site. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-3.png" alt="G.E.A.R ACADEMY's Style Guide Typography section on a dark background, listing Hack-ZeroSlash as the primary monospace font, Lato as the primary proportional font, and SaxMono as the logo font" /> Depois de escolher essas duas ou três fontes, use-as consistentemente em diferentes páginas e elementos. Essas fontes devem ser consistentes com o design geral da sua aplicação web, produto ou serviço. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-4.png" alt="Two versions of the same text side by side: the top version has a green checkmark and good whitespace between lines, while the bottom version has a red X and cramped, poorly spaced text" /> Você também deve usar espaços em branco para criar um equilíbrio visual e melhorar a legibilidade. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-5.png" alt="WCAG 2.1 Understanding Docs page showing Understanding SC 1.4.3: Contrast (Minimum) (Level AA), with explanations of contrast ratio requirements for large and small text" /> Para fins de acessibilidade, você deve seguir as Web Content Accessibility Guidelines. Estas diretrizes definem a proporção de contraste recomendada para o texto. Uma taxa de contraste mais alta torna o texto mais fácil de ler, especialmente para pessoas com deficiências visuais. Você também deve fornecer opções para ajustar o tamanho da fonte e evitar fontes complexas tanto quanto possível. Como regra geral, você deve usar fontes simples sempre que possível. Se o seu conteúdo for fácil de ler, os usuários têm mais probabilidade de interagir com ele. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-6.png" alt="Browser DevTools open alongside G.E.A.R ACADEMY's landing page in responsive mode, showing CSS styles applied to the page's heading elements" /> Uma dica final para trabalhar com tipografia é garantir que suas fontes sejam exibidas corretamente em diferentes tamanhos de tela e dispositivos. Tipografia é uma ferramenta poderosa para criar designs bonitos e experiências de usuário envolventes. Ao entender os fundamentos da tipografia e aplicar essas melhores práticas, você pode criar designs eficazes.