Guia do Slop Font

Primeiros passos com o Slop Font

O Slop Font é um editor de fontes no seu navegador. Sua fonte fica guardada neste dispositivo; nada é enviado.

Abrir o Slop Font

A página

À esquerda fica a grade de glifos: uma caixa por caractere, tracejada até ser desenhada. No meio há três visões: Desenhar (o editor de glifos), Kerning e Teste de texto. O painel à direita tem a largura e as margens laterais do glifo, os caracteres, a folha de escrita à mão, a exportação, os nomes e a licença da fonte, e as suas métricas.

No celular, a grade é a própria página: toque em uma letra para desenhá-la e em ‹ Glifos para voltar. O painel é uma folha na parte de baixo; toque em Configurações para abri-lo.

Desenhe uma letra

1. Escolha uma letra na grade.
2. Escolha a Caneta (P): clique para um ponto de canto, arraste para fazer uma curva, e clique no primeiro ponto para fechar a forma.
3. Ou desenhe com Retângulo (R), Elipse (E) ou Traço (S); uma forma desenhada dentro de outra vira um furo.
4. Use Selecionar (V) para mover pontos e alças; as setas ajustam, Delete remove, e um clique duplo deixa um ponto suave ou de canto.
5. Selecione dois contornos com Shift e use Caminho ▾ União ou Subtrair; Remover sobreposição une a letra inteira.

Dica: Os pontos se encaixam na grade e nas linhas de base, altura-x, altura de maiúsculas, ascendente e descendente. Segure Alt para colocar um ponto livremente.

Traga o que você já tem

1. Desenhar a partir de SVG…: cole um SVG ou os dados do caminho, ou escolha um arquivo .svg, e ajuste à altura de maiúsculas ou à altura-x.
2. Traçar uma imagem…: uma foto de uma letra vira o seu contorno; defina o limite de tinta.
3. Imprimir uma folha… e Ler uma folha preenchida…, em Escrita à mão, transformam uma página de escrita à mão em uma fonte inteira.
4. Abrir… abre um TTF, OTF, WOFF ou WOFF2 para editar.

Espaçamento e kerning

1. Defina Largura, Margem esquerda e Margem direita no painel para cada letra.
2. Na visão Kerning, digite duas letras, mova o controle deslizante e veja a linha de exemplo.
3. Confira a visão Teste de texto com o seu próprio texto, em vários tamanhos, em fundo claro ou escuro.

Exporte e guarde

1. Em Fonte, defina o nome da família, o designer e a licença (Usar a SIL Open Font License 1.1 preenche isso).
2. Em Exportar, escolha TTF, OTF, WOFF2 ou WOFF e clique em Baixar fonte, ou em Salvar no Slop Drive….
3. Copiar CSS @font-face dá a regra para um site. Salvar projeto guarda um arquivo .sfont para editar depois.