Como ajustar as propriedades do texto no Adobe XD

Quando você tem texto em seu projeto Adobe XD, pode começar a alterar as propriedades do texto. Essas propriedades incluem Família da fonte, Tamanho da fonte, Peso da fonte, Alinhamento, Espaçamento entre caracteres (kerning e rastreamento), Espaçamento entre linhas (entrelinha), Preenchimento, Borda (traço), Sombra (sombra) e Desfoque de fundo. Portanto, vamos revisar como essas propriedades são aplicadas.

Sobre legibilidade e seleção de fontes

A seleção de uma fonte é de importância crítica. Você pode ter muitas opções de fontes em seu sistema, mas apenas alguns poucos irão considerá-lo uma escolha bem-sucedida para leitura na tela. Algumas características a serem procuradas em sua seleção de fonte incluem o seguinte:

• Serif ou não serifado? Abaixo, você vê uma família de fontes no estilo serifado na parte superior e uma família sem serifa na parte inferior. As serifas têm uma ligeira projeção que arremata o traço de uma letra. Sans serif, por outro lado, não tem aquela ligeira projeção. As fontes sem serifa tendem a parecer mais modernas e são uma escolha popular para aplicativos e sites interativos. No passado, acreditava-se que as famílias de fontes com serifas eram mais fáceis de ler quando havia uma grande quantidade de texto. Testes realizados com dispositivos de rastreamento ocular provaram que não há grande diferença na legibilidade entre serif ou sans-serif, então sinta-se à vontade para escolher qualquer um dos estilos, desde que preste atenção a algumas das outras características da fonte a seguir.

  Uma fonte com serifa na parte superior, sem serifa na parte inferior.

• Larguras de linha retas e uniformes: como seu tipo será criado a partir de pixels, é melhor não ter muitas variações na largura do texto. Você pode ver a diferença, em uma visualização de pixel, entre uma escolha de fonte com variação na largura (topo) e uma fonte que é consistente em sua largura.

  A fonte superior tem variação nas linhas grossas e finas que criam a fonte; a fonte inferior é consistente e mais fácil de ler na tela.

• Contadores fortes: os contadores são os buracos que você vê em letras como "O", "B" e "R" Preste atenção ao tamanho desses contadores, pois eles também podem causar problemas de legibilidade se fecharem quando forem exibidos como pixels em uma tela. Uma visualização de pixel de duas famílias de fontes diferentes aparece; veja como os contadores se parecem em comparação uns com os outros.

  Procure contadores abertos fortes em sua seleção de família de fontes.

• Descendentes e altura do boné: Descendentes curtos e alturas do boné baixas são importantes para a legibilidade na tela. No topo, você vê uma família de fontes com descendentes curtos e alturas de capitalização baixas; na parte inferior, uma fonte com longos descendentes e alturas de topo.

  Uma família de fontes com descendentes curtos e uma altura de capa baixa normalmente é mais fácil de ler na tela.

Selecionando sua família de fontes

Agora que você sabe o que torna uma seleção de fonte melhor para facilitar a leitura, use o painel Propriedades para selecionar uma. Os itens a serem observados ao fazer sua seleção incluem o seguinte:

• Família de fontes: depois de inserir algum tipo na tela, você pode selecioná-lo e escolher o menu suspenso Família de fontes na seção Texto do painel Propriedades. Se você souber a fonte desejada, simplesmente comece a digitar o nome da fonte na caixa de texto Família de fontes e, se estiver em seu sistema, ela será encontrada em sua lista.

  Não se esqueça de que você tem fontes disponíveis através do Adobe TypeKit.

• Peso da fonte: depois de selecionar uma família de fontes, você pode escolher um peso no menu suspenso Peso da fonte. Dependendo das fontes que você possui em seu sistema, você terá diferentes opções de espessura de fonte.

  Escolha uma família de fontes e espessura de fonte.

• Tamanho da fonte: você pode simplesmente digitar um tamanho de fonte na caixa de texto Tamanho da fonte, mas se não tiver certeza de qual tamanho funciona melhor, você pode posicionar o cursor abaixo da caixa de texto Tamanho da fonte e clicar e arrastar. Procure a seta de duas pontas antes de arrastar. Arrastar para cima diminui o tamanho; para baixo aumenta o tamanho.

  Clique e arraste para alterar visualmente o tamanho da fonte.

• Alinhamento: você pode alterar o texto selecionado para Alinhar à esquerda, Centro ou Direita usando os botões Alinhamento na seção Texto do painel Propriedades.
• Espaçamento entre caracteres: o espaçamento entre caracteres se refere ao espaço entre os caracteres. Isso é conhecido como rastreamento . Aqui, você vê o resultado do aumento do espaçamento entre os caracteres.

  Caracteres em espaçamento normal, definidos em 0 (zero) e, em seguida, definidos em 150.

Observe que você pode usar a mesma técnica de clicar e arrastar que está disponível na caixa de texto Tamanho da fonte para alterar visualmente o espaçamento dos caracteres.

Você também pode alterar visualmente o tamanho do espaçamento de caracteres clicando e arrastando.

• Altura da linha: a altura da linha está à esquerda , o espaço entre as linhas do texto. Isso pode desempenhar um papel importante no design de informações, portanto, certifique-se de usá-lo de forma consistente em todo o design. Você também pode posicionar o cursor abaixo da caixa de texto Altura da linha e clicar e arrastar para cima ou para baixo para diminuir e aumentar a altura da linha.
• Cor: altere a cor de preenchimento clicando na caixa ao lado de Cor de preenchimento no painel Propriedades. Você executa essa tarefa da mesma forma que faria com qualquer forma. Selecione a caixa Preenchimento e selecione uma cor no Seletor de cores. Você também pode selecionar a transparência para o seu texto no slide Transparência disponível à direita do Seletor de cores.
• Borda: a aplicação de uma borda coloca um traço ao redor do texto. Isso não é recomendado porque pode causar problemas de legibilidade. Use-o com moderação e talvez apenas para efeitos especiais. A imagem abaixo mostra um exemplo de uma fonte maior que tem um traço fino e um preenchimento branco em um fundo mais escuro. Em uma situação como essa, uma borda pode funcionar, mas não com um texto menor.

  Uma pequena borda com um preenchimento branco em um fundo escuro.