Corrigido artigo antigo sobre tipografia, para quem ainda não viu será útil para familiarização

Tipografiaé um dos aspectos mais importantes do web design, pois transmite informações básicas. Infelizmente, muitos designers e clientes têm medo de experimentos ousados, escolhendo uma ou duas fontes "comprovadas" para seus projetos.

Portanto, este artigo é sobre aqueles perdidos no oceano da tipografia. Vamos falar sobre os fundamentos da tipografia, o que são as fontes e a estrutura das fontes.

Typefaces vs fonts - qual é a diferença?

Muitas pessoas usam as palavras tipo de letra e fonte de maneira intercambiável. Na verdade, eles não são a mesma coisa, agora vou explicar o porquê.

Fone de ouvidoé um conjunto de caracteres estilisticamente semelhantes que podem ser escritos / impressos. São números, letras, símbolos. Fonteé um conceito mais restrito que é determinado por vários fatores, como tamanho e estilo. Basicamente, Arial é uma fonte e Arial Bold é uma fonte.

Classificação

As fontes podem ser divididas em vários grupos - serif, sans-serif, script, exibição. No entanto, existem outros tipos de classificação.

Fontes serif, antigas (serif)

Eles são chamados assim porque cada letra tem pequenas serifas. Ao imprimir grandes blocos de texto em web design, eles não são recomendados porque são difíceis de ler. Essas fontes geralmente são usadas para títulos.

Fontes Serif têm alguns subtipos - por exemplo, Estilo antigo("Estilo antigo" - também são chamados de humanistas, serifa humanística) são as primeiras fontes desta classificação, elas foram usadas já em 1400. Sua característica distintiva é que a parte do símbolo que está localizada em um ângulo é tornada fina. Exemplos de fontes são Adobe Jenson, Centaur e Goudy Old Style.

Serifas de transição- usado em 1700. Isso inclui fontes como Times New Roman e Baskerville, bem como Caslon, Georgia e Bookman. Eles têm uma diferença mais perceptível entre as partes grossas e finas das letras do que o Estilo Antigo, mas menos perceptível do que o Moderno.

Serifas modernas (novo estilo antigo)- têm sido usados ​​desde 1700 e têm um forte contraste entre partes grossas e finas dos caracteres. Isso inclui fontes como Didot e Bodoni

E finalmente , Serifas de laje- geralmente têm a mesma espessura em todas as linhas e grandes serifas nas extremidades

Fontes serif, Sans Serif

As fontes com serifa têm esse nome porque não têm serifas.) Eles parecem mais modernos e foram usados ​​pela primeira vez no século XVIII.

Aqui estão os 4 tipos principais de fontes serif: Grotesco, Neo-grotesco, Humanista e Geométrico.
Velhos grotescos- a primeira, são semelhantes às fontes com serifa, mas sem serifa.
Por exemplo, Franklin Gothic e Akzidenze

Novos grotescos tem uma aparência simplificada em comparação com os antigos grotescos. Muitas das fontes mais populares hoje são novas sans serifs, como MS Sans Serif, Arial, Helvetica e Univers.

Humanistas- são mais caligráficas do que todas as outras fontes serif (ou seja, a espessura da linha muda). Estes incluem, por exemplo, Gill Sans, Frutiger, Tahoma, Verdana, Optima e Lucide Grande - eles são freqüentemente usados ​​para preencher o corpo de um site.

Geométrico baseiam-se em números corretos, por exemplo, "O" é um círculo, etc.; são consideradas as fontes serifadas mais modernas. Os exemplos são ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Manuscrito (Script)

As fontes escritas à mão são baseadas na escrita à mão. Existem dois tipos de fontes - formal e casual. Formais, como se fossem escritos à mão, eles vêm dos séculos XVII e XVIII. Algumas fontes são baseadas na escrita de mestres famosos como George Snell e George Bickham. Kuenstler Script é um exemplo de fontes modernas. Agradável e elegante, não cabe no corpo da página.

As fontes Kezhl são uma versão mais moderna, originada no século XX. É menos formal, geralmente com traços ousados ​​e efeitos de pincelada. Essas fontes incluem Mistral e Brush Script.

Exibir fontes

A categoria de fontes de exibição inclui aquelas fontes que geralmente não são adequadas para escrever texto. Na maioria das vezes, eles servem como um sotaque. Geralmente usado na indústria de impressão, embora estejam começando a encontrar seu caminho nas páginas da Internet. Entre os displays você pode encontrar, por exemplo, blackletter - as fontes originais das primeiras impressoras.

Fontes não alfabéticas (Dingbats)

Fontes não alfabéticas são aquelas fontes que não contêm letras, mas contêm símbolos e ornamentos.

