The Proportional Web — stylesheet web para tipografia proporcional

• The Proportional Web é um design que leva alguns princípios de 《The Elements of Typographic Style》, de Robert Bringhurst, para o navegador; é o sucessor proporcional de The Monospace Web e uma stylesheet reutilizável
• Usa Alegreya e Alegreya SC no corpo do texto e Courier Prime para código, mantendo tamanhos e ritmo vertical consistentes com base em uma fonte raiz de 16px, rem e altura de linha de 1.2rem
• Aplica texto justificado usando word-break, text-wrap e hyphens dos navegadores modernos, mas recomenda usar text-align: left se o espaçamento entre palavras ou os “rios” de espaços piorarem
• Estiliza títulos, citações, figuras, tabelas e blocos de código com foco em HTML5 semântico; em telas largas, as notas laterais ficam na margem direita e, em telas pequenas, viram parágrafos inline com ornamentos
• É adequado para documentos centrados em prosa, como livros, periódicos, blogs, manuais e wikis, e não é recomendado para aplicações web dinâmicas; é possível baixar o código-fonte no GitHub e adicionar CSS e JavaScript ou usá-lo com Pandoc

---

Do The Monospace Web ao proporcional

• The Monospace Web se espalhou mais do que o esperado, a ponto de ser adotado em blogs pessoais e interfaces de aplicações
• The Proportional Web é o sucessor espiritual desse projeto, projetado para usar fontes proporcionais em vez de monoespaçadas e para ser reutilizado livremente
• Começou como um trabalho de implementar no navegador o layout e a tipografia do livro, depois da leitura de 《The Elements of Typographic Style》, de Robert Bringhurst
• Diferentemente do impresso, a web não tem um tamanho de página fixo e também é uma plataforma programável, o que dificulta aplicar exatamente as mesmas regras
  • Em vez disso, o projeto é publicado para que cada pessoa possa escolher os elementos que considerar úteis ou visualmente agradáveis
• Pandoc foi usado para gerar o HTML, mas a stylesheet pode funcionar em outros ambientes com pequenas modificações

Sistema de fontes

• O design se baseia no princípio de Bringhurst de escolher uma única fonte versátil, em vez de misturar várias famílias tipográficas
• A família Alegreya é usada de forma separada conforme a finalidade
  • Alegreya Regular é aplicada ao corpo do texto e aos títulos de terceiro nível
  • Alegreya SC é usada em títulos de primeiro nível em formato de capitulares, títulos de segundo nível exibidos em small caps e abreviações inline como HTML
• Courier Prime é aplicada a trechos de código monoespaçados

Unidades relativas e ritmo vertical

• Todos os tamanhos são definidos em rem, com base em um tamanho de fonte raiz de 16px
• Os tamanhos padrão são 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 2, 2.5, 3 e 4rem, correspondendo respectivamente a 12, 14, 16, 18, 20, 22, 24, 32, 40, 48 e 64px
• Ao alterar apenas o tamanho da fonte raiz, todo o design pode ser ampliado ou reduzido em conjunto
  • Por exemplo, quando a largura da tela for 480px ou menos, é possível mudar o font-size de :root para 14px
• A altura de linha é 1.2rem, e a intenção é alinhar verticalmente todos os elementos a múltiplos desse valor
• Mantém um ritmo de alinhamento comum em todo o documento, sem aplicar isso de forma tão extrema quanto The Monospace Web

Texto justificado implementado em navegadores modernos

• Como no livro de Bringhurst, o corpo do texto é disposto com justificação, e não alinhado à esquerda com margem direita irregular
• Embora exista uma forte percepção de que a justificação deve ser evitada na web, o projeto considera que os recursos aprimorados dos navegadores permitem tentar novamente
• Quebras de linha e hifenização são controladas pelas seguintes propriedades CSS
  • word-break
  • text-wrap
  • hyphens
  • hyphenate-limit-chars, que controla o alcance da hifenização
• A justificação traz o risco de espaçamento excessivo entre palavras ou de surgirem rios de espaços nos parágrafos
• O documento atual produz resultados aceitáveis com a combinação de comprimento de linha, tamanho de fonte e conteúdo, e soft hyphens foram inseridos manualmente em algumas palavras difíceis
• Se não funcionar bem para o conteúdo, é mais adequado mudar para text-align: left

Recuo de parágrafos e cores

