Coisas que você pode não saber sobre tipografia no Sketch

Todo designer sabe que existem muitas ferramentas diferentes que os ajudarão a trabalhar com tipografia. Nem é preciso dizer que aplicativos como Adobe InDesign, Scribus e Photoshop são provavelmente o seu kit de ferramentas de escritório. Ainda assim, embora você possa ter ouvido falar do Sketch, provavelmente o ignorou como uma mera ferramenta de design da web, que não deve ser usada quando se trata de fontes.

Não tem que ser assim. Na verdade, o Sketch pode se tornar uma das melhores ferramentas para a criação de peças tipográficas incríveis. O segredo é simples; você precisa conhecer algumas dicas e truques para ajudá-lo ao longo do caminho.

Neste artigo, examinaremos algumas maneiras rápidas e fáceis de corrigir as pequenas deficiências do Sketch quando se trata de tipografia. Na verdade, este é o terceiro artigo da nossa série Dicas e truques de esboço . Se você quiser ver os outros, verifique-os aqui: Símbolos Aninhados no Sketch , Usando Emojis para gerenciar arquivos de esboço .

Tipografia em Sketch

Se você já conhece CSS, deve estar familiarizado com os recursos básicos de tipografia do Sketch. Isso inclui tudo, desde selecionar uma fonte e transformar o texto até parâmetros de configuração, como espaçamento de caracteres e altura da linha.

No entanto, alguns dos recursos menos conhecidos do Sketch não são tão imediatamente óbvios. É aí que saber algumas dicas adicionais pode ajudar muito. Na verdade, depois de aprendê-los, você pode transformar o Sketch em algo mais online com o InDesign como uma ferramenta tipográfica. Isso é o que você precisa saber:

Recurso OpenType:

Muitos tipos de fontes vêm com conjuntos de caracteres alternativos usados ​​para facilitar a leitura ou para fins estilísticos, como diferentes espessuras de fonte. Como você já sabe, no Photoshop, basta apertar um botão para ativá-los. Enquanto isso, no Sketch, simplesmente não é tão fácil assim.

Se você quiser verificar uma gama completa de fontes, terá que fazer algo extra. Apenas vá para Menu Sketch> View> Show Fonts Y clique no ícone de engrenagem e depois em Tipografia . Depois disso, você terá acesso a funções de tipo adicionais, como ligaduras e um conjunto alternativo de caracteres. É simples!

Texto em um traço:

Hoje, raramente vemos texto escrito em um traço em web design. Ainda assim, ainda é um estilo bastante comum na impressão e até mesmo no design de logotipo. Criar texto em um traço usando o Sketch é surpreendentemente fácil. Basta desenhar o traço usando a ferramenta Caneta e escrever o texto próximo a esse traço. Depois de fazer isso, você deve selecionar a partir do Menu Sketch> Texto> Stroke Text . E aí está!

Kerning e linha de base:

Se você for um usuário do Photoshop, poderá acessar quase todos os recursos de tipografia nos painéis Caractere ou Parágrafo. No Sketch, você encontrará os mesmos recursos, apenas eles estão ocultos. Felizmente, você pode encontrá-los facilmente, desde que saiba como. Se você quiser abrir mais opções de estilo como Kerning, Ligature e Baseline, basta ir para Menu de esboço> Texto . É realmente muito simples!

Estilos em esboço:

Estilos são o que chamamos de predefinições de tipografia ao usar o Sketch. Além disso, você pode criá-los facilmente no menu suspenso de estilos localizado logo acima dos parâmetros de tipo na barra lateral direita. Fazer seus próprios estilos é uma prática bastante comum ao usar esta ferramenta. No entanto, nem todos sabem que os estilos podem ser classificados como símbolos. (Leia mais sobre este processo em meu artigo anterior Aqui).

Para criar uma pasta com estilos de fonte, as etapas de nomenclatura são as seguintes: folder_name style_name ou mesmo folder1 / folder2 / folder3 / style_name . Dê uma olhada neste exemplo abaixo para ver o que quero dizer:

Neste exemplo, agrupei meus estilos dentro da pasta contrato e então criei outra pasta para diferentes tamanhos de texto e outra para diferentes cores. Portanto, o nome do estilo é assim: * contract / h1 / dark *.