Proporcional versus monoespaçado

Em fontes proporcionais, um símbolo ocupa tanto espaço quanto sua grafia natural requer. Por exemplo, Times New Roman é uma fonte proporcional. Mas para fontes monoespaçadas, todos os caracteres têm a mesma largura. Essas fontes incluem, por exemplo, Courier New

Humor

O humor de uma fonte influencia muito se é apropriado usá-la em uma determinada situação. Os contrastes são frequentemente usados ​​- o estilo empresarial é combinado com o informal, o leve com o dramático. Por exemplo, Times New Roman é uma fonte restrita, e é isso que costuma ser usado para correspondência comercial. Mas, por exemplo, Helvetica geralmente muda seu humor dependendo das fontes ao redor.

Espessura e estilo

Existem fontes por espessura: claro, fino, regular, médio, negrito, pesado ou preto.

Existem três estilos de fonte - itálico, oblíquo e versalete. Versaletes são comumente usados ​​para cabeçalhos.

Itálico e oblíquo são intercambiáveis, embora sejam de estilos diferentes. Oblíqua é uma versão oblíqua das fontes regulares. Para obtê-lo, você só precisa usar a função Free Transform-distort do Photoshop. Mas o itálico já é um conjunto separado de caracteres responsável pela versão oblíqua da fonte.

Estrutura da fonte

Cada caractere possui um conjunto de características que podem ser usadas para determinar como ele funciona com outras fontes. Aqui estão os principais:

Linha de base- uma linha imaginária na qual o texto está localizado. Às vezes, as fontes arredondadas são ligeiramente deslocadas da linha da fonte.

Linha minúscula (linha média) denota a altura da maioria das letras minúsculas, geralmente determinada pela altura da letra "x". É daí que vem o conceito de altura x.

Boné- altura letra maiúscula"UMA".

A imagem acima mostra três partes comuns de todas as letras.

Traço principal, haste- a vertical principal de cada símbolo, incluindo a oblíqua.

Barra transversal (barra)- parte horizontal da fonte

Oval (tigela)- a parte arredondada da fonte.

Remoto superior (Ascender)- a parte que sai de letras como "d", "h" e "b".

Descender- a parte saindo de letras como "p", "q" e "f"

Serifs- uma marca registrada de fontes serif). Em algumas fontes, eles são mais pronunciados, enquanto em outras, são menos pronunciados.

Abertura- indica a lacuna em caracteres abertos, como “A”, “c” ou “m”

Orelhaé um acréscimo decorativo a um símbolo, como no exemplo acima para o “g”.

Traço de conexão (linha fina)é a parte mais fina de uma fonte serifada.

Barra - linha horizontal como nas letras “A” e “H”.

Drop (Terminal)- final redondo ou oval (em forma de gota) do traço no desenho de alguns caracteres da fonte.

Ciclo ocorre apenas em algumas letras “g” minúsculas e pode ser totalmente ou parcialmente coberto.

Spur- um pequeno entalhe em algumas letras, como o “G”.

Ligação conecta a parte superior e inferior da letra “g”.

Coluna- a curva central que a letra "s" possui.

Cauda da letra (cauda)- linha decorativa, por exemplo na letra “R” ou “Q”.

Elemento final (Terminal, Finial)- final do traço não serifado

Ombro- uma linha arredondada que se afasta do curso principal. (para ser honesto, muitos sites russos oferecem uma definição completamente diferente desse conceito).

Com o advento de computadores pessoais e os primeiros sistemas de editoração eletrônica experimentaram uma mudança tectônica na tipografia que só agora está se tornando visível. Esta está longe de ser a primeira grande mudança na tipografia, e houve outras. Basta lembrar o tempo em que as máquinas do mundo industrial triunfaram sobre os artesãos. A produção em massa e o lucro são mais importantes do que a beleza do tipo. A quantidade é mais importante do que a qualidade.

Os grandes mestres pararam de criar novas fontes - as que já existiam eram adequadas para imprimir livros. O artesão, por mais profissional que seja, ficou ocioso e passou a fazer parte do processo tecnológico.

No entanto, a vitória do industrialismo não significou que os grandes mestres desapareceram com o advento das impressoras. Esses dois mundos continuaram a existir independentemente um do outro - os impressores reconheciam o talento dos artesãos e eles, por sua vez, entendiam que o progresso não poderia ser interrompido. Esta foi a segunda mudança de tipografia, com a qual perdeu parte de sua "alma" ou, se assim posso dizer, de humanidade. Mas para entender o que aconteceu muito recentemente, você tem que viajar no tempo 500 anos atrás e descobrir como tudo começou.

PRIMEIRA TRANSIÇÃO

