Tipografia da web

As fontes da Web permitem que os web designers usem fontes que não estão instaladas no computador do visualizador.

A tipografia da Web , como a tipografia em geral, é o design das páginas – seu layout e opções de tipo de letra . Ao contrário da tipografia tradicional baseada em impressão (onde a página é fixada uma vez composta ), as páginas destinadas à exibição na World Wide Web apresentam desafios técnicos adicionais e - dada a sua capacidade de alterar a apresentação dinamicamente - oportunidades adicionais. Os primeiros designs de páginas da web eram muito simples devido às limitações tecnológicas; designs modernos usam Cascading Style Sheets (CSS), JavaScript e outras técnicas para entregar a visão do tipógrafo e do cliente.

Quando o HTML foi criado, os tipos de letra e os estilos eram controlados exclusivamente pelas configurações de cada navegador da web . Não havia nenhum mecanismo para páginas individuais da Web controlarem a exibição de fontes até que a Netscape introduziu o fontelemento em 1995, que foi então padronizado na especificação HTML 3.2. No entanto, a fonte de computador especificada pelo fontelemento tinha que ser instalada no computador do usuário ou uma fonte substituta, como a fonte sans-serif ou monoespaçada padrão de um navegador , seria usada. A primeira especificação CSS foi publicada em 1996 e fornecia os mesmos recursos.

A especificação CSS2 foi lançada em 1998 e tentou melhorar o processo de seleção de fontes adicionando correspondência, síntese e download de fontes. Essas técnicas não ganharam muito uso e foram removidas na especificação CSS2.1. No entanto, o Internet Explorer adicionou suporte para o recurso de download de fontes na versão 4.0 , lançada em 1997. [1] O download de fontes foi posteriormente incluído no módulo de fontes CSS3, e desde então foi implementado no Safari 3.1 , Opera 10 e Mozilla Firefox 3.5 . Posteriormente, isso aumentou o interesse pela tipografia da Web, bem como pelo uso de download de fontes.

CSS1

Na primeira especificação CSS, [2] os autores especificaram as características da fonte por meio de uma série de propriedades:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

Todas as fontes foram identificadas apenas pelo nome. Além das propriedades mencionadas acima, os designers não tinham como estilizar as fontes e não existia nenhum mecanismo para selecionar fontes não presentes no sistema cliente.

Fontes seguras para a Web

Fontes seguras para a Web são fontes de computador que podem razoavelmente estar presentes em uma ampla variedade de sistemas de computador e usadas por autores de conteúdo da Web para aumentar a probabilidade de o conteúdo ser exibido na fonte escolhida. Se um visitante de um site não tiver a fonte especificada, seu navegador tentará selecionar uma alternativa semelhante, com base nas fontes substitutas e famílias genéricas especificadas pelo autor ou usará a substituição de fontes definida no sistema operacional do visitante.

Fontes principais da Microsoft para a Web

Desde que foram lançadas no programa Core Fonts for the Web da Microsoft , Arial, Georgia e Verdana se tornaram três fontes de fato da Web.

Para garantir que todos os usuários da Web tivessem um conjunto básico de fontes, a Microsoft iniciou a iniciativa Core Fonts for the Web em 1996 (encerrada em 2002). As fontes lançadas incluem Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings e Verdana —sob um EULA que as tornou distribuíveis gratuitamente, mas também limitou alguns direitos ao seu uso. Sua alta taxa de penetração os tornou um produto básico para web designers. No entanto, a maioria das distribuições Linux não inclui essas fontes por padrão.

CSS2 tentou aumentar as ferramentas disponíveis para desenvolvedores da Web adicionando síntese de fontes, correspondência aprimorada de fontes e a capacidade de baixar fontes remotas. [3]

Algumas propriedades de fonte CSS2 foram removidas do CSS2.1 e posteriormente incluídas no CSS3. [4] [5]

Fontes substitutas

A especificação CSS permite que várias fontes sejam listadas como fontes substitutas. [6] Em CSS, a font-familypropriedade aceita uma lista de fontes separadas por vírgula para usar, assim:

família de fontes : "Nimbus Sans L" , Helvetica , Arial , sans-serif ;    

A primeira fonte especificada é a fonte preferida. Se esta fonte não estiver disponível, o navegador da Web tentará usar a próxima fonte da lista. Se nenhuma das fontes especificadas for encontrada, o navegador exibirá sua fonte padrão. Esse mesmo processo também acontece por caractere se o navegador tentar exibir um caractere que não está presente na fonte especificada.

Famílias de fontes genéricas

Para dar aos designers da Web algum controle sobre a aparência das fontes em suas páginas da Web, mesmo quando as fontes especificadas não estão disponíveis, a especificação CSS permite o uso de diversas famílias de fontes genéricas. Essas famílias são projetadas para dividir as fontes em diversas categorias com base em sua aparência geral. Elas são comumente especificadas como as últimas de uma série de fontes substitutas, como último recurso no caso de nenhuma das fontes especificadas pelo autor estar disponível. Durante vários anos, houve cinco famílias genéricas: [6]

Sem serifa

Fontes que não possuem marcações decorativas ou serifas em suas letras. Essas fontes costumam ser consideradas mais fáceis de ler nas telas. [7]

Serif

Fontes que possuem marcações decorativas, ou serifas, presentes em seus caracteres. Essas fontes são tradicionalmente usadas em livros impressos.

Monoespaçado

Fontes em que todos os caracteres são igualmente largos.

Cursiva

Fontes que lembram escrita cursiva. Essas fontes podem ter uma aparência decorativa, mas podem ser difíceis de ler em tamanhos pequenos, por isso geralmente são usadas com moderação.

Fantasia

Fontes que podem conter símbolos ou outras propriedades decorativas, mas ainda representam o caractere especificado.

Fontes CSS trabalhando no rascunho 4 com menor suporte ao navegador

A partir de fevereiro de 2024 , o Grupo de Trabalho CSS do W3C propõe que os sistemas especifiquem uma fonte padrão usando uitags; [8] na mesma data, estes ainda não são amplamente suportados. [9]

  • Interface do sistema
    Fontes padrão em um determinado sistema: o objetivo desta opção é permitir que o conteúdo da web se integre à aparência do sistema operacional nativo.
  • ui-serif
    Fontes padrão em um determinado sistema em estilo serifado
  • ui-sans-serif
    Fontes padrão em um determinado sistema em estilo sem serifa
  • ui-monoespaço
    Fontes padrão em um determinado sistema em estilo monoespaçado
  • arredondado pela interface do usuário
    Fontes padrão em um determinado sistema em estilo arredondado
  • Emoji
    Fontes usando emoji
  • Matemática
    Fontes para fórmulas e expressões matemáticas complexas.
  • Fangsong ( chinês :仿宋体)
    • Fontes chinesas que estão entre as formas serifadas Song e cursivas Kai. Este estilo é frequentemente usado para documentos governamentais.

Fontes da web

História

Uma técnica para consultar e baixar automaticamente fontes remotas foi especificada pela primeira vez na especificação CSS2, que introduziu a construção. Na época, a obtenção de arquivos de fontes da web era controversa porque fontes destinadas a serem usadas apenas em determinadas páginas da web também podiam ser baixadas e instaladas violando a licença de fontes. [10]@font-face

A Microsoft adicionou pela primeira vez suporte para fontes EOT para download no Internet Explorer 4 em 1997. Os autores tiveram que usar a ferramenta proprietária WEFT para criar um arquivo de fonte subconjunto para cada página. EOT mostrou que webfonts poderiam funcionar e o formato foi usado em sistemas de escrita não suportados por sistemas operacionais comuns. No entanto, o formato nunca obteve ampla aceitação e acabou sendo rejeitado pelo W3C. [11]

Em 2006, Håkon Wium Lie iniciou uma campanha contra o uso de EOT e preferiu que os navegadores da web suportassem formatos de fonte comumente usados. [12] [13] [14] O suporte para os formatos de fonte TrueType e OpenType comumente usados ​​​​foi implementado no Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 e Internet Explorer 9 .

Em 2010, o método de compressão WOFF para fontes TrueType e OpenType foi submetido ao W3C pela Mozilla Foundation , Opera Software e Microsoft , e os navegadores desde então adicionaram suporte. [15] [16] [17]

O Google Fonts foi lançado em 2010 para servir webfonts sob licenças de código aberto . Até 2016, mais de 800 famílias de fontes da web estão disponíveis. [18]

Webfonts se tornaram uma ferramenta importante para web designers e a partir de 2016 a maioria dos sites usa webfonts. [19]

Formatos de arquivo

Usando uma técnica específica de incorporação CSS [20] é possível incorporar fontes de forma que funcionem com IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ e Chrome 4.0+. Isso permite que a grande maioria dos usuários da Web acesse essa funcionalidade. Algumas fundições comerciais se opõem à redistribuição de suas fontes. Por exemplo, Hoefler & Frere-Jones afirmam que, embora "... [apoiem] com entusiasmo o surgimento de uma Web mais expressiva, na qual os designers possam usar fontes on-line de forma segura e confiável", a distribuição atual de fontes usando é considerado "distribuição ilegal" pela fundição e não é permitido. [21] Em vez disso, Hoefler & Co. oferece um sistema proprietário de entrega de fontes enraizado na nuvem. Muitas outras fundições de tipos comerciais abordam a redistribuição de suas fontes oferecendo uma licença específica, conhecida como licença de fontes da web, que permite o uso do software de fontes para exibir conteúdo na web, um uso normalmente proibido por licenças básicas de desktop. Naturalmente, isso não interfere nas fontes e fundições sob licenças gratuitas. [m1]@font-face@font-face

TrueDoc

TrueDoc , embora não seja especificamente uma especificação de webfont, foi o primeiro padrão para incorporação de fontes. Foi desenvolvido pela fundição de tipos Bitstream em 1994, e passou a ter suporte nativo no Netscape Navigator 4, em 1996. Devido a restrições de licença de código aberto, com a Netscape incapaz de liberar o código-fonte do Bitstream, o suporte nativo para a tecnologia terminou quando o Netscape Navigator 6 foi lançado. lançado. Um plug-in ActiveX estava disponível para adicionar suporte para TrueDoc ao Internet Explorer , mas a tecnologia teve que competir com as fontes Embedded OpenType da Microsoft , que tinham suporte nativo em seu navegador Internet Explorer desde a versão 4.0. [22] Outro impedimento foi a falta de uma ferramenta de código aberto ou gratuita para criar webfonts no formato TrueDoc, enquanto a Microsoft disponibilizou uma ferramenta gratuita de Web Embedding Fonts para criar webfonts em seu formato.

OpenType incorporado

O Internet Explorer oferece suporte à incorporação de fontes por meio do padrão proprietário Embedded OpenType desde a versão 4.0. Ele usa técnicas de gerenciamento de direitos digitais para ajudar a evitar que fontes sejam copiadas e usadas sem licença. Um subconjunto simplificado de EOT foi formalizado sob o nome de CWT ( Compatibility Web Type , anteriormente EOT-Lite ) [23]

Gráficos vetoriais escaláveis

A tipografia da Web se aplica ao SVG de duas maneiras:

  1. Todas as versões da especificação SVG 1.1, incluindo o subconjunto SVGT , definem um módulo de fonte que permite a criação de fontes dentro de um documento SVG. O Safari introduziu suporte para muitas dessas propriedades na versão 3. O Opera adicionou suporte preliminar na versão 8.0, com suporte para mais propriedades na 9.0.
  2. A especificação SVG permite que CSS seja aplicado a documentos SVG de maneira semelhante a documentos HTML, e a regra pode ser aplicada a texto em documentos SVG. O Opera adicionou suporte para isso na versão 10, [24] e no WebKit desde a versão 325 também suporta este método usando apenas fontes SVG.@font-face

Fontes de gráficos vetoriais escaláveis

As fontes SVG eram um padrão W3C de fontes usando gráficos SVG que se tornaram um subconjunto de fontes OpenType. [25] Permitia fontes multicoloridas [26] ou animadas. [27] Foi inicialmente um subconjunto das especificações SVG 1.1 [28] , mas foi descontinuado [29] na especificação SVG 2.0. As fontes SVG como formato independente são suportadas pela maioria dos navegadores, exceto IE e Firefox, e estão obsoletas no Chrome (e no Chromium). [30] Isso agora está geralmente obsoleto; o padrão com o qual a maioria dos fornecedores de navegador concorda é o subconjunto de fontes SVG incluído no OpenType (e depois no superconjunto WOFF, veja abaixo), chamado SVGOpenTypeFonts. [31] O Firefox oferece suporte a SVG OpenType desde o Firefox 26.

TrueType/OpenType

A vinculação a fontes TrueType (TTF) e OpenType (TTF/OTF) padrão da indústria é suportada pelo Mozilla Firefox 3.5+, Opera 10+, [32] Safari 3.1+, [33] e Google Chrome 4.0+. [34] O Internet Explorer 9+ oferece suporte apenas às fontes com permissões de incorporação definidas como instaláveis. [35]

Formato de fonte aberta da Web

O Web Open Font Format (WOFF) é essencialmente OpenType ou TrueType com compactação e metadados adicionais. WOFF é compatível com Mozilla Firefox 3.6+, [36] Google Chrome 5+, [37] [38] Opera Presto , [39] e é compatível com Internet Explorer 9 (desde 14 de março de 2011). [40] O suporte está disponível no Mac OS X Lion's Safari a partir da versão 5.1.

Fontes Unicode

Uma fonte Unicode é uma fonte de computador que mapeia glifos para pontos de código definidos no padrão Unicode . [41] A grande maioria das fontes de computador modernas usam mapeamentos Unicode, mesmo aquelas fontes que incluem apenas glifos para um único sistema de escrita , ou mesmo suportam apenas o alfabeto latino básico . Fontes que suportam uma ampla variedade de scripts e símbolos Unicode são às vezes chamadas de "fontes pan-Unicode", embora como o número máximo de glifos que podem ser definidos em uma fonte TrueType seja restrito a 65.535, não é possível para um fonte única para fornecer glifos individuais para todos os caracteres Unicode definidos (149.813 caracteres, com Unicode 15.1).

Apenas duas fontes disponíveis por padrão na plataforma Windows , Microsoft Sans Serif e Lucida Sans Unicode , fornecem um amplo repertório de caracteres Unicode . [ precisa de atualização ]

Em plataformas de software livre e de código aberto como Linux , GNU Unifont e GNU FreeFont fornecem uma ampla gama de caracteres. No ChromeOS , as fontes Noto do Google suportam (ou estão planejadas para suportar) todos os scripts codificados no padrão Unicode

Alternativas

Um obstáculo comum no design da Web é o design de modelos que incluem fontes que não são seguras para a Web. Existem várias soluções para situações como esta. Uma solução comum é substituir o texto por uma fonte similar segura para a Web ou usar uma série de fontes substitutas de aparência semelhante.

Outra técnica é a substituição de imagens . Esta prática envolve sobrepor o texto a uma imagem contendo o mesmo texto escrito na fonte desejada. Isso é bom para fins estéticos, mas impede a seleção de texto, aumenta o uso da largura de banda, é ruim para a otimização de mecanismos de busca e torna o texto inacessível para usuários com deficiência. [ carece de fontes ]

No passado, eram utilizadas soluções baseadas em Flash , como o sIFR . Isso é semelhante às técnicas de substituição de imagem, embora o texto seja selecionável e renderizado como um vetor. No entanto, este método requer a presença de um plugin proprietário no sistema do cliente.

Outra solução é usar JavaScript para substituir o texto por VML (para Internet Explorer) ou SVG (para todos os outros navegadores). [42]

Veja também

Notas

  1. ^ Consulte as listagens de fontes de código aberto e de fontes Unicode de software gratuito para essas fontes.

Referências

  1. ^ Garaffa, Dave (2 de setembro de 1997). "Fontes incorporadas no Microsoft IE4pr2" . Internet.com . Arquivado do original em 8 de julho de 1998.
  2. ^ Folhas de estilo em cascata, nível 1, W3C, 17/12/1996
  3. ^ "Fontes", Folhas de estilo em cascata, nível 2: especificação CSS2 , World Wide Web Consortium , 12/05/1998 , recuperado em 28/07/2009
  4. ^ Alterações CSS2.1 —C.2.97 Capítulo 15 Fontes, World Wide Web Consortium , recuperado em 30/01/2010
  5. ^ Módulo CSS3: Web Fonts, World Wide Web Consortium , recuperado em 30/01/2010
  6. ^ ab "Especificação CSS2", Fontes , World Wide Web Consortium
  7. ^ Poole, Alex (07/04/2005). "Quais são mais legíveis: fontes Serif ou Sans Serif?" Arquivado do original em 22/07/2017 . Recuperado em 27/09/2017 .
  8. ^ Grupo de Trabalho CSS (1º de fevereiro de 2024). "Módulo de fontes CSS nível 4" .
  9. ^ "Valores Ui-serif, ui-sans-serif, ui-monospace e ui-rounded para família de fontes | Posso usar... Tabelas de suporte para HTML5, CSS3, etc" .
  10. ^ Hill, Bill (21/07/2008), Incorporação de fontes na Web, Microsoft, arquivado do original em 06/09/2015
  11. ^ Comentário da equipe W3C
  12. ^ O monopólio esquecido da Microsoft
  13. ^ Fontes da Web: a visão do mundo livre
  14. ^ CSS @ Ten: a próxima grande novidade
  15. ^ Solicitação de envio de formato de arquivo WOFF 1.0 para W3C
  16. ^ Galineau, Sylvain (23/04/2010), Conheça WOFF, o formato de fonte padrão da Web, Microsoft
  17. ^ Código de referência de conversão WOFF , recuperado em 8 de maio de 2016
  18. ^ “O novo banco de dados do Google Fonts é o paraíso dos geeks do design” . Theverge. com . Recuperado em 24 de agosto de 2016 .
  19. ^ Richard Fink (06/09/2016) Webfonts na pradaria, Alist Apart
  20. ^ Kimler, Scott Thomas (04/07/2009), Fontes xBrowser - Expanda sua paleta de fontes usando CSS3 , recuperado em 05/02/2010
  21. ^ Wubben, Mark (27 de fevereiro de 2009). "Geek Meet: Tipografia Web e sIFR 3 - Slide 15 e 16" . SlideShare . Recuperado em 17 de março de 2010 .
  22. ^ Niederst, Jennifer (2001). Resumindo o web design: uma referência rápida para desktop (2ª ed.). O'Reilly. pág. 36.ISBN _ 0-596-00196-7. Recuperado em 20 de março de 2016 . em que ano o truedoc foi desenvolvido.
  23. ^ Daggett, John (31/07/2009), Formato de arquivo EOT-Lite v.1.1, World Wide Web Consortium , recuperado em 30/01/2010
  24. ^ Mills, Chris (04/12/2008), Opera Presto 2.2 e Opera 10 - uma primeira olhada, Opera Software , recuperado em 30/01/2010
  25. ^ SVG em OpenType, W3C , recuperado em 20/09/2014
  26. ^ Tipografia colorida na web: prepare-se para fontes multicoloridas, Pixel Ambacht , recuperado em 20/09/2014
  27. ^ Exemplo de glifo qualquer, people.Mozilla , recuperado em 20/09/2014
  28. ^ Fontes, W3C , recuperado em 20/09/2014
  29. ^ Capítulo de fontes, W3C , recuperado em 08/03/2018
  30. ^ Posso usar fontes SVG, CanIuse , recuperado em 20/09/2014
  31. ^ SVGOpenTypeFonts, Mozilla , recuperado em 20/09/2014
  32. ^ Mills, Chris (04/12/2008), Opera Presto 2.2 e Opera 10 - uma primeira olhada, Opera Developer Community , recuperado em 29/01/2010
  33. ^ Marsal, Katie (07/02/2008), Safari 3.1 da Apple para oferecer suporte a fontes da web para download, mais, AppleInsider , recuperado em 05/02/2010
  34. ^ Irish, Paul (25/01/2010), Chrome e @font-face: Está aqui!
  35. ^ Galineau, Sylvain (15/07/2010), The CSS Corner: Melhor tipografia da Web para um melhor design, Microsoft
  36. ^ Shapiro, Melissa (20/10/2009), Mozilla suporta formato de fonte aberta da Web, Mozilla , recuperado em 05/02/2010
  37. ^ Gilbertson, Scott (26/04/2010), Google Chrome para oferecer suporte ao formato de fonte aberta da Web, webmonkey
  38. ^ Bug 38217 - [cromo] Adicionar suporte WOFF, WebKit
  39. ^ Suporte para especificações da Web no Opera Presto 2.7, Opera
  40. ^ Galineau, Sylvain (23/04/2010), Conheça WOFF, o formato de fonte padrão da Web, Microsoft
  41. ^ "Fontes e teclados" . Consórcio Unicode. 28 de junho de 2017. Arquivado do original em 18 de outubro de 2019 . Recuperado em 13 de outubro de 2019 .
  42. ^ Sobre Cufon

links externos

  • Especificação de fontes CSS W3C
  • Lista de RFC conforme mencionado no WOFF (rascunho de 23/10/2009):
    • Especificação de formato de dados compactados RFC 1950 ZLIB
    • RFC 2119 Palavras-chave para uso em RFCs para indicar níveis de requisitos
    • RFC 4647 Correspondência de tags de idioma
Retrieved from "https://en.wikipedia.org/w/index.php?title=Web_typography&oldid=1209549470"