13 fontes "fáceis de ler" e três pontos-chave sobre como escolhê-las.

2024/10/29

No site'Fontes fáceis de ler'A legibilidade da fonte tem um impacto significativo na experiência do usuário no design da Web.

Em particular, a prática de escolher e usar fontes adequadas em termos de acessibilidade da Web,É essencial atender às diretrizes das WCAG e garantir que o site seja de fácil utilização para todos os usuários.。

Os dois fatores a seguir são importantes para que uma fonte seja legível

(i) Visibilidade.
(ii) Acessibilidade.

Visibilidade significa que o tamanho da fonte, o espaçamento e o contraste são apropriados e que o texto é claramente reconhecível, enquanto acessibilidade significa que a fonte é fácil de ler, especialmente para usuários com deficiência visual ou de leitura.Ao escolher uma fonte que combine esses dois elementos, os usuários podem entender o conteúdo sem problemas, sem esforço visual.

Neste artigo,13 fontes típicas de fácil leitura.Designers e engenheiros que precisam produzir conteúdo altamente acessível são incentivados a ler este artigo.

13 fontes fáceis de ler que melhoram a acessibilidade.

Para melhorar a acessibilidade, a escolha das fontes usadas no design é importante, antes de tudo,Fontes fáceis de ler em termos de acessibilidade.A seguir, 13 fontes representativas sobre o assunto.

◆13 fontes acessíveis e de fácil leitura

Fontes UD: fontes de design universal (1) a (4)

Veja (1) a (4) (em verde) na tabela acima.Essas fontes com "UD" no nome são chamadas coletivamente de "fontes UD: fontes de design universal".

A fonte UD é,Fontes desenvolvidas para serem fáceis de ler para todos os usuários.Em particular,O design apresenta formas de letras concisas e fácil distinção visual, levando em consideração usuários com deficiência visual e usuários com dificuldades de leitura.。

As fontes UD são usadas, por exemplo, em instituições públicas no Japão, na sinalização de estações e na educação, e sua versatilidade também as torna eficazes no web design: o uso de fontes UD pode melhorar a acessibilidade de um site inteiro.

Fonte 1: UD Shingo.

Fonte Gothic UD, altamente legível, especialmenteInstalações públicas e placas informativas no Japão.Ele é amplamente adotado em uma variedade de configurações, incluindo

Fonte (2) UD Marugo

Em uma fonte gótica redonda para uma impressão mais suave,Materiais infantis e situações em que a familiaridade é necessária.Ele é usado nas seguintes áreas: é menos exigente visualmente e mais fácil de reconhecer.

Fonte (iii) Hiragino UD Mincho.

A fonte Mincho UD é elegante e legível, e foi projetada tendo em mente os idosos e os deficientes visuais,Visualmente legível, mantendo a beleza da fonte MinchoFonte.

Fonte 4: FOT-UD Kakugo.

As formas claras das letras, a espessura e o espaçamento ajustados das letras facilitam a leitura para todos, especialmente para pessoas com deficiências visuais, e é particularmente fácil de ler para pessoas com deficiências visuais.Instituições públicas, ambientes de saúde e o setor educacional.Recomenda-se que eles sejam usados em locais como

Fontes de fácil leitura que não sejam fontes UD (⑤-⑬)

Além das fontes UD, há várias outras fontes que são altamente visíveis e amigáveis à acessibilidade, embora essas fontes não sejam especificamente direcionadas a usuários com determinadas deficiências,Eles têm excelente visibilidade e versatilidade e são usados em uma variedade de ambientes digitais e impressos.

Essas fontes, usadas em muitos sites e aplicativos, são um elemento fundamental para tornar o conteúdo confortável e fácil de ler para todos os usuáriosUsado adequadamente como parte do design, ele pode melhorar a experiência do usuário geral do site.

Fonte 5: Yasashisa Gothic.

fonte gratuitaA fonte tem a reputação de ser fácil de ler, mas muito legível, com linhas grossas e uma quantidade razoável de espaço entre as letras, o que a torna visualmente menos cansativa,Materiais educacionais e web design para criançasTambém usado em.

Fonte 6: Genno Kaku Gothic.

Uma fonte de código aberto desenvolvida em conjunto pela Adobe e pelo Google, é uma fonte gótica altamente legível, com um design simples, mas projetada para facilitar a leitura,Ele é adequado para aplicativos e design global da Web, pois é multilíngue e japonês.