O primeiro conflito entre o novo e o antigo surgiu após a invenção da primeira impressora. Seu criador, Johannes Gutenberg, poderia usar a máquina para criar uma ampla variedade de composições, com velocidades de impressão de até 240 páginas por hora. Foi uma revolução.

Antes disso, todos os livros eram feitos inteiramente à mão. Os tomos do passado eram escritos à mão e adornados com desenhos e ornamentos intrincados. O processo de cópia era muito longo, mas, como resultado, qualquer livro, mesmo uma cópia, era uma obra de arte.

Claro, os primeiros livros impressos não eram comparáveis ​​aos escritos à mão. Não eram muito bonitos, mas eram menores e mais baratos. E o mais importante: a capacidade de substituir caracteres individuais e famílias de fontes inteiras tornou possível imprimir livros não apenas em latim, mas também em outras línguas europeias.

As pessoas receberam bem essas mudanças. Eles precisavam de livros em um idioma que pudessem entender e livros para levar consigo. Eles tinham sede de conhecimento e os livros impressos a saciam.

No entanto, como resultado da primeira transição, o livro perdeu muito de sua humanidade. As máquinas assumiram o processo principal, mas os artesãos ainda eram procurados. Cada letra foi entalhada à mão, e a arte e as ilustrações também foram feitas pelo homem. No entanto, não demorará muito para que a habilidade comece a deixar o processo de criação de livros.

IDADE DIGITAL

A primeira travessia destruiu os livros manuscritos. A industrialização finalmente tirou o selo da humanidade, tudo se mecanizou e os artesãos ficaram sem trabalho. Mas a terceira transição finalmente encerrou a tipografia como arte. A maioria das fontes hoje em dia são surpreendentemente inexistentes. É apenas um monte de fontes no seu computador. Quase ninguém conhece a história desta ou daquela fonte. Ninguém se importa antes. Percorremos centenas de fontes em um minuto procurando uma fonte adequada, e todo o resto não é tão importante.

_______________________

“Em nosso mundo altamente computadorizado, a proliferação de tipos e sua variedade de variações representam um novo nível de poluição visual que ameaça diretamente nossa cultura”, diz o designer Massimo Vignelli. "Dentre as milhares de fontes, precisamos apenas de algumas básicas, porque o resto é lixo."
_______________________

Em alguns aspectos, ele está certo. A tipografia não é apenas fontes. Não é só lindas cartas, é outra coisa, algo que nos faz sentir. Basicamente, a tipografia é uma mensagem. De acordo com o famoso tipógrafo russo Lazar Lissitzky, a tipografia deve transmitir opticamente ao leitor a mesma ideia de que o locutor expressa com sua voz. "

Há muito tempo, ninguém escreve com uma caneta no pergaminho. Foi-se o papel áspero que cheirava a tinta. O mercado de impressão brilhante encolheu a proporções microscópicas. Hoje lemos textos que não foram impressos, mas datilografados, e não os lemos de forma alguma no papel. E, aparentemente, outra transição aguarda a tipografia. O que será, ninguém sabe, mas, muito provavelmente, seguindo o papel, os monitores a que estamos acostumados se tornarão obsoletos. É difícil dizer quando uma nova revolução ocorrerá, mas certamente haverá uma nova transição.

O mais triste em tudo isso é que as pessoas perderam uma parte de si mesmas em busca da perfeição. Praticamente ninguém precisa da habilidade da caligrafia hoje. Demora muito, requer cuidado e perseverança. Isso não faz sentido hoje - existem fones de ouvido para todos os gostos. Escolhemos fontes como zumbis: nome, tamanho, estilo ... Mensagem? Mensagem? Não há mensagem por trás das fontes do computador, sem histórico, nada.

NOSTALGIA DO PASSADO

Hoje, muitos designers sentem a necessidade de novas fontes que dariam ao texto a personalidade tão necessária. Existem muitas maneiras de trabalhar com tipografia, cada uma com o mesmo objetivo de se afastar da falta de rosto das fontes digitais. Usa-se tudo - contraste de cor, ilusão de volume, espaço negativo, enfim, tudo que pode transformar uma fonte padrão em outra um pouco menos padronizada.

E a este respeito, podemos notar três tendências que vão ganhando força, que demonstram o desejo dos designers em devolver às fontes a autenticidade perdida. Existem apenas três tendências principais na tipografia, mas são difíceis de ignorar, pois aparecem literalmente em todos os lugares. Estamos falando de estilos como retro, aquarelas e bonés.

IMPRESSÃO VINTAGE GRANGE

Um dos problemas de design mais comuns é o problema com.