• Parágrafos consecutivos recebem um recuo de 3ch, equivalente à largura de três caracteres 0
• É uma forma de tornar mais fácil identificar visualmente o início e o fim dos parágrafos, usada em impressos há pelo menos 500 anos
• Na web, geralmente se usa espaçamento vertical entre parágrafos em vez de recuo, mas o recuo tradicional continua sendo uma escolha válida
• As cores são limitadas a fundo branco e texto preto
  • O projeto prefere uma composição minimalista como padrão para documentos centrados em prosa
  • Ao usar cores com parcimônia, é possível concentrar a atenção do leitor nos elementos mais importantes, como gráficos que comunicam dados complexos

HTML semântico, títulos e ênfase

• Com exceção de algumas classes adicionais, a composição usa principalmente marcação HTML5 semântica
• Os títulos são estilizados em três níveis
  • h1: título principal no nível de capítulo
  • h2: título de seção
  • h3: título de subseção
• O elemento <em> é exibido em itálico, de acordo com a expectativa comum

Separadores e detalhes recolhíveis

• Como o livro de Bringhurst não traz orientações claras sobre separadores horizontais, eles são usados como elementos decorativos
• O separador usa o símbolo U+2767 Rotated Floral Heart Bullet, do bloco Unicode Dingbats
• O elemento <details> permite ocultar informações que podem ser expandidas ao clicar no rótulo

Notas laterais e nomes próprios

• As notas laterais usadas por Bringhurst são implementadas com o <aside> do HTML
• Quando a tela é suficientemente larga, elas aparecem na margem direita, alinhadas ao topo do parágrafo anterior
• Em telas pequenas, elas são recolhidas em parágrafos inline com ornamentação, de forma responsiva
• Nomes próprios e denominações oficiais distinguidos pela classe .canonical-name são renderizados em small caps, como nos exemplos de Bringhurst

Citações e figuras

• Citações em bloco são compostas por um bloco recuado e aspas ao redor do texto
• O rodapé traz autor, obra e ano
• Imagens e legendas são colocadas nos elementos <figure> e <figcaption>, respectivamente
• Para autores e títulos de obras nas figuras, assim como nas citações, são usados small caps e itálico, compartilhando o mesmo sistema de recuo

Listas e tabelas

• Há suporte a listas com marcadores e listas ordenadas, e a estrutura aninhada de listas ordenadas também é exibida no formato usual
• Cabeçalhos de tabela usam rótulos em small caps e bordas para criar uma distinção forte
• O restante do design das tabelas reduz os ornamentos e adota uma composição simples baseada em espaçamento

Representação de código

• O design geral é voltado a documentos centrados em prosa, e não a documentação técnica centrada em código, mas blocos de código e código inline também são organizados para boa legibilidade
• O código usa Courier Prime, que transmite uma nostalgia de máquina de escrever e harmoniza com a Alegreya e com a atmosfera geral do design
• As variáveis de estilo padrão incluem fonte, altura de linha, espessura de borda, cor do texto e cor de fundo
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Usos adequados e licença

• É um design para documentos web centrados em prosa, como livros, periódicos, blogs e manuais
• Pode ser usado como base para um site pessoal, um projeto específico ou uma wiki maior
• Provavelmente não é adequado para aplicações web dinâmicas
• É possível copiar as partes desejadas ou fazer um fork para modificá-las, mas é necessária a devida atribuição de autoria
• As condições de atribuição podem ser cumpridas mantendo as informações de licença nos cabeçalhos dos arquivos-fonte

Instalação e uso com Pandoc

• Para começar rapidamente, baixe o código-fonte no GitHub e coloque-o no diretório the-proportional-web do projeto
• No head do HTML, adicione os seguintes arquivos
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• No Pandoc, é possível converter Markdown para HTML especificando argumentos como profundidade do sumário, numeração de seções, CSS, JavaScript e desativação de realce de sintaxe
• Se precisar de realce de sintaxe, considere usar um template personalizado, como o template usado nesta saída HTML
• Nesse caso, o CSS incluído por padrão pelo Pandoc deve ser removido do template personalizado

Projetos de tipografia relacionados

• The Elements of Typographic Style Applied to the Web, de Richard Rutter, segue em grande parte a estrutura do livro de Bringhurst, adaptando seus conselhos ao design web
  • Seu escopo é muito mais amplo que o de The Proportional Web e o foco é a própria transmissão de informação
  • Já The Proportional Web é mais próximo de um showcase que demonstra diretamente as ideias e a stylesheet
  • O site apresentava grandes diferenças de tamanho de fonte em celulares, o que dificultava a leitura; entende-se que ele existe há pelo menos 20 anos e não recebe atualizações há cerca de 8 anos
  • The Proportional Web dedicou muito esforço para manter responsividade e consistência mesmo com mudanças de tamanho de tela, e os dois projetos podem coexistir porque têm objetivos diferentes
