Projetamos e trabalhamos com fontes todos os dias. Mas nunca prestamos muita atenção à sua existência. Não os usamos bem, ou mesmo abusamos deles. Tudo isso porque não os entendemos. A fonte é um dos elementos importantes da tipografia; é também um dos assuntos mais profundos do design. Neste artigo, vamos discutir esse conhecimento profundo com você.
Tipos de fontes
As fontes inglesas (Typeface) são divididas em várias categorias principais. Este é o conhecimento básico que você deve saber ao usar fontes inglesas:
1. Serif
Serif é a parte decorativa da borda do traço. A área marcada em vermelho na imagem abaixo é a serifa.
A intenção original do design serifado é marcar o final dos traços com mais clareza, melhorar a taxa de reconhecimento e aumentar a velocidade de leitura. Além disso, o uso de fontes serifadas fará com que as pessoas se sintam mais ortodoxas. Portanto, muitos de nossos livros comuns em inglês, especialmente ensaios e romances, usam fontes serifadas para completar o texto.
As serifas comumente usadas em web design incluem Times New Roman e Georgia. O lado esquerdo da imagem abaixo é uma fonte Times New Roman de 12px e o lado direito é uma fonte Georgia de 12px.
Em chinês, a fonte Song que usamos é a fonte serif correspondente.
2. Sans-serif
Se uma fonte não tiver serifas, ela é chamada de não serifada ou sans-serif. A imagem abaixo é sem serifa.
Existem relativamente muitas sans-serifs comumente usadas em web design. Existem Arial, Verdana, Tahoma, Helivetica, Calibri, etc. A imagem abaixo mostra Arial, Verdana e Tahoma da esquerda para a direita:
É importante notar que embora as fontes serifadas sejam amplamente utilizadas em livros, as fontes serifadas raramente são usadas na Internet. Como a resolução da tela do computador não é comparável à dos livros, as fontes serifadas de 10 a 12px no texto principal são difíceis de ler na tela do computador. A imagem abaixo é uma comparação de 10px Verdana e 10px Times New Roman sem Cleartype. Como você pode ver, Verdana à esquerda pode ser facilmente identificada. O Times New Roman à direita é bastante difícil de ler.
3. Fontes monoespaçadas
As fontes monoespaçadas são, na verdade, apenas para fontes ocidentais. Porque as letras inglesas variam em largura. Por exemplo, i é muito mais estreito que m. Exibir código durante a programação. Se as letras não tiverem largura igual, o layout ficará feio. Na linha de comando do DOS, podemos ver que uma fonte de largura fixa é usada.
As fontes de largura constante necessárias para programação possuem os seguintes requisitos:
1. Todos os caracteres devem ter largura igual
2. Formatosde
caracteres simples, claros e padronizados
3. Suportar conjuntos de caracteres estendidos com códigos ASCII acima de 128;
(ASCII: 0× 20) Mesma largura de outros caracteres;
5. Três caracteres como “1”, “l” e “i” são fáceis de distinguir
6. Três caracteres como “0”, “o” e “; O" são fáceis de distinguir;
7. As partes frontal e traseira das aspas duplas e aspas simples são fáceis de distinguir, e é melhor que sejam simétricas em espelho;
8. Sinais de pontuação claros, especialmente colchetes, colchetes e colchetes.
Fontes monoespaçadas comuns incluem Courier e Courier New
4. Caligrafia
Como o nome sugere, a caligrafia é uma fonte de estilo manuscrito. Às vezes também chamamos de fonte de caligrafia. A maioria das fontes de caligrafia chinesa são rígidas. Pessoalmente, recomendo usar fontes de caligrafia japonesa. As fontes de caligrafia japonesa são mais suaves e humanas. No entanto, a desvantagem de usar fontes de caligrafia japonesa é que a maioria delas são do chinês tradicional e faltam muitos caracteres chineses.
5. Símbolo
O corpo de símbolo mais famoso do Windows é o Webdings (lembro que costumava usá-lo muito quando ainda estava no Windows 95...). Aqui estão algumas das fontes Webdings:
Estilos de fonte:
Os estilos de fonte comuns são: Normal, Negrito e Itálico.
Simplificando, negrito significa que a fonte será mais escura e mais “grossa”. Itálico significa inclinar ligeiramente o eixo do texto. Eles são usados para enfatizar um determinado parágrafo do texto dentro do espaço.
Quando falamos em negrito, podemos facilmente pensar na propriedade font-weight em CSS. Sabemos que além do normal e do negrito que costumamos usar, o valor do atributo font-weight também possui atributos como negrito, mais claro, 100~900, etc. Então, qual é o valor de 100 a 900? Na verdade, 100 a 900 não tem unidade. Uma boa fonte fornecerá designs diferentes para pesos diferentes. Se a fonte tiver designs pré-integrados para diferentes níveis de espessura, esses valores corresponderão a cada nível, respectivamente. Por exemplo, a fonte Zurich inclui seis fontes: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black e Zurich UltraBlack. Desta forma, Zurich Light corresponde aos três valores 100, 200 e 300, Zurich Regular corresponde a 400, que é "normal", Zurich Medium corresponde a 500, e Zurich Bold, que é "negrito", corresponde a 600, 700, Zurich Black corresponde a 800 e, por fim, Zurich UltraBlack corresponde a 900.
O itálico chinês geralmente não é usado na Internet. Como o chinês tem muitos traços, o uso do itálico dificultará a leitura.
Unidades
Usaremos algumas unidades em nosso web design:
1. Ponto (pt, ponto)
72 pontos = 1 polegada, 1 polegada equivale a 72 pontos. Além disso, 1 pica = 12 pontos
2. Pixel (pixel, px)
Um pixel é a menor unidade de imagem na tela do computador. Em termos leigos, é o menor ponto na tela.
3. DPI, PPI
O nome completo do DPI é Dots Per Inch, pontos por polegada, e o nome completo do PPI é Pixel Per Inch. Eles são unidades de resolução. Em outras palavras, quantos pontos (pixels) podem ser organizados no comprimento de 1 polegada. Por exemplo, geralmente nosso monitor tem cerca de 72ppi, o que significa que há 72 pontos (pixels) em um comprimento de 1 polegada. Quanto maior o dpi/ppi, maior a resolução, ou seja, quanto menores as partículas, mais delicada é a imagem. De modo geral, a resolução das fotos está entre 240 dpi e 300 dpi, por isso as fotos parecem muito mais detalhadas do que na tela. As revistas são impressas a 133 ou 150 dpi, e os livros de alta qualidade são impressos a 350-400 dpi, porque os livros mais bem impressos são impressos a 175 a 200 dpi. É por isso que textos do mesmo tamanho físico são muito mais claros quando visualizados em um livro do que em uma tela. É por isso que mencionamos antes que as fontes sem serifa podem ser usadas com ousadia na impressão de livros em inglês.
Essencialmente, não há diferença entre dpi e ppi. Se você realmente deseja encontrar a diferença, a única diferença pode ser que o dpi é frequentemente usado para descrever scanners e impressoras, enquanto o ppi é frequentemente usado para descrever a resolução da tela.
4. ex e x-height
são frequentemente usados em CSS. 1ex = altura da letra minúscula x.
5. em
é frequentemente usado em CSS. É claro que em não representa a altura da letra minúscula m (na verdade, a altura da letra minúscula m é geralmente igual à altura da letra minúscula x). 1em = 100% do tamanho da fonte. é uma unidade múltipla.
Espaçamento
1. Espaçamento entre linhas (altura da linha, entrelinha)
Quando se trata de espaçamento entre linhas (altura da linha, entrelinha), devemos primeiro aprender um termo chamado linha de base. Lembra-se do livro quadriculado que usamos para escrever cartas quando aprendemos inglês. A linha horizontal mais grossa é o que chamamos de linha de base? A linha de base é a linha acima do descendente da fonte onde a maioria das letras "fica". Na maioria das fontes, as letras maiúsculas são sempre colocadas próximas e acima da linha de base. As fontes chinesas são iguais às letras maiúsculas do inglês. A linha vermelha na imagem abaixo é a linha de base.
Então, o espaçamento entre linhas se refere à distância entre as linhas de base entre duas linhas adjacentes. A unidade de espaçamento entre linhas geralmente é em, que é definida de acordo com o tamanho da fonte. Nos navegadores, não há orientação para o espaçamento padrão entre linhas. De acordo com as recomendações fornecidas pelo W3C, o espaçamento entre linhas padrão deve estar entre 1,0em e 1,2em. Na verdade, ao definir o espaçamento entre linhas, existe um princípio na composição tipográfica de que o espaço entre as linhas deve ser maior do que o espaço entre as palavras, caso contrário, os leitores “serializarão” facilmente durante a leitura. Um espaçamento suficiente entre linhas pode separar cada linha do texto, tornando mais fácil para o olho distinguir a linha anterior ou seguinte. Nos últimos anos, a maioria das pessoas prefere espaçamento entre linhas de 1,5em para layout de texto na Web, especialmente em sites chineses. Ou seja, se for usado um tamanho de fonte de 12px, os designers geralmente preferem o espaçamento entre linhas de 18px. 1,5em é realmente um bom valor de experiência. Na verdade, o padrão para papéis chineses é usar espaçamento entre linhas de 1,5em.
2. Espaçamento entre letras (Espaçamento entre letras, rastreamento)
O espaçamento entre letras refere-se à distância entre um grupo de letras. O espaçamento entre palavras afeta a densidade do texto em uma linha ou parágrafo.
3. Kerning
Kerning é um processo técnico realizado para necessidades visuais. Simplificando, quando dois caracteres específicos estão alinhados, você pode especificar individualmente um espaçamento exclusivo entre palavras para eles. Por exemplo, quando um A maiúsculo é seguido por um v minúsculo, haverá um espaçamento visualmente maior entre os dois caracteres (na verdade, o espaçamento entre palavras é o mesmo), que não pode ser resolvido pelo espaçamento comum entre caracteres. Se você reduzir o espaçamento entre elas, as outras letras fluirão juntas. Neste momento, é necessário um ajuste de kerning para lidar com isso. A imagem abaixo é um exemplo de aplicação de kerning:
Parágrafo
1. Comprimento da linha (Medida)
O comprimento da linha refere-se à largura de um parágrafo de texto. Conforme mostrado abaixo:
Existem dois problemas de legibilidade relacionados ao comprimento da linha:
Quanto maior o comprimento da linha, maior será o espaçamento necessário entre linhas. Se o espaçamento entre linhas for muito pequeno, os leitores quebrarão facilmente durante a leitura. Se o espaçamento entre linhas for muito grande, os leitores sentirão que o texto é descontínuo ao ler as linhas.
No texto principal, são apropriadas 40 a 70 letras por linha.
2. Alinhamento
Existem basicamente quatro tipos de alinhamento de parágrafo: alinhado à esquerda, alinhado à direita, centralizado e justificado.
O alinhamento à esquerda refere-se a um método de alinhamento que define o conteúdo do texto, ajusta o espaçamento horizontal do texto e alinha o texto no parágrafo ou artigo à esquerda ao longo da direção horizontal. O alinhamento à esquerda dá ao texto no lado esquerdo do artigo uma borda nítida. Ao mesmo tempo, o lado direito do texto ficará irregular. Portanto, o alinhamento à esquerda em inglês também é chamado de irregular à direita, o que significa que o lado direito tem uma aparência irregular. O mesmo vale para o alinhamento correto.
O alinhamento central refere-se a um método de alinhamento que define o conteúdo do texto e ajusta o espaçamento horizontal do texto para que o texto do parágrafo ou artigo fique alinhado horizontalmente em direção ao meio. O alinhamento central faz com que o texto em ambos os lados do artigo fique perfeitamente concentrado no meio, de modo que todo o parágrafo ou artigo fique organizado.
O alinhamento significa definir ambas as extremidades do conteúdo do texto e ajustar o espaçamento horizontal do texto/palavras para que fiquem. distribuídos uniformemente nas bordas esquerda e direita da página. Justificar fornece bordas perfeitas ao texto em ambos os lados.
Depois de usar o alinhamento em ambas as extremidades, as linhas de alinhamento em ambos os lados ficarão muito claras e a sensação “rápida” do bloco de texto também será óbvia. No entanto, na composição tipográfica em inglês, quando o comprimento da linha é muito curto, usar o alinhamento pode fazer com que o espaçamento entre algumas linhas seja muito longo e o espaçamento entre algumas linhas seja muito curto. Esse espaçamento irregular entre palavras parecerá muito confuso. com patches por toda parte.
3. Legibilidade
Legibilidade descreve a facilidade e o conforto de leitura de texto impresso. Na verdade, este é o propósito mais fundamental do design comum. Além dos princípios descritos acima, também reuni alguns pequenos princípios de legibilidade para compartilhar com vocês:
Use no máximo três tamanhos de fonte em um design.
Use até três fontes em um design.
É necessário garantir um certo contraste, mas não um contraste excessivo. A escrita Yang (caracteres pretos sobre fundo branco) é mais fácil de ler do que a escrita Yin (caracteres brancos sobre fundo preto). No fundo de #fff, o texto usando #333 parece mais confortável do que o texto #000.
Preste atenção ao fundo do texto. O fundo deve ser simples. Evite ruído de fundo.
"Menos é mais" Use o menor número de elementos para transmitir o máximo de informações.
Faça seu link parecer um link.
Faça bom uso do seu espaço.