Iosevka: a fonte monoespaçada open source para programar
Você abre dois arquivos lado a lado no editor e um deles corta no meio da linha. Aí você diminui a fonte, força a vista e passa a tarde inteira com a cara colada no monitor. A Iosevka foi feita para resolver isso. É uma fonte monoespaçada open source, estreita de propósito, que cabe mais código na mesma largura de tela sem virar formiguinha.
Ela não é novidade. O projeto existe desde 2015 e é mantido pelo Belleve Invis no GitHub. Mas continua recebendo release com frequência e virou uma das fontes favoritas de quem passa o dia no terminal. A página oficial fica em typeof.net/Iosevka e vale a visita, mesmo que seja só para brincar com o preview.
O que é a Iosevka, afinal?
A Iosevka é uma família de fontes para código, com versões sem serifa e com serifa (a Iosevka Slab). A licença é a SIL Open Font License 1.1. Na prática, isso quer dizer que você pode usar no editor, no terminal, no seu site e até empacotar junto com um produto, sem pagar nada.
O detalhe que muda tudo é a largura. Cada caractere da Iosevka ocupa meio em. A maioria das monoespaçadas populares fica perto de 0,6 em. Parece pouco, mas a conta é simples: na mesma largura, você enxerga uns 20% a mais de colunas.
Num monitor de 1920 pixels com o editor dividido em dois painéis, isso é a diferença entre ler uma linha de 100 caracteres inteira ou ficar rolando para o lado. Quem usa Prettier com printWidth: 100 sente isso no primeiro dia.
A família tem várias variações:
- Iosevka: a padrão, com ligaduras.
- Iosevka Term: ajustada para terminais, com setas e símbolos que respeitam a grade de células.
- Iosevka Fixed: sem ligaduras, estritamente monoespaçada, para terminais que se perdem com elas.
- Iosevka Slab: a versão com serifa, para quem gosta de letra com pé.
- Iosevka Aile e Etoile: quase proporcionais, pensadas para texto corrido e documentação.
São nove pesos, de Thin a Heavy, mais itálico e oblíquo. Dá para usar a mesma família no código, no terminal e nas notas.
Por que uma fonte estreita ajuda a programar?
Código é um texto esquisito. A gente lê mais na vertical do que na horizontal, pula de bloco em bloco e compara linhas parecidas. Fonte larga desperdiça espaço justamente onde a tela é mais disputada: painel lateral, terminal integrado, diff, minimap.
Com a Iosevka, o layout que eu uso no dia a dia fica assim: explorer de arquivos, dois editores lado a lado e um terminal embaixo. Tudo cabe numa tela de notebook sem eu precisar baixar a fonte para 11.
Tem um custo, claro. Letra estreita pede um pouco mais de altura de linha para respirar. Eu subo o lineHeight e o resultado fica confortável. Se você usar com as configurações padrão de uma fonte larga, vai achar apertado e desistir em cinco minutos. Ajuste antes de julgar.
Fonte de código é ferramenta de trabalho. Você passa mais horas olhando para ela do que para qualquer IDE.
A parte que ninguém mais tem: você monta a sua fonte
Aqui está o motivo de a Iosevka ter fãs tão fiéis. Quase todo glifo tem variantes. O zero pode ser cortado, pontilhado ou liso. O l minúsculo pode ter cauda ou não. O g pode ter um ou dois andares. O asterisco pode ficar alto ou centralizado.
Você escolhe isso de três jeitos.
1. Stylistic sets prontos. A fonte traz conjuntos que imitam o desenho de outras monoespaçadas famosas. O ss14 lembra a JetBrains Mono, o ss05 lembra a Fira Mono, o ss08 lembra a PragmataPro (que custa caro, aliás). No VS Code, basta ativar a feature:
{
"editor.fontFamily": "'Iosevka Term', monospace",
"editor.fontSize": 15,
"editor.lineHeight": 1.6,
"editor.fontLigatures": "'ss14', 'calt'"
}
2. Character variants pontuais. Se você só quer trocar um glifo, usa as features cvXX do OpenType. Funciona no editor e no CSS do seu site também.
3. Build personalizado. Esse é o modo nerd raiz. Você descreve a fonte num arquivo TOML e gera os arquivos você mesmo:
[buildPlans.IosevkaDiego]
family = "Iosevka Diego"
spacing = "term"
serifs = "sans"
noCvSs = true
exportGlyphNames = false
[buildPlans.IosevkaDiego.variants]
inherits = "ss14"
Depois é clonar o repositório e rodar o build:
git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka
npm install
npm run build -- ttf::IosevkaDiego
Um aviso honesto: esse build é pesado. Ele gera dezenas de arquivos e come CPU por um bom tempo. Se o seu notebook esquenta fácil, como o meu, use o customizador web do próprio site para gerar o TOML e rode o build num GitHub Actions. Sua máquina agradece.
Como instalar a Iosevka sem complicação
Para a maioria das pessoas, nada de build. Baixe a versão pronta e siga em frente.
- macOS:
brew install --cask font-iosevka - Linux e Windows: baixe o zip na página de releases do GitHub e instale os
.ttf. - Terminal com ícones: o projeto Nerd Fonts tem a Iosevka e a IosevkaTerm com os ícones já embutidos. Ideal para quem usa Starship, lazygit ou um prompt cheio de símbolos.
Minha sugestão: Iosevka Term no terminal e Iosevka normal no editor. Se o seu terminal renderizar ligaduras de um jeito estranho, troque para a Fixed e o problema some.
E para usar no site, vale a pena?
Vale, mas com cuidado. O pacote completo é grande, porque a Iosevka cobre latim, grego, cirílico, desenho de caixas e um monte de símbolos. Se você mandar tudo para o navegador, vai pesar no carregamento por causa de bloco de código.
O caminho certo é usar só os pesos que você precisa, em woff2, e fazer subset dos caracteres. Os releases já trazem pacotes de webfont. Um setup enxuto fica assim:
@font-face {
font-family: 'Iosevka Web';
src: url('/fonts/iosevka-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
pre, code {
font-family: 'Iosevka Web', ui-monospace, monospace;
font-feature-settings: 'ss14';
}
Com um peso regular e subset para latim básico, o arquivo cai para algumas dezenas de KB. Para um blog técnico, isso é aceitável. Mais que dois pesos já começa a não compensar.
Onde a Iosevka não é a melhor escolha
Nem tudo é perfeito, e seria propaganda dizer o contrário.
Em tela de baixa densidade com fonte pequena, a letra estreita perde legibilidade. Se você programa num monitor 1080p de 27 polegadas com fonte 12, talvez a JetBrains Mono ou a Fira Code sejam mais confortáveis. A Iosevka brilha em telas de alta densidade e em quem gosta de muito código visível.
Também tem a questão da escolha. Tanta variante pode virar um buraco sem fundo. Já vi gente passar uma tarde decidindo entre dois desenhos de asterisco. Discutir fonte é o novo tabs contra espaços, só que com mais screenshot no Twitter.
E se você trabalha em par com alguém, prepare-se: a pessoa vai olhar sua tela e perguntar se o editor está espremido. Faz parte.
Vale trocar de fonte?
Minha opinião: vale testar por uma semana, com a altura de linha ajustada. Troca de fonte tem um período de estranhamento de dois ou três dias. Depois disso, ou você nunca mais volta, ou volta sabendo exatamente por quê.
O que mais me agrada na Iosevka é o modelo do projeto. Uma fonte livre, mantida há mais de dez anos, que trata o dev como alguém capaz de decidir como quer o próprio zero. Poucas ferramentas pagas oferecem esse nível de controle.
Se você curte esse tipo de ajuste fino no ambiente de trabalho, dá uma olhada nos projetos que eu venho construindo. Quase todos nasceram de uma pequena irritação do dia a dia, igual a linha cortada no meio do editor.
Resumo para o LinkedIn
Seu editor corta a linha no meio e você diminui a fonte até forçar a vista? Tem um jeito melhor. A Iosevka é uma fonte monoespaçada open source e estreita de propósito: cada caractere ocupa meio em, contra uns 0,6 da maioria das fontes de código. Na prática, cabem uns 20% a mais de colunas. Explorer, dois editores lado a lado e terminal numa tela de notebook, sem baixar a fonte para 11. E dá para montar a sua: zero cortado ou pontilhado, `g` de um ou dois andares, stylistic sets que imitam JetBrains Mono e PragmataPro. A dica que faz diferença: suba o lineHeight antes de julgar. Letra estreita precisa de espaço para respirar. Testa por uma semana e me conta se você volta para a antiga. Escrevi o guia completo no blog. #Programação #DevTools #OpenSource #VSCode #Produtividade