Skip to main content

Visão geral do básico de tipografia

Jour 233 : Comment les optimistes font pour avoir de la conversation (Pode 2025)

Jour 233 : Comment les optimistes font pour avoir de la conversation (Pode 2025)
Anonim

Para usar a explicação mais básica, a tipografia é o design e o uso de fontes como meio de comunicação. Muitas pessoas consideram que a tipografia começou com Gutenberg e o desenvolvimento do tipo móvel, mas a tipografia remonta a muito mais do que isso. Este ramo do design realmente tem suas raízes em letras manuscritas.

A tipografia engloba tudo, desde a caligrafia até o tipo digital que vemos hoje em páginas da web de todos os tipos. A arte da tipografia também inclui designers de tipos que criam novas formas de letras que são então transformadas em arquivos de fontes que outros designs podem usar em seus trabalhos, desde obras impressas até os sites mencionados anteriormente. Por mais diferentes que esses trabalhos possam ser, os fundamentos da tipografia sustentam todos eles.

Os elementos da tipografia

Se você já conversou com um web designer que usa tipografia em seu trabalho, provavelmente já ouviu os termos "tipo de letra" e / ou "fonte". Muitas pessoas usam esses dois termos de forma intercambiável, mas na verdade existem algumas diferenças entre esses dois itens.

Typeface é o termo dado a uma família de fontes (como Helvetica Regular, Helvetica Italic, Helvetica Black e Helvetica Bold). Todas as várias versões da Helvetica compõem o tipo completo.

Fonte é o termo usado quando alguém está se referindo a apenas um peso ou estilo dentro dessa família (como Helvetica Bold). Tantos tipos de letra são compostos por várias fontes individuais, todas semelhantes e relacionadas, mas diferentes de alguma forma. Algumas fontes podem incluir apenas uma única fonte, enquanto outras podem incluir inúmeras variações das formas da letra que compõem as fontes.

Se isso parecer confuso, não se preocupe, se alguém não for um especialista em tipografia, provavelmente usará o termo "fonte", independentemente de qual desses termos ele realmente signifique, e até mesmo muitos designers profissionais usam esses dois termos de forma intercambiável. A menos que você esteja falando com um designer de tipos puro sobre a mecânica da nave, provavelmente está bem seguro usando qualquer um desses dois termos que preferir. Dito isto, se você entende a distinção e pode usar corretamente os termos corretos, isso nunca é uma coisa ruim!

Classificações tipográficas

Às vezes chamado de "famílias de fontes genéricas", esses são grandes agrupamentos de tipos de letra baseados em várias classificações genéricas nas quais diferentes fontes se enquadram. Em páginas da Web, existem seis tipos de classificações de fonte que você provavelmente verá:

  • Serif
  • Sem serifa
  • Roteiro
  • Monoespaçado
  • Cursivo
  • Fantasia

Há também várias outras classificações de fonte que são derivadas delas. Por exemplo, as fontes "slab serif" são semelhantes às serifas, mas todas apresentam um design reconhecível com serifas grossas e volumosas nas letras. Serif e sans-serif são as duas classificações de fonte mais comuns usadas na maioria dos sites.

Anatomia da fonte

Cada tipo de letra é composto de diferentes elementos que o distinguem de outros tipos, que é referido como anatomia de tipo. A menos que você esteja indo especificamente para o design de tipos e procurando criar novas fontes, os web designers geralmente só precisam conhecer os conceitos básicos da terminologia de tipos.

Em um nível básico, os elementos da anatomia de tipo de letra dos quais você deve estar ciente são "cap" e "altura x", e "descendentes" e "ascendentes".

Cap e x-height é a altura das letras maiúsculas no tipo e a altura da letra x. Diz-lhe quão altas as letras maiores serão, bem como o tamanho da maioria das letras minúsculas. Todas as fontes são dimensionadas com base nessas duas características.

Descendentes e ascendentes são as partes das letras que vão abaixo e acima da linha de altura x. Isso geralmente está se referindo a letras minúsculas. Por exemplo, a letra "b" tem um ascendente (a peça que fica "acima" da letra), enquanto a letra "p" tem um descendente (as partes que afundam "para baixo" da letra).

Espaçamento ao redor de cartas

Existem vários ajustes que podem ser feitos entre e ao redor das letras que afetam a tipografia. Fontes digitais são criadas com muitas dessas características, e em sites, temos capacidade limitada para alterar esses aspectos da fonte. Isso geralmente é bom porque a maneira padrão de exibir as fontes é geralmente preferível.

  • Kerning: O espaço horizontal entre letras individuais
  • Rastreamento: O espaço entre grupos de letras
  • Conduzindo: Espaço vertical entre as linhas do tipo (isso é conhecido como altura da linha em termos do site)
  • A medida: O comprimento das linhas de texto
  • Alinhamento: Colocar visualmente o texto à esquerda, à direita, centrado ou justificado
  • Ligaduras: Cartas se moviam tão juntas que suas anatomias são combinadas, essencialmente fluindo uma letra para outra

Mais elementos de tipografia

A tipografia é mais do que apenas os tipos de letra que são usados ​​e os espaços em branco ao redor deles. Há também outras coisas que você deve ter em mente ao criar um bom sistema tipográfico para qualquer design:

"Hifenização" é a adição de um hífen (-) no final das linhas para ajudar a evitar problemas de legibilidade ou tornar a justificação melhor. Embora comumente encontrados em documentos impressos, a maioria dos web designers ignora a hifenização e não a utiliza em seu trabalho porque não é algo tratado automaticamente pelos navegadores da web.

"Trapo" é a borda vertical desigual de um bloco de texto. Ao prestar atenção à tipografia, você deve olhar seus blocos de texto como um todo para se certificar de que o pano não está afetando o design.Se o pano estiver muito irregular ou irregular, isso pode afetar a legibilidade do bloco de texto e torná-lo uma distração. Isso é algo que é automaticamente manipulado pelo navegador em termos de como ele digita de uma linha para outra.

Uma única palavra no final de uma coluna é uma viúva e, se estiver no topo de uma nova coluna, é órfã. "Viúvas" e "órfãos" ficam mal e podem ser difíceis de ler.

Obter suas linhas de texto para exibir perfeitamente em um navegador da web é uma proposta cansativa, especialmente quando você tem um site responsivo e exibições diferentes para diferentes tamanhos de tela. Seu objetivo deve ser analisar o site em tamanhos diferentes para tentar criar a melhor aparência possível, aceitando que, em certos casos, seu conteúdo terá janelas, órfãos ou outras exibições abaixo do ideal. Seu objetivo deve ser minimizar esses aspectos do design de um tipo, além de ser realista no fato de que você não pode alcançar a perfeição para cada tamanho de tela e exibição.

Passos para verificar sua tipografia

  1. Escolha os tipos de letra com cuidado, olhando para a anatomia do tipo, bem como em que tipo de família está.
  2. Se você criar o design usando o texto de espaço reservado, não aprove o design final até ver o texto real no design.
  3. Preste atenção nos pequenos detalhes da tipografia, como hífens e traços.
  4. Olhe cada bloco de texto como se não tivesse palavras. Quais formas o texto faz na página? Certifique-se de que essas formas carregam todo o design da página para frente.