• Practical Typography, de Matthew Butterick, é um recurso prático que cobre com detalhe suficiente quase todos os temas necessários para usuários em geral ou engenheiros próximos da tipografia
• Tufte CSS é um trabalho influente e bem conhecido, com um resultado geral sólido mesmo que se discorde de alguns detalhes de composição tipográfica

Escopo e ferramentas de produção

• O projeto leva apenas algumas ideias de Bringhurst para a web, em vez de toda a metodologia dele
• As seguintes ferramentas foram usadas na produção do documento
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• As ideias de design e o layout real vêm em grande parte de 《The Elements of Typographic Style》, de Robert Bringhurst

[GN⁺]

Opiniões no Lobste.rs

• Deve-se evitar definir o tamanho da fonte em valores de pixels, como abaixo, pois isso prejudica a acessibilidade

  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  

  • A unidade px do CSS já não corresponde mais 1:1 a pixels físicos; ela significa max(1/96in, 1 pixel)
  • Minha abordagem preferida é definir o font-size de :root como 0.625, fazendo 1rem corresponder a 10px, e então especificar 1.6rem ou 2rem no body, para que a página inteira herde isso
    Para fontes, não use px, especialmente wv ou wh; use rem ou em. Para layouts que não precisam aumentar conforme o tamanho da fonte, pode-se usar principalmente px, wv, wh etc.
    Recomenda-se fortemente usar em ou rem em vez de px para fontes, para que usuários com baixa visão possam usar o recurso de alteração do tamanho do texto do navegador
    Deve-se evitar usar wv ou wh no tamanho da fonte, pois, ao ampliar no desktop com Ctrl-+, innerWidth e innerHeight também diminuem na mesma proporção, mantendo o tamanho do texto igual. Um uso misto sutil, como font-size: calc(1.6rem + 2wv), para aumentar um pouco apenas em telas grandes, é aceitável
  • É melhor não alterar o tamanho de fonte padrão do navegador. Para documentos simples de texto isso é aceitável, mas na maior parte da Web pode quebrar o layout
    Na prática, é difícil projetar sites complexos para lidar com qualquer tamanho de fonte arbitrário, e as restrições de design também aumentam enormemente
    Se houver necessidade de acessibilidade, como no caso de deficiência visual, deve-se alterar o nível de zoom padrão do navegador. Assim, o site só precisa lidar com o design responsivo comum, que trata naturalmente tamanhos arbitrários de viewport, o que é realisticamente viável
    No passado, os navegadores permitiam que os usuários ajustassem diretamente o tamanho da fonte, mas a experiência do usuário não era boa, então há décadas passaram para o modelo de zoom da página inteira

• Fica a dúvida se foi feito para ser legível também no mobile

• É impressionante como reproduz muito bem a tipografia apresentada no livro de Bringhurst
  No entanto, às vezes sai de uma grade uniforme com altura de linha fixa. Por exemplo, quando texto definido em Courier é misturado em uma linha, a altura da linha aumenta um pouco

  • Para evitar isso, é preciso definir line-height: 1 em <code>. Não sei se há consenso sobre 0 ser melhor
    Além disso, para seguir 『The Elements of Typographic Style』, os marcadores e os números de listas deveriam ser colocados na margem, mas não me lembro se isso era um requisito explícito

• O resultado de explorar livros clássicos de tipografia é excelente, e é bom ver mais desse design baseado em restrições online

• Nessa área, http://lamb.cc/typograph/, de 2009, ainda é o melhor para mim

• O dimensionamento relativo é ótimo, mas acho que sobrescrever o tamanho da fonte raiz é um erro
  Sites devem respeitar a configuração de tamanho de fonte do usuário, e um sistema de tamanhos relativos, projetado com base em proporções e relações, se encaixa bem nisso

• É fácil fingir que o texto é o mais importante e que a forma de apresentação não importa, mas um layout de página cuidadosamente projetado faz posts de blog, romances ou artigos parecerem muito mais profissionais
  Uma diagramação de página excelente está se tornando, em certa medida, uma habilidade esquecida, então é bom ver tentativas como esta
  Adotei tuft.css no começo e precisei ajustá-lo ao longo dos anos, mas ele tem me servido bem até hoje. Este parece melhor em alguns aspectos, mas não a ponto de eu migrar