Neste artigo, compartilharemos alguns princípios da boa tipografia e daremos dicas sobre como evitar muitos erros comuns.

Este artigo não é um livro sobre tipografia ou a arte da tipografia, é mais como “ dicas rápidas para melhorar a base da fonte do design ”.

Regra 1. Quanto menores as fontes, melhor

Um dos maiores erros que os designers cometem é usar também um grande número fontes e / ou seus estilos. Tente reduzi-los a dois ou três. Ou seja, o texto principal deve ter a mesma fonte e tamanho.

Escolha um para os títulos e fique com ele, talvez como último recurso, outro para os subtítulos. Não tenha medo se as fontes forem muito diferentes umas das outras. Ao usar duas fontes muito semelhantes em seu design, o leitor pode pensar que você apenas cometeu um erro e escolheu acidentalmente a fonte errada ao digitar.

Cuide da consistência da cor, densidade, etc. ou seu texto parecerá moscas bêbadas espalhadas por toda a página.

Regra 2. Cuidado com a descarga

Tenha cuidado para não ultrapassar as letras. Se você tiver problemas com a falta de espaço para o texto, é melhor reduzir a fonte. Sim, pode adicionar espaço entre os parágrafos, mas não há nada com que se preocupar. Isso lhe dará algum espaço para respirar durante a leitura.

Regra 3. Alinhamento correto

Não centralize tudo (a menos que seja um movimento de design especial). Considere o uso de uma grade. Afinal, tudo na página está interligado. Use as diretrizes e posicione os objetos de acordo com elas. Não espalhe objetos nos cantos da página como se você não pudesse decidir onde colocá-los.

Regra 4. Fontes menos decorativas

Você tem belas fontes decorativas? Maravilhoso! Mas isso não significa de forma alguma que seja necessário usá-los para o texto dos parágrafos. Atrás das fontes decorativas, na maioria das vezes, há uma história ou elas são usadas em um caso específico, por exemplo, para um título ou título. Muitas vezes, quanto mais simples melhor, é por isso que fontes como Helvetica são tão populares.

Regra 5. O tamanho importa

É mais ou menos do tamanho das letras do texto;). Os títulos são bons quando digitados em negrito e grandes, mas se você usar letras muito grandes no corpo do texto, ficará mais barato. Pense nisso. Você vai a um bom restaurante e muitas vezes acontece que o menu está escrito letras pequenas, Isso parece legal. (Certifique-se de que a fonte não é pequena o suficiente para ser difícil de ler.) Não tenha medo de tornar suas manchetes muito maiores do que sua cópia do corpo.

Regra 6. Observe a legibilidade

Tudo o que você faz é feito para que possa ser lido. Texto escuro ativado fundo escuro- isso não é muito Boa ideia... Pior ainda, colocar um texto pequeno sobre uma foto de alto contraste. Lembre-se de evitar colocar texto sobre qualquer coisa.

Regra 7. Escolha as cores certas

Qual é a melhor cor para a fonte? Geralmente, acredite ou não, preto ou branco geralmente é o melhor. Se você estiver usando uma cor diferente de tons diferentes de cinza, diminua a saturação. Fontes de cores vivas podem ser difíceis de ler. Cuidado com as combinações vibratórias complexas, como vermelho sobre verde.

Regra 8. Agrupamento adequado

É melhor combinar informações relacionadas. Isso tornará o design mais claro. Por exemplo: olhe para um pôster de filme, todos os dados são agrupados em blocos atraentes. Eles agora podem ser vistos como elemento separado Projeto. Exemplos de mau agrupamento - abra as páginas amarelas.

Regra 9. Liderança suficiente

Esta é a distância entre as linhas de texto. É muito importante escolher o intervalo certo. É muito mais agradável ler quando há espaço para o resto dos olhos nas entrelinhas. Como regra geral, tente usar entrelinhas pelo menos 2 pontos maiores que o tamanho da fonte. Por exemplo: para legibilidade máxima em 10pt, a fonte deve ser definida para pelo menos 12pt.

Regra 10. Cuidado com o kerning

Kerning é o espaçamento entre caracteres individuais em uma palavra. É importante ter experiência na identificação de kerning incorreto, pois muitas vezes programas, como o Photoshop, cometem erros na sua colocação. Isso precisará ser ajustado manualmente, mas o principal é não exagerar. Se você não gosta de espaçamento entre caracteres, mas não tem certeza de como melhorá-lo, escolha uma fonte diferente.

Experimente essas regras ao trabalhar com tipo. Blocos de tipo bem projetados devem ter uma boa aparência sem nenhuma imagem. Na melhor das hipóteses, seu trabalho de tipografia reforça uma experiência de design positiva. Deve ser atraente e fácil de ler.