Visualizador de pesos de fonte

• Visualização instantânea dos pesos: veja na hora todos os pesos disponíveis de qualquer Google Font lado a lado. Nosso visualizador de pesos de fonte carrega a fonte escolhida direto do Google Fonts e renderiza todos os pesos - de Thin (100) a Black (900) - em uma só tela, sem recarregar a página.
• Visualizador de pesos de fonte online e seguro: nosso visualizador de pesos de fonte roda inteiramente no seu navegador. As fontes são carregadas direto do CDN do Google Fonts - nenhum dado é enviado a servidores e seu texto de visualização permanece totalmente privado no seu dispositivo.
• Visualizador de pesos de fonte sem instalação: use nosso visualizador de pesos de fonte direto em qualquer navegador, sem downloads, plugins ou conta. Veja os pesos de qualquer Google Font em qualquer dispositivo, em qualquer lugar, totalmente de graça.
• Vários modos de exibição: escolha entre Empilhado (linhas em tamanho real), Compacto (linhas menores para comparar rápido) ou Comparação. Filtre para mostrar só os pesos disponíveis, ajuste o tamanho da visualização de 14 px a 48 px e copie a declaração CSS font-weight de qualquer peso com um clique.

• Escolher o peso certo para a interface: use nosso visualizador de pesos de fonte para comparar como uma fonte fica em pesos diferentes antes de fixá-la no seu design system. Veja se 500 ou 600 funciona melhor nos seus títulos, ou se 300 é leve demais para o corpo de texto no tamanho desejado.
• Criação de escala tipográfica: crie uma escala tipográfica completa visualizando como os pesos interagem. Nosso visualizador de pesos de fonte mostra todos os pesos lado a lado para você escolher a combinação certa para títulos, subtítulos, corpo de texto e legendas.
• Pesquisa de combinações de fontes: pesquise combinações de fontes visualizando a faixa de pesos de cada candidata. Algumas fontes têm suporte limitado de pesos - nosso visualizador mostra claramente quais pesos estão disponíveis e quais não estão, evitando que você descubra lacunas depois da implementação.
• Testes de acessibilidade e legibilidade: teste a legibilidade do peso da fonte em tamanhos diferentes. Nosso visualizador de pesos de fonte permite ajustar o tamanho da visualização de 14 px a 48 px enquanto compara todos os pesos, ajudando a verificar se o peso escolhido é legível em tamanhos pequenos para o corpo de texto.
• Referência de CSS font-weight: use nosso visualizador de pesos de fonte como referência rápida ao escrever CSS. Cada cartão de peso mostra o valor numérico e o nome (Thin, Light, Regular, Medium, Bold etc.) com um botão de copiar em um clique da declaração CSS font-weight.
• Apresentações para clientes e revisões de design: mostre aos clientes toda a faixa de pesos de uma fonte proposta durante as revisões de design. Nosso visualizador de pesos de fonte renderiza a fonte com o texto real da marca do cliente, facilitando demonstrar como ela ficará em diferentes contextos de interface.

Um visualizador de pesos de fonte mostra todas as variantes de peso disponíveis de uma tipografia lado a lado - de Thin (100) a Black (900) - para você compará-las visualmente antes de escolher quais pesos incluir no seu projeto. Nem todas as fontes oferecem os nove pesos; nosso visualizador de pesos de fonte indica claramente quais pesos estão disponíveis em cada Google Font e acinzenta os que não estão. Todas as fontes são carregadas direto do CDN do Google Fonts - nenhum dado é enviado a servidores e seu texto de visualização permanece privado no seu dispositivo.

1. Selecione uma fonte: procure qualquer Google Font pelo nome na caixa de busca. O visualizador de pesos de fonte mostra as mais de 80 fontes disponíveis com sua categoria e quantidade de pesos. Clique em qualquer fonte para carregá-la na hora.
2. Veja todos os pesos: o visualizador de pesos de fonte renderiza todos os pesos (100-900) lado a lado com seu texto de visualização personalizado. Os pesos disponíveis aparecem por inteiro; os indisponíveis ficam acinzentados. Ative "Apenas disponíveis" para ocultar os indisponíveis.
3. Copie e use: clique no ícone de copiar de qualquer cartão de peso para copiar a declaração CSS font-weight. A seção de referência CSS no final traz a URL @import do Google Fonts e todos os valores font-weight disponíveis, prontos para colar na sua folha de estilos.

• 100 - Thin: o peso mais leve. Use com moderação, apenas em textos grandes de display - leve demais para corpo de texto em tamanhos pequenos.
• 300 - Light: um pouco mais leve que o regular. Funciona bem em subtítulos e textos secundários quando combinado com um peso mais forte nos títulos.
• 400 - Regular: o peso padrão. A escolha padrão para corpo de texto e a base da maioria das escalas tipográficas.
• 700 - Bold: o peso negrito padrão. Usado em títulos, ênfases e rótulos de interface. É o peso mais usado depois do Regular.

Cada peso de fonte carregado do Google Fonts aumenta as requisições de rede da sua página e o tamanho total do arquivo de fonte. Para a maioria dos projetos, carregar 2-3 pesos é suficiente - normalmente Regular (400), Medium ou SemiBold (500-600) para rótulos de interface e Bold (700) para títulos. Evite carregar pesos que você não usa. Nosso visualizador de pesos de fonte ajuda a identificar exatamente quais pesos você precisa antes de adicioná-los à sua URL de importação do Google Fonts, evitando o carregamento desnecessário de pesos que deixa sua página mais lenta.