Fonte (vii) Noto Sans JP

Como a Genno Kaku Gothic, essa fonte de código aberto foi desenvolvida pelo Google e se concentra na legibilidade em japonês; ela mantém um design consistente em vários idiomas, inclusive o japonês,Web, aplicativos e material impressoEle é amplamente utilizado em áreas como

Fonte (viii) Meirio.

Fontes padrão a partir do Windows Vista.A fonte foi desenvolvida como uma "fonte", com ênfase especial na legibilidade na tela: o espaçamento das letras é ajustado automaticamente, melhorando muito a legibilidade na tela.Interface de usuário otimizada do site e do software, especialmente clara e fácil de ler em monitoresIsso o torna excelente em termos de acessibilidade na Web.

Fonte (ix) Arial.

Ela tem sido usada há muito tempo como fonte padrão no Windows e agora éFontes amplamente utilizadas em todo o mundoAltamente visível,Ele é usado com frequência, especialmente em mídia digital e impressa.Ela se caracteriza por seu design simples e é usada em muitas mídias como uma fonte de fácil leitura.

Fonte 10 Verdana.

Fontes projetadas para serem fáceis de ler em tamanhos pequenosO espaçamento entre os caracteres é amplo, o que é frequentemente usado em conteúdo digital e da Web, em que é necessária alta visibilidade na tela e legibilidade.

Fonte (11) Tahoma.

Uma fonte semelhante a Arial e Verdana, com espaçamento estreito entre as letras, mas excelente legibilidade e leitura, especialmenteLargura uniforme do texto, projetada para facilitar a visualização mesmo em telas com espaço limitado.A seguir, um resumo dos resultados do estudo.

Fonte ⑫Dyslexie.

Dislexia é,Fontes projetadas para pessoas com deficiências de leitura (dislexia).As letras são: cada letra tem um formato exclusivo, o que proporciona legibilidade, dificultando a confusão entre as letras.

Fonte⑬OpenDyslexic.

Assim como a Dyslexie, é uma fonte de código aberto projetada para pessoas com deficiências de leitura.Parte inferior das letras com design robusto, o que as torna estáveis e fáceis de ler.O texto foi projetado para ser lido sem problemas.

Há muitas outras fontes acessíveis e legíveis além dessas, incluindo as fontes UD.Selecionar a fonte certa para a ocasião, o meio e as necessidades do usuário em que ela é usada.é importante.

A próxima seção explicará exatamente que tipos de fontes são fontes "fáceis de ler".

"Visibilidade" e "acessibilidade" são importantes para fontes legíveis.

O segredo das "fontes fáceis de ler" é"Visibilidade" e "acessibilidade".É.Ambos são conceitos importantes relacionados a fontes, mas com conotações diferentes。

visibilidade

O que é visibilidade,Quão "claro" e "legível" é o texto.Uma fonte altamente visível refere-se a uma fonte que tem um formato de letra claro, é fácil de ser lida por qualquer pessoa e pode ser reconhecida prontamente porque as letras são colocadas a uma distância razoável umas das outras,As fontes que não são muito grossas, nem muito finas e que têm uma forma clara são altamente visíveis.

acessibilidade

A acessibilidade diz respeito ao fato de as fontes e o texto serem acessíveis a todos, ou seja"É fácil para todos lerem e entenderem?refere-se ao conforto de todos os usuários, incluindo usuários com deficiência visual, usuários com deficiência de leitura e idosos.

As fontes acessíveis não são apenas visíveis, mas também fáceis de usar para determinados usuários,Ele foi projetado para ser facilmente compatível com leitores de tela e outras ferramentas de suporte.

Combinar visibilidade e acessibilidade, de modo que a fonte seja acessível e fácil de ler para muitos usuários.Ambas são considerações centrais na seleção de fontes e têm um impacto significativo na qualidade do design da Web e do material impresso.

A seção a seguir explica quais elementos de fonte são necessários para garantir a visibilidade e a acessibilidade.

Dois elementos básicos de uma fonte legível

Aqui,Elementos básicos de fontes para garantir visibilidade e acessibilidade.Esta seção explica os dois principais fatores que são importantes.

Elemento 1) Tamanho da fonte.

O tamanho da fonte tem um impacto significativo na facilidade de leitura do texto; um texto muito pequeno é difícil para os olhos e pode ser um grande obstáculo, especialmente para usuários com baixa visão e idosos.

Geral,Na Web, recomenda-se um tamanho mínimo de 16px (pixels).Veja abaixo os diferentes tamanhos de cada tamanho de px.

Tamanhos diferentes de fontes na Web

10px	O tamanho da fonte para esse texto é 10px.
12px	O tamanho da fonte para esse texto é 12px.
14px	O tamanho da fonte para esse texto é 14px.
16px (tamanho mínimo recomendado)	O tamanho da fonte para esse texto é 16px.
18px	O tamanho da fonte para esse texto é 18px.
20px	O tamanho da fonte para esse texto é 20px.

No site, por exemplo,Use negrito de 20px para os títulos, 16px para o texto do corpo, etc.é geralmente um dos fatores mais importantes em termos de legibilidade, pois a escolha do tamanho correto da fonte pode proporcionar uma leitura confortável para todos.

Elemento (ii) Tipo de letra.

Os tipos de letra das fontes incluem principalmenteFormas sans-serif e serifExistem, por conveniência,Gothic e Mincho em fontes japonesas.Cada tipo de letra é compatível com diferentes aplicações e situações.

◆ corpos sem serifa e com serifa

sem serifa	estilo serifado

O corpo sans-serif é,Design simples, sem decoração nas bordas das letras.Em particular.Para alta visibilidade em ambientes digitais e tamanhos pequenose são frequentemente usados em sites e aplicativos móveis.Nos monitores de tela, as fontes sem serifa são comumente usadas.

Corpos serifados, por outro lado,Ele tem pequenas decorações (serifas) nas bordas das letras e é adequado para material impresso e textos mais longos.O estilo serifado dá uma impressão suave e rítmica em todo o texto,Geralmente usado em ocasiões tradicionais e formaisNo entanto,A visibilidade em tamanhos pequenos na tela pode ser ruim.

Ao considerar a acessibilidade em ambientes digitais, como sites, a sem serifa (gótica) é mais adequada; no entanto, quando se trata de leitura longa e legibilidade do texto, como em livros, o design suave e confortável da serifa (mincho) ajuda.Por exemplo, o Hiragino UD Mincho foi projetado com detalhes Mincho claros para garantir a acessibilidade de pessoas com deficiências visuais, além de proporcionar uma aparência agradável e uma sensação de tranquilidade.

Portanto, dependendo da mídia e da situação, é importante escolher uma fonte que melhore a acessibilidade e, ao mesmo tempo, mantenha o tom geral e a impressão do documento, não apenas a visibilidade.

Três pontos importantes sobre como escolher uma fonte de fácil leitura em termos de acessibilidade na Web.

Na seção a seguir, vamos nos concentrar na acessibilidade da Web e explicar três pontos principais sobre como escolher ou usar fontes que sejam fáceis de ler.

Ponto 1: Baseado nas diretrizes das WCAG.

WCAG（Diretrizes de acessibilidade de conteúdo da Web）は、Diretrizes estabelecidas para garantir que o conteúdo da Web seja acessível a todos.Ao escolher fontes para acessibilidade na Web,É importante seguir os padrões definidos nas WCAG。

Um exemplo de diretriz é que a relação de contraste entre as cores do fundo e do texto deve ser de pelo menos 4,5:1, para que os usuários com deficiências visuais ou características de visão de cores possam ler o texto com clareza.

Além disso, o uso de sans-serif (gótico) é geralmente recomendado, pois é mais legível em uma tela do que a serifa (ming-cho).

Na seleção e no uso de fontes,O cumprimento dessas diretrizes das WCAG garantirá que o site seja fácil de usar para todos.Para obter mais informações sobre as WCAG, consulte o artigo a seguir, que pode ser lido em conjunto com este artigo.

Artigos relacionados:O WCAG é um padrão internacional de acessibilidade baseado em quatro princípios

Ponto (ii) Garantir a escalabilidade (extensibilidade) da fonte.

Para a acessibilidade na Web, é importante que as fontes sejam escalonáveis, ou seja, que possam ser usadas em uma variedade de formatos, incluindo: a) pela primeira vez, b) pela primeira vez, c) pela primeira vez e d) pela primeira vez,Os usuários devem ser capazes de ajustar o tamanho do texto usando as configurações do navegador e as funções de ampliação.é necessário.

Ao especificar o tamanho da fonte na construção de sites, por exemplo, em CSS, use as unidades relativas 'em' e 'rem' em vez da unidade absoluta 'px', para que os usuários possam alterar livremente o tamanho do texto.

Além disso,Fontes projetadas para evitar a corrupção da exibição em diferentes dispositivos.são mais escaláveis - por exemplo, um site bem organizado em um PC deve poder ser visualizado em uma tela menor, como um smartphone ou tablet, sem distorcer ou corromper as fontes.

Ponto 3) É compatível com leitores de tela?

Usado por usuários com deficiência visual para acessar o conteúdo da Web.Fontes com um "leitor de tela" totalmente funcional.Também é importante escolher o

No entanto, não há uma especificação clara para o suporte ou não suporte a leitores de tela nas fontes,Fontes excessivamente decorativas ou fontes especiais contendo símbolos ou pictogramas podem não ser reconhecidas corretamente pelos leitores de tela.Portanto,O uso de fontes simples sem serifa ou padrão (por exemplo, Arial, Verdana) reduz o risco de confusão ao ler em voz alta nos leitores de tela。

Em seguida, usando a estrutura apropriada da página, a marcação HTML ou o texto alternativo, etc., os leitores de tela podem funcionar adequadamente.

Artigos relacionados:Explicação de como os leitores de tela são usados e cinco ferramentas típicas.

Começando com opções de fontes como estas,Maneiras específicas de apoiar a acessibilidade da Web com base nas WCAGPara obter mais informações sobre assuntos como'Web Accessibility Implementation Guidebook', publicado pela Digital Agency.Recomenda-se enfaticamente que os projetistas e engenheiros deem uma olhada nela na íntegra, pois ela está resumida em detalhes na seção a seguir.

Referência:Guia de implementação de acessibilidade da Web.

Vamos agora discutir técnicas específicas para melhorar a legibilidade das fontes.

Três técnicas práticas para melhorar a legibilidade

Há vários pontos importantes que devem ser levados em conta ao usar as fontes: aqui apresentamos três técnicas práticas para melhorar a legibilidade das fontes e explicamos quais inovações específicas podem ajudar.

Técnica 1: Ajuste do espaçamento entre linhas e entre letras.

O ajuste adequado do espaçamento entre linhas e entre letras é um elemento que pode melhorar significativamente a legibilidade do texto.Se o espaçamento entre linhas for muito estreito, o texto ficará bloqueado, dificultando a movimentação suave dos olhosIsso torna a leitura mais pesada e difícil para o leitor, ao contrário,Se as linhas forem muito largas, o texto perderá a coerência e será difícil se concentrar na leitura。

O texto a seguir está no mesmo tamanho de fonte (Mayrio), apenas com o espaçamento entre linhas e entre letras alterado.

Diferenças na legibilidade devido ao espaçamento entre linhas e entre caracteres

espaçamento entre linhas e espaçamento entre caracteres.apropriadofrase conhecida	espaçamento entre linhas e espaçamento entre caracteres.imprópriofrase conhecida

Geral,O ideal é que o espaçamento entre linhas seja de 1,5 a 2x.(Da mesma forma, o espaçamento entre caracteres (kerning) precisa ser ajustado.Se as letras estiverem muito próximas umas das outras, elas parecerão borradas e a visibilidade será reduzida, especialmente em tamanhos de fonte pequenos.O espaçamento adequado entre as letras ajuda a manter a legibilidade, fazendo distinções claras entre as letras individuais.

Com bastante espaço entre as linhas e os caracteres, além de quebras de linha e recuos adequados, a fonte, a legibilidade e a leitura do texto são ainda mais aprimoradas.

Técnica 2: Contraste e esquemas de cores.

O contraste entre o texto e o plano de fundo é um dos principais determinantes da visibilidade: o alto contraste, por exemplo, uma combinação de texto preto e plano de fundo branco, é o mais visível e fácil de ser lido por todos,Se as cores do plano de fundo e do texto estiverem próximas ou em combinações de baixo contraste (por exemplo, texto branco em um plano de fundo cinza claro), o texto será difícil de ser visto eO conteúdo da tela pode ser difícil de entender, especialmente para usuários com baixa visão ou outras deficiências visuais.

A seguir, uma comparação de imagens com o mesmo tom de esquema de cores, mas com diferentes taxas de contraste,É evidente que as taxas de alto contraste são claramente mais fáceis de ver.。

Diferenças de visibilidade devido à taxa de contraste

Também é importante escolher um esquema de cores que leve em conta os usuários com características de visão de cores, por exemplo, evitando combinações de vermelho e verde e seguindo as diretrizes das WCAG,Relação de contraste de 4,5:1 ou melhorMantenha o esquema de cores acessível, pois o esquema geral de cores é um fator que melhora a legibilidade da fonte.

Ao projetar mantendo a taxa de contraste adequada, uma ferramenta chamada "verificador de contraste" pode ser uma ferramenta eficiente.Um verificador de contraste útil é descrito no artigo a seguir, que pode ser de seu interesse.

Artigos relacionados:Cinco "verificadores de contraste" fáceis de usar para os responsáveis.

Técnica 3) Consistência e uso de fontes.

A consistência das fontes nos sites e no material impresso é importante para que o leitor compreenda facilmente as informações.O uso extensivo de fontes diferentes ao longo do texto pode causar confusão visual e contribuir para dificultar a leitura do texto.Em particular, o uso de fontes consistentes para o conteúdo principal e os títulos facilita a compreensão do fluxo de informações e a manutenção de um design unificado.

Por outro lado, pode ser eficaz usar fontes diferentes, por exemplo,O uso de fontes diferentes para os títulos e para o corpo do texto cria uma distinção visual e facilita a identificação de informações importantes.No entanto,O excesso de fontes pode reduzir a visibilidade e também dificultar a compreensãoÉ importante escolher com cuidado.

Agora que discutimos as fontes acessíveis em detalhes, vamos dar uma olhada em alguns sites que realmente usam essas fontes acessíveis.

Três sites que colocam em prática as "fontes fáceis de ler".

Aqui, por meio de fontes fáceis de ler, com excelente visibilidade e acessibilidade,Três sites que estão melhorando a acessibilidade geral do site na Web.Esses sites são reconhecidos por suas opções de fontes e design acessíveis.

Site 1: agência digital.

O site oficial da Digital Agency foi projetado com foco na acessibilidade; a fonte é a seguinte,Ele usa a Noto Sans JP, uma fonte de código aberto que leva em consideração a visibilidade e a acessibilidade.

Além disso, foram implementadas várias melhorias de acessibilidade, como a estrutura de cabeçalhos para usuários de leitores de tela e a promoção do suporte à leitura em voz alta para arquivos PDF; essas inovações garantem que até mesmo usuários com deficiência visual possam usar o site confortavelmente.

Site oficial da Digital Agency.

https://www.digital.go.jp/

Local 2: Apple

O site oficial da Apple, que enfatiza a acessibilidade em seus produtos e serviços, é um excelente exemplo de um site que é considerado fácil de navegar por muitos usuários.Esquemas de cores e tamanhos de fonte apropriados, bem como margens adequadasA visibilidade e a acessibilidade são totalmente levadas em consideração pelo

O design simples e claro, baseado em um esquema de cores monocromáticas com uma alta taxa de contraste e uma fonte sem serifa (gótica), fornece informações sobre o produto e o suporte de forma bem legível.

◆Site oficial da Apple

https://support.apple.com/ja-jp/accessibility

Site (iii) BBC.

O site da BBC tomou todo o cuidado para garantir que a fonte seja legível ao fornecer conteúdo de notícias.A fonte usada é uma fonte original chamada 'Reith', que dá uma impressão formal e, ao mesmo tempo, garante a legibilidade e a leitura.

A BBC também é um site exemplar em termos de suporte à acessibilidade, de acordo com os padrões WCAG.

Site oficial da BBC

https://www.bbc.com/

resumo

O segredo para escolher uma fonte legível é aumentar a visibilidade e a acessibilidade ao mesmo tempo.A alta visibilidade garante que todos possam reconhecer imediatamente o texto e acessar as informações sem problemas, enquanto a acessibilidade garante que os usuários com visão limitada, deficiências de leitura ou idosos possam ler o texto confortavelmente.

A primeira coisa em que os designers e engenheiros devem trabalhar no futuro é,Seleção de fontes com base nas diretrizes WCAG.Também é importante projetar o texto de modo que ele não se desfaça em diferentes dispositivos.

Além disso,Verificação por meio de validação de leitor de tela, teste de usuário e teste A/B para ver se os usuários realmente acham as fontes fáceis de lere promover melhorias adequadas.

É importante que os futuros sites estejam cientes das opções de fontes acessíveis para que todos os usuários possam usar sites e aplicativos confortavelmente.