Nós projetamos lidamos com fontes todos os dias. Mas nunca nos importamos seriamente com a existência deles. Nós não os usamos bem ou mesmo abusamos deles. É tudo porque não os conhecemos. As fontes são um dos elementos importantes da digitação; eles também são uma das ciências mais profundas no design. Neste artigo, vamos discutir esse profundo conhecimento com você. Tipo de fonte As fontes inglesas (tipo de letra) são divididas em várias categorias principais. 1. Serif Serif é a parte decorativa da borda do golpe. A marcação vermelha na figura abaixo é a serif. A intenção original do design serif é indicar mais claramente o fim do derrame, melhorar a taxa de reconhecimento e melhorar a velocidade de leitura. Além disso, o uso de fontes serif fará com que as pessoas se sintam mais ortodoxas. Portanto, muitos de nossos livros ingleses comuns, especialmente jornais e romances, usam serifas para concluir o texto principal. Geralmente usados serifs no web design são Times New Roman e Geórgia. O lado esquerdo da figura abaixo é a fonte do Times New Roman com 12px e o lado direito é a Geórgia com 12px. Em chinês, a fonte da música que usamos é a fonte serif correspondente. 2. Sans-serif/sans-serif Se a fonte não for serif, ela será chamada sserif ou sem serif. A figura a seguir é um sanserif. Existem Serifs de Sans relativamente mais comuns usados no web design. Existem Arial, Verdana, Tahoma, Helivetica, Calibri, etc. A figura a seguir é Arial, Verdana e Tahoma da esquerda para a direita: Vale ressaltar que, embora as fontes serifs sejam amplamente utilizadas em livros, as fontes serifs raramente são usadas na Internet. Como a resolução da tela do computador não é comparável à dos livros, é difícil reconhecer as fontes serif de 10 a 12px na tela do computador. A figura abaixo é uma comparação entre Verdana de 10px e Times New Roman de 10px sem ClearType. Você pode descobrir que o Verdana, à esquerda, pode ser bem identificado. Times New Roman à direita é bastante difícil de identificar. 3. Monospace As fontes monowidth são realmente apenas para fontes ocidentais. Porque a largura das letras em inglês varia. Por exemplo, eu é muito mais estreito que m. Ao programar, o código é exibido, se as letras não forem iguais em largura, o layout será feio. Na linha de comando do DOS, podemos ver que a fonte monoespacial é usada. As fontes monofácicas necessárias para a programação têm os seguintes requisitos: 1. Todos os caracteres são iguais em largura; 2. Formas de caracteres concisas, claras e padronizadas; 3. Suporta conjuntos de caracteres estendidos com código ASCII de 128 ou acima; 4. Os caracteres de espaço em branco (ASCII: 0 × 20) são iguais a outros caracteres; 5. Os três caracteres como "1", "L" e "I" são fáceis de distinguir; 6. Os três caracteres como "0", "O" e "O" são fáceis de distinguir; 7. As partes dianteiras e traseiras de citações duplas e citações únicas são fáceis de distinguir, e é melhor ter espelhado-simétrico; 8. Formas de pontuação clara, especialmente aparelhos encaracolados, aparelhos redondos e aparelhos quadrados. As fontes monofácicas comuns incluem Courier, Courier New 4. Caligrafia Como o nome sugere, a caligrafia é uma fonte de estilo de caligrafia. Às vezes, também chamamos de fontes de caligrafia. A maioria das fontes de caligrafia chinesa é relativamente rígida. Pessoalmente, recomendo usar fontes de caligrafia japonesa. As fontes de caligrafia japonesa são mais macias e humanas. No entanto, a desvantagem de usar fontes de caligrafia japonesa é que a maioria delas é tradicional e muitos caracteres chineses estão faltando. 5. Símbolo O corpo simbólico mais famoso do Windows é a webdings (lembro -me de adorá -lo quando estava no Windows 95 ...). Aqui estão algumas fontes da Webdings: Estilo de fonte Os estilos de fonte comuns são divididos em: normais, ousados, em ital. Simplificando, ousado significa que a fonte será mais escura e mais "grossa". Itálico significa ligeiramente inclinando o eixo do personagem. Todos eles são usados para enfatizar um certo parágrafo dentro do espaço. Ao falar sobre negrito, podemos facilmente associar o atributo de peso da fonte no CSS. Sabemos que, além de normais e em negrito que geralmente usamos, o valor do atributo de peso da fonte também possui propriedades como mais ousadas, mais leves, 100 ~ 900. Então, qual é o valor de 100 ~ 900? As fontes excelentes fornecerão projetos diferentes para diferentes pesos da fonte. Se a fonte tiver um design interno de espessura de diferentes níveis com antecedência, esses valores corresponderão a cada nível, respectivamente. Por exemplo, as fontes de Zurique incluem seis fontes: Zurique Light, Zurique regular, Zurique Medium, Zurique Bold, Zurique Black e Zurique Ultrablack. Dessa maneira, Zurique Light corresponde a três valores: 100, 200 e 300, Zurique Regular corresponde a 400, que é "normal", o meio de Zurique corresponde a 500, e Zurique Bold, que é "negrito" corresponde a 600, 700, Zurique Black corresponde a 800 e, finalmente, Zurique Ultrablack corresponde a 900. Para o itálico chinês, geralmente não é usado na internet. Como existem muitos derrames em chinês, será difícil identificar se é usado. unidade Algumas unidades serão usadas em nosso design da web: 1 Ponto (Pt, Point) 72 pontos = 1 polegada, 1 polegada é 72 pontos. Além disso, 1 coleta (pica) = 12 pontos 2. Pixel (pixel, px) Um pixel é a menor unidade de imagem na tela do computador e, nos termos do leigo, é o menor ponto na tela. 3. DPI, PPI O nome completo do DPI é de pontos por polegada e o nome completo do PPI é o pixel por polegada. São unidades de resolução. Ou seja, quantos pontos (pixels) podem ser organizados no comprimento de 1 polegada. Por exemplo, geralmente, nosso monitor tem cerca de 72ppi, o que significa 1 polegada de comprimento, com 72 pontos (pixels). Quanto maior o DPI/PPI, maior a resolução, ou seja, menor as partículas, mais delicada a imagem. De um modo geral, a resolução de uma foto está entre 240dpi e 300dpi, então por que a foto parece muito mais detalhada do que na tela? A impressão da revista usa 133 ou 150dpi, e os livros de alta qualidade usam 350-400dpi, porque a maioria dos livros impressos usa 175 a 200dpi quando impressa. Então, por que é muito mais claro ler o texto do mesmo tamanho físico nos livros do que ler na tela? Ou seja, mencionamos anteriormente, por que podemos usar ousadamente as fontes sem serrif para imprimir livros em inglês? Não há essencialmente diferença entre DPI e PPI. Se você realmente deseja encontrar a diferença, a única diferença pode ser que o DPI seja frequentemente usado para descrever scanners e impressoras, enquanto o PPI geralmente descreve a resolução da tela. 4.Ex, x-heilt Frequentemente usado em CSS. 1ex = altura da letra minúscula x. 5.em Frequentemente usado em CSS. Obviamente, o EM não representa a altura da letra minúscula m (de fato, a altura da letra minúscula m é geralmente a mesma que a altura da letra minúscula X). 1em = 100% do tamanho da fonte. é uma unidade múltipla. espaçamento 1. Altura de linha, liderando Quando se trata de espaçamento de linha (altura da linha, chumbo), devemos primeiro aprender um termo chamado linha de base. Você se lembra do livro de grade de linha que costumamos escrever cartas quando aprendemos inglês? A linha horizontal mais grossa é o que chamamos de linha de base. A linha de base é a linha reta acima da parte descendente da fonte que a maioria das letras "senta". Na maioria das fontes, as letras maiúsculas sempre se atendem à linha de base e estão acima da linha de base. As fontes chinesas são as mesmas de letras maiúsculas inglesas. A linha vermelha na figura abaixo é a linha de base. Em seguida, o espaçamento da linha refere -se à distância entre duas linhas adjacentes e a linha de base. A unidade de espaçamento de linha é frequentemente usada para definir o espaçamento de linha de acordo com o tamanho da fonte. No navegador, não há regra para o espaçamento de linha padrão. Mais com os conselhos fornecidos pelo W3C, acredita que o espaçamento da linha padrão deve estar entre 1.0EM e 1.2EM. De fato, ao definir o espaçamento da linha, existe um princípio no TypeTting, ou seja, a lacuna entre as linhas deve ser maior que a lacuna entre as palavras. O espaçamento adequado da linha pode separar cada linha de texto, facilitando os olhos para distinguir a linha anterior ou a próxima. Nos últimos anos, a maioria das pessoas gosta do layout do texto principal na web com um espaçamento de linha de 1.5em, especialmente sites chineses. Ou seja, se um tamanho de fonte de 12px for usado, os designers geralmente como o espaçamento da linha de 18px. 1.5em é realmente um bom valor de experiência. De fato, a especificação de trabalhos chineses também usa um espaçamento de linha de 1.5em. 2. Espactação de cartas, rastreamento O espaçamento das palavras refere -se à distância entre um grupo de letras. O espaçamento dos caracteres afeta a densidade do texto em uma linha ou parágrafo. 3. Kerning Kering é um processamento técnico feito devido a necessidades visuais. Simplificando, quando dois caracteres específicos estiverem dispostos, você pode especificar espaçamento exclusivo de caracteres para eles separadamente. Por exemplo, quando um capital A é seguido por um V em minúsculas, um espaçamento visualmente maior aparecerá entre os dois caracteres (de fato, o espaçamento do personagem é o mesmo), que não pode ser resolvido pelo espaçamento comum dos personagens. Se forem reduzidos, as outras letras serão conectadas em uma bola. Neste momento, é necessário um ajuste de kerning para lidar com isso. A figura a seguir mostra um exemplo de uso de kerning: parágrafo 1. Presidente (medida) O comprimento da linha refere -se à largura de um parágrafo de texto. Como mostrado abaixo: Existem duas questões de legibilidade relacionadas ao presidente: Quanto mais tempo o comprimento da linha, maior o espaçamento da linha necessário. O espaçamento da linha é muito pequeno, facilitando a serialização dos leitores ao ler as linhas de new. O espaçamento da linha é muito grande e os leitores sentirão que o texto é descontínuo ao ler a linha. No texto, é aconselhável ter 40 a 70 letras por linha. 2. Alinhamento Existem basicamente quatro tipos de alinhamento de parágrafos: esquerda (nivelada à esquerda), direita (nivelada direita), centralizada (centrada) e justificada. 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 em parágrafos ou artigos à esquerda na direção horizontal. O alinhamento esquerdo fornece o texto no lado esquerdo do artigo uma borda arrumada. Ao mesmo tempo, o lado direito do texto será desigual. Portanto, o alinhamento em inglês à esquerda também é chamado de Ragged direita, o que significa o lado direito com aparências irregulares. O alinhamento certo é o mesmo. O alinhamento central refere -se a um método de alinhamento que define o conteúdo do texto, ajusta o espaçamento horizontal do texto e faz com que o texto no parágrafo ou artigo seja alinhado em uma direção horizontal para o meio. Alinhe o centro para que o texto de ambos os lados do artigo esteja cuidadosamente concentrado no meio, para que todo o parágrafo ou artigo seja organizado. Alinhando as duas extremidades significa definir as duas extremidades do conteúdo do texto, ajustando o espaçamento horizontal do texto/palavras, para que seja distribuído uniformemente entre as margens da página esquerda e direita. Alinhe as duas extremidades para que o texto de ambos os lados tenha bordas arrumadas. Depois de usar as duas extremidades para alinhar, as linhas de alinhamento de ambos os lados ficarão claras e a sensação "rápida" dos blocos de texto será óbvia. No entanto, na digitação inglesa, quando o comprimento da linha é muito curto, usando as duas extremidades para alinhar, pode fazer algumas linhas com espaçamento muito longo e algumas linhas com espaçamento muito curto, para que o espaçamento desigual pareça muito confuso. de roupas com remendos em todos os lugares. 3. Facilidade de legibilidade A alfabetização descreve a facilidade e o conforto da leitura de texto tipográfico. De fato, esse é o objetivo mais fundamental do design comum. Além de alguns dos princípios descritos acima, incluí alguns pequenos princípios de legibilidade e compartilhar com você: Um design usa até três tamanhos de fonte. Um máximo de três fontes é usado em um design. Um certo contraste deve ser garantido, mas não deve haver contraste excessivo. O texto Yang (caracteres pretos no fundo branco) é mais fácil de ler do que o texto Yin (caracteres pretos no fundo preto). No fundo do #FFFF, o uso de texto nº 333 parece mais confortável do que o texto de #000. Preste atenção ao pano de fundo do texto. O fundo deve ser solteiro. Evite ruído de fundo. "Menos é mais" usa os menores elementos para transmitir mais informações. Faça seu link parecer um link. Faça bom uso do seu espaço.