Tipografia da Web

Da Wikipédia, a enciclopédia livre
Ir para a navegação Saltar para pesquisar
As fontes da Web permitem que os designers da Web usem fontes que não estão instaladas no computador do visualizador.

A tipografia da Web refere-se ao uso de fontes na World Wide Web . Quando o HTML foi criado pela primeira vez, as faces e os estilos das fontes eram controlados exclusivamente pelas configurações de cada navegador da web . Não havia nenhum mecanismo para páginas da Web individuais para controlar a exibição da fonte até que a Netscape introduziu o fontelemento em 1995, que foi então padronizado na especificação HTML 3.2. No entanto, a fonte especificada pelo fontelemento tinha que ser instalada no computador do usuário ou uma fonte de fallback, como a fonte padrão sans-serif ou monoespaçada de um navegador , seria usada. As primeiras folhas de estilo em cascataA especificação foi publicada em 1996 e forneceu 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 de fontes, síntese e download. 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 . 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 que provavelmente estarão presentes em uma ampla variedade de sistemas de computador e usadas por autores de conteúdo da Web para aumentar a probabilidade de que o conteúdo seja 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 de fallback especificadas pelo autor e nas famílias genéricas, ou usará a substituição de fonte definida no sistema operacional do visitante.

Fontes Core da Microsoft para a Web

Desde que foram lançadas sob o programa de fontes Core da Microsoft para a Web , Arial, Georgia e Verdana tornaram-se 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 tornava de distribuição gratuita, mas também limitava alguns direitos de uso. Sua alta taxa de penetração os tornou um grampo para web designers. No entanto, a maioria das distribuições Linux não inclui essas fontes por padrão.

O CSS2 tentou aumentar as ferramentas disponíveis para desenvolvedores da Web adicionando síntese de fontes, correspondência de fontes aprimorada 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 de reserva. [6] Em CSS, a font-familypropriedade aceita uma lista de fontes separadas por vírgula a serem usadas, assim:

font-family :  "Nimbus Sans L" ,  Helvetica ,  Arial ,  sans-serif ;

A primeira fonte especificada é a fonte preferencial. Se essa fonte não estiver disponível, o navegador da Web tentará usar a próxima fonte na 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 não 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 estiverem disponíveis, a especificação CSS permite o uso de várias famílias de fontes genéricas. Essas famílias são projetadas para dividir as fontes em várias categorias com base em sua aparência geral. Elas são normalmente especificadas como a última de uma série de fontes de fallback, como último recurso no caso de nenhuma das fontes especificadas pelo autor estar disponível. Por vários anos, havia cinco famílias genéricas: [6]

Sem serifa

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

Serifa

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

Monoespaço

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

Cursiva

Fontes que lembram a escrita cursiva. Essas fontes podem ter uma aparência decorativa, mas podem ser difíceis de ler em tamanhos pequenos, portanto, 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 funcionando no rascunho 4 com menor suporte ao navegador

[8] Interface do sistema

Fontes padrão em um determinado sistema: o objetivo desta opção é permitir que o conteúdo da web se integre com a aparência do sistema operacional nativo.

ui-serif

Fontes padrão em um determinado sistema em um estilo serif

ui-sans-serif

Fontes padrão em um determinado sistema em um estilo sans-serif

ui-monospace

Fontes padrão em um determinado sistema em estilo monoespaçado

ui-arredondado

Fontes padrão em um determinado sistema em um estilo arredondado

Emoji

Fontes usando emoji

Matemática

Fontes para fórmulas e expressões matemáticas complexas.

Fangsong ( chinês :仿宋体)

Tipos de letra chineses que estão entre a serif Song e as formas cursivas Kai. Esse estilo é frequentemente usado para documentos governamentais.

Fontes da Web

História

Uma técnica para fazer referência e baixar automaticamente fontes remotas foi especificada pela primeira vez na especificação CSS2, que introduziu a construção. Na época, a busca de arquivos de fontes da web era controversa porque as fontes destinadas a serem usadas apenas para determinadas páginas da web também podiam ser baixadas e instaladas violando a licença de fonte. [9]@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. A EOT mostrou que as webfonts poderiam funcionar e o formato viu algum uso em sistemas de escrita não suportados por sistemas operacionais comuns. No entanto, o formato nunca ganhou ampla aceitação e acabou sendo rejeitado pelo W3C. [10]

Em 2006, Håkon Wium Lie iniciou uma campanha contra o uso de EOT e prefere que os navegadores da Web suportem os formatos de fonte comumente usados. [11] [12] [13] 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 desde então os navegadores adicionaram suporte. [14] [15] [16]

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 webfonts estarão disponíveis. [17]

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

Formatos de arquivo

Usando uma técnica específica de incorporação de CSS [19] é 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 acessem essa funcionalidade. Algumas fundições comerciais se opõem à redistribuição de suas fontes. Por exemplo, Hoefler & Frere-Jones diz que, enquanto eles "...entusiasticamente [apoiam] o surgimento de uma Web mais expressiva na qual os designers podem usar fontes de alta qualidade online de forma segura e confiável", a entrega atual de fontes usando é considerado "distribuição ilegal" pela fundição e não é permitido. [20]@font-face@font-faceEm vez disso, a Hoefler & Co. oferece um sistema proprietário de entrega de fontes enraizado na nuvem. Muitas outras fundições de tipo comercial abordam a redistribuição de suas fontes oferecendo uma licença específica, conhecida como licença de fonte da web, que permite o uso do software de fonte para exibir conteúdo na web, uso normalmente proibido por licenças básicas de desktop. Naturalmente isso não interfere com fontes e fundições sob licenças gratuitas. [m 1]

TrueDoc

TrueDoc , embora não seja especificamente uma especificação de webfont, foi o primeiro padrão para incorporar fontes. Foi desenvolvido pela fundição de tipo Bitstream em 1994, e tornou-se suportado nativamente 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 liberado. Um plug-in ActiveX estava disponível para adicionar suporte para TrueDoc ao Internet Explorer , mas a tecnologia teve que competir com as fontes OpenType Embutidas da Microsoft , que tinham suporte nativo em seu navegador Internet Explorer desde a versão 4.0. [21]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 Web Embedding Fonts Tool gratuita para criar webfonts em seu formato.

OpenType incorporado

O Internet Explorer oferece suporte à incorporação de fontes por meio do padrão proprietário OpenType incorporado desde a versão 4.0. Ele usa técnicas de gerenciamento de direitos digitais para ajudar a evitar que as 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 ) [22]

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 versão 9.0.
  2. A especificação SVG permite que o CSS seja aplicado a documentos SVG de maneira semelhante a documentos HTML, e a regra pode ser aplicada ao texto em documentos SVG. Opera adicionou suporte para isso na versão 10, [23] e 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. [24] Permitiu fontes multicoloridas [25] ou animadas. [26] Foi primeiro um subconjunto das especificações SVG 1.1 [27] mas foi preterido [28] 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). [29] Isso agora é geralmente obsoleto; o padrão com o qual a maioria dos fornecedores de navegador concordou é o subconjunto de fontes SVG incluído no OpenType (e depois o superconjunto WOFF, veja abaixo), chamado SVGOpenTypeFonts . [30]O Firefox suporta SVG OpenType desde o Firefox 26.

TrueType/OpenType

A vinculação a fontes TrueType (TTF) e OpenType (TTF/OTF) padrão do setor é suportada pelo Mozilla Firefox 3.5+, Opera 10+, [31] Safari 3.1+, [32] e Google Chrome 4.0+. [33] O Internet Explorer 9+ suporta apenas as fontes com permissões de incorporação definidas como instaláveis. [34]

Formato de fonte aberta da Web

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

Fontes Unicode

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 . Um bug no Verdana (e a manipulação diferente dele por vários agentes do usuário ) dificulta sua usabilidade onde a combinação de caracteres é desejada.

Em plataformas de software livre e de código aberto , como Linux , GNU Unifont e GNU FreeFont fornecem uma ampla variedade de caracteres Unicode .

Alternativas

Um obstáculo comum no design da Web é o design de maquetes 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 segura para a Web semelhante ou usar uma série de fontes alternativas de aparência semelhante.

Outra técnica é a substituição de imagens . Essa prática envolve a sobreposição de texto com 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 do mecanismo de pesquisa e torna o texto inacessível para usuários com deficiências.

Também é comum o uso de soluções baseadas em Flash , como 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 de um cliente.

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

Os serviços de hospedagem de fontes permitem que os usuários paguem uma assinatura para hospedar online fontes não seguras para a Web. A maioria dos serviços hospeda a fonte para o usuário e fornece a declaração CSS necessária. @font-face

Um exemplo de configuração CSS: @font-face

 @ font-face  { 
 	font-family :  'Diário' ; 
 		src :  formato url ( 'http://your-own.site/fonts/journal/journal.woff' )  ( 'woff' ), url ( 'http://your-own.site/fonts/journal/journal. svg#Journal' ) formato ( 'svg' ), url ( 'http://your-own.site/fonts/journal/journal.ttf' ) formato ( 'truetype' ), url ( 'http://your- own.site/fonts/journal/journal.eot' ), url (
 		 
 		 
 		
 		'http://your-own.site/fonts/journal/journal.eot?#iefix' )  formato ( 'embedded-opentype' ); 
 	peso da fonte :  normal ; 
 	estilo da fonte :  normal ; 
 }

Considerações práticas

Na prática, importa não apenas o navegador da Web que o público está usando, mas também como o sistema operacional está configurado. Em 2010, o designer de tipos e consultor Thomas Phinney (vice-presidente da FontLab e ex-Adobe [41] ) escreveu um processo passo a passo para encontrar a melhor solução de renderização, que - mais ou menos brincando - usa um grande número de goto afirmações. [42] Um fluxograma mais visualmente orientado foi postado no mesmo ano no fórum Typophile por Miha Zajec. [43]

Veja também

  • Substituição de Flash Inman escalável
  • Lista de RFC conforme mencionado no WOFF (rascunho de 2009-10-23):
    • Especificação de formato de dados compactados RFC  1950 ZLIB
    • RFC  2119 Palavras-chave para uso em RFCs para indicar os níveis de exigência
    • RFC  4647 Correspondência de tags de idioma

Notas

Referências

  1. ^ Garaffa, Dave (2 de setembro de 1997). "Fontes incorporadas no Microsoft IE4pr2" . Internet . com . Arquivado a partir do original em 8 de julho de 1998.
  2. ^ Folhas de estilo em cascata, nível 1 , W3C, 17/12/1996
  3. ^ "Fontes" , Cascading Style Sheets, level 2:CSS2 Specification , World Wide Web Consortium , 1998-05-12 , recuperado em 2009-07-28
  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 2010-01-30
  6. ^ a b "especificação CSS2" , Fontes , World Wide Web Consortium
  7. ^ Poole, Alex (2005-04-07). "Quais são mais legíveis: fontes com serifa ou sem serifa?" . Arquivado a partir do original em 22/07/2017 . Recuperado 2017-09-27 .
  8. ^ "Valores ui-serif, ui-sans-serif, ui-monospace e ui-rounded para font-family | Posso usar... Tabelas de suporte para HTML5, CSS3, etc" .
  9. ^ Hill, Bill (2008-07-21), Incorporação de fontes na Web , Microsoft
  10. ^ Comentário da equipe W3C
  11. ^ Monopólio esquecido da Microsoft
  12. ^ Fontes da Web: a visão do mundo livre
  13. ^ CSS @ Ten: The Next Big Thing
  14. ^ Solicitação de envio de formato de arquivo WOFF 1.0 para W3C
  15. ^ Galineau, Sylvain (2010-04-23), Conheça WOFF, The Standard Web Font Format , Microsoft
  16. ^ Código de referência de conversão WOFF , recuperado em 8 de maio de 2016
  17. ^ "O novo banco de dados do Google Fonts é o paraíso de um geek de design" . Theverge . com . Recuperado em 24 de agosto de 2016 .
  18. ^ Richard Fink (2016-09-06) Webfonts on the Prairie , Alist Apart
  19. ^ Kimler, Scott Thomas (2009-07-04), xBrowser Fonts — Expanda sua paleta de fontes usando CSS3 , recuperado 2010-02-05
  20. ^ 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 .
  21. ^ Niederst, Jennifer (2001). Web design em poucas palavras: 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.
  22. ^ Daggett, John (2009-07-31), EOT-Lite File Format v.1.1 , World Wide Web Consortium , recuperado 2010-01-30
  23. ^ Mills, Chris (2008-12-04), Opera Presto 2.2 e Opera 10 — um primeiro olhar , Opera Software , recuperado 2010-01-30
  24. ^ SVG em OpenType , W3C , recuperado 2014-09-20
  25. ^ Tipografia colorida na web: prepare-se para fontes multicoloridas , Pixel Ambacht , recuperado 2014-09-20
  26. ^ Exemplo de Glifo Anymated , people.Mozilla , recuperado 2014-09-20
  27. ^ Fontes , W3C , recuperadas 2014-09-20
  28. ^ Capítulo de fontes , W3C , recuperado 2018-03-08
  29. ^ Posso usar fontes SVG , CanIuse , recuperadas 2014-09-20
  30. ^ SVGOpenTypeFonts , Mozilla , recuperado 2014-09-20
  31. ^ Mills, Chris (2008-12-04), Opera Presto 2.2 e Opera 10 — um primeiro olhar , Opera Developer Community , recuperado 2010-01-29
  32. ^ Marsal, Katie (2008-02-07), Safari 3.1 da Apple para suportar fontes da web para download, mais , AppleInsider , recuperado 2010-02-05
  33. ^ Irish, Paul (2010-01-25), Chrome e @font-face: Está aqui!
  34. ^ Galineau, Sylvain (2010-07-15), The CSS Corner: Better Web Typography For Better Design , Microsoft
  35. ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format , Mozilla , recuperado 2010-02-05
  36. ^ Gilbertson, Scott (2010-04-26), Google Chrome para apoiar o formato de fonte aberta da Web , webmonkey
  37. ^ Bug 38217 - [cromo] Adicionar suporte WOFF , WebKit
  38. ^ Suporte às especificações da Web no Opera Presto 2.7 , Opera
  39. ^ Galineau, Sylvain (2010-04-23), Conheça WOFF, The Standard Web Font Format , Microsoft
  40. ^ Sobre Cufon
  41. ^ "Fontes Adobe" .
  42. ^ Thomas Phinney (13 de outubro de 2010) Renderização de fontes em navegadores da web: uma aventura de encontrar sua fonte
  43. ^ [1] como citado pelo link Phinney Internet Archive

Links externos