Los diseños tratamos con fuentes todos los días. Pero nunca nos hemos importado seriamente su existencia. No los hemos usado bien o incluso los hemos abusado. Todo es porque no los conocemos. Las fuentes son uno de los elementos importantes de la composición tipográfica; En este artículo, discutamos este profundo conocimiento con usted. Tipo de fuente Las fuentes inglesas (tipos de letra) se dividen en varias categorías principales. 1. Serif Serif es la parte decorativa del borde del trazo. La marca roja en la figura a continuación es el serif. La intención original del diseño serif es indicar más claramente el final del accidente cerebrovascular, mejorar la tasa de reconocimiento y mejorar la velocidad de lectura. Además, el uso de fuentes Serif hará que las personas se sientan más ortodoxas. Por lo tanto, muchos de nuestros libros comunes en inglés, especialmente documentos y novelas, usan serifs para completar el texto principal. Las serifs de uso común en el diseño web son tiempos de New Roman y Georgia. El lado izquierdo de la imagen a continuación es el Times New Roman Font con 12px y el lado derecho es el Georgia con 12px. En chino, la fuente de la canción que usamos es la fuente serif correspondiente. 2. Sans-Serif/Sans-Serif Si la fuente no es serif, se llama sserif o sans serif. La siguiente figura es un sanserif. Se utilizan relativamente más sans serifs comunes en el diseño web. Hay Arial, Verdana, Tahoma, Helivetica, Calibri, etc. La siguiente figura es Arial, Verdana y Tahoma de izquierda a derecha: Vale la pena señalar que, aunque las fuentes serif se usan ampliamente en los libros, las fuentes serif rara vez se usan en Internet. Dado que la resolución de la pantalla de la computadora no es comparable a la de los libros, es difícil reconocer las fuentes serif del texto de 10 a 12px en la pantalla de la computadora. La siguiente imagen es una comparación entre Verdana de 10px y Times New Roman de 10px sin ClearType. Puede encontrar que el Verdana de la izquierda puede ser bien identificado. Times New Roman a la derecha es bastante difícil de identificar. 3. Monoespacial Las fuentes de monowidth son en realidad solo para fuentes occidentales. Porque el ancho de las letras inglesas varía. Por ejemplo, yo es mucho más estrecho que m. Al programar, se muestra el código, si las letras no son iguales en ancho, el diseño será feo. En la línea de comando DOS, podemos ver que se usa la fuente monoespacial. Las fuentes monoespaciales requeridas para la programación tienen los siguientes requisitos: 1. Todos los personajes son iguales en ancho; 2. Formas de carácter concisas, claras y estandarizadas; 3. Admite conjuntos de caracteres extendidos con código ASCII de 128 o superior; 4. Los caracteres en blanco (ASCII: 0 × 20) son iguales a otros caracteres; 5. Los tres personajes como "1", "L" e "I" son fáciles de distinguir; 6. Los tres personajes como "0", "O" y "O" son fáciles de distinguir; 7. Las partes delanteras y posteriores de las citas dobles y las citas individuales son fáciles de distinguir, y es mejor tener simétrico con espejo; 8. Formas de puntuación claras, especialmente aparatos ortopédicos rizados, aparatos ortopédicos y aparatos cuadrados. Las fuentes monoespaciales comunes incluyen Courier, Courier New 4. Caligrafía Como su nombre indica, la escritura a mano es una fuente de estilo de escritura a mano. A veces también lo llamamos fuentes de caligrafía. La mayoría de las fuentes de caligrafía china son relativamente rígidas. Personalmente recomiendo usar fuentes de caligrafía japonesa. Las fuentes de caligrafía japonesa son más suaves y más humanas. Sin embargo, la desventaja de usar fuentes de caligrafía japonesa es que la mayoría de ellas son tradicionales, y faltan muchos caracteres chinos. 5. Símbolo El cuerpo simbólico más famoso de Windows son las webdings (recuerdo que me encantó usarlo cuando estaba en Windows 95 ...). Aquí hay algunas fuentes web: Estilo de fuente Los estilos de fuentes comunes se dividen en: normal, audaz en negrita, cursiva. En pocas palabras, Bold significa que la fuente será más oscura y más "gruesa". La cursiva significa ligeramente inclinando el eje del personaje. Todos se usan para enfatizar un cierto párrafo dentro del espacio. Cuando hablamos de Bold, podemos asociar fácilmente el atributo de peso de fuente en CSS. Sabemos que, además de lo normal y en negrita, generalmente usamos, el valor del atributo de peso de fuente también tiene propiedades como más audaz, más ligero, 100 ~ 900. Entonces, ¿cuál es el valor de 100 ~ 900? Excelentes fuentes proporcionarán diferentes diseños para diferentes pesos de fuentes. Si la fuente tiene un diseño incorporado de grosor de diferentes niveles de antemano, estos valores corresponderán a cada nivel respectivamente. Por ejemplo, las fuentes de Zurich incluyen seis fuentes: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black y Zurich Ultrablack. De esta manera, la luz de Zurich corresponde a tres valores: 100, 200 y 300, Zurich Regular corresponde a 400, que es "normal", el medio Zurich corresponde a 500, y Zurich Bold, que es "Bold Bold" corresponde a 600, 700, Zurich Black corresponde a 800, y finalmente, Zurich Ultrablack corresponde a 900. Para la cursiva china, generalmente no se usa en Internet. Debido a que hay muchos golpes en chino, será difícil identificar si se usa. unidad Algunas unidades se utilizarán en nuestro diseño web: 1. Punto (PT, punto) 72 puntos = 1 pulgada, 1 pulgada es 72 puntos. Además, 1 recolección (PICA) = 12 puntos 2. Pixel (Pixel, PX) Un píxel es la unidad de imagen más pequeña en la pantalla de una computadora, y en términos de Layman es el punto más pequeño en la pantalla. 3. DPI, PPI El nombre completo de DPI es de puntos por pulgada, y el nombre completo de PPI es píxel por pulgada. Son unidades de resolución. Es decir, cuántos puntos (píxeles) se pueden organizar en la longitud de 1 pulgada. Por ejemplo, en general, nuestro monitor es de aproximadamente 72ppi, lo que significa 1 pulgada de largo, con 72 puntos (píxeles). Cuanto mayor sea DPI/PPI, mayor es la resolución, es decir, más pequeñas son las partículas, más delicada es la imagen. En términos generales, la resolución de una foto es entre 240 ppi y 300 ppi, entonces, ¿por qué la foto se ve mucho más detallada que en la pantalla? La impresión de revistas utiliza 133 o 150dpi, y los libros de alta calidad usan 350-400dpi, porque la mayoría de los libros bellamente impresos usan de 175 a 200dpi cuando se imprimen. Entonces, ¿por qué es mucho más claro leer texto del mismo tamaño físico en los libros que leer en la pantalla? Es decir, mencionamos anteriormente, ¿por qué podemos usar audazmente fuentes sans-serif para imprimir libros en inglés? Esencialmente no hay diferencia entre DPI y PPI. Si realmente desea encontrar la diferencia, entonces la única diferencia puede ser que DPI a menudo se usa para describir escáneres e impresoras, mientras que PPI a menudo describe la resolución de la pantalla. 4.Ex, X-aguja A menudo se usa en CSS. 1EX = Altura de la letra minúscula x. 5.em A menudo se usa en CSS. Por supuesto, EM no representa la altura de la letra minúscula M (de hecho, la altura de la letra minúscula M es generalmente la misma que la altura de la letra minúscula X). 1EM = 100% del tamaño de la fuente. es una unidad múltiple. espaciado 1. Línea de altura, liderando Cuando se trata de espacios de línea (altura de línea, plomo), primero debemos aprender un término llamado línea de base. ¿Recuerdas el libro de la cuadrícula de línea que solíamos escribir letras cuando aprendimos inglés por primera vez? La línea de base es la línea recta sobre la parte descendente de la fuente que la mayoría de las letras "se sientan". La mayoría de las fuentes, las letras mayúsculas siempre se adhieren a la línea de base y están por encima de la línea de base. Las fuentes chinas son las mismas que en las letras mayúsculas inglesas. La línea roja en la figura a continuación es la línea de base. Luego, el espacio de línea se refiere a la distancia entre dos líneas adyacentes y la línea de base. La unidad de espaciado de línea a menudo se usa para definir el espacio de línea de acuerdo con el tamaño de la fuente. En el navegador, no hay una regla para el espacio de línea predeterminado. Más con el consejo proporcionado por W3C, cree que el espacio de línea predeterminado debe estar entre 1.0EM y 1.2EM. De hecho, al establecer el espacio de la línea, hay un principio en la toma de compras, es decir, la brecha entre las líneas debe ser más grande que la brecha entre las palabras. El espacio de línea adecuado puede separar cada línea de texto, lo que facilita que los ojos distinguen la línea anterior o siguiente. En los últimos años, a la mayoría de las personas les gusta el diseño del texto principal en la web con un espacio de línea de 1.5EM, especialmente los sitios web chinos. Es decir, si se usa un tamaño de fuente de 12px, los diseñadores a menudo como el espacio de línea de 18 px. 1.5EM es de hecho un buen valor de experiencia. De hecho, la especificación de los documentos chinos también utiliza un espacio de línea de 1.5EM. 2. Espacio de letras, seguimiento El espacio de palabras se refiere a la distancia entre un grupo de letras. El espacio de los caracteres afecta la densidad del texto en una línea o párrafo. 3. Kerning Kering es un procesamiento técnico que se realiza debido a las necesidades visuales. En pocas palabras, cuando se organizan dos caracteres específicos, puede especificar un espacio de caracteres único para ellos por separado. Por ejemplo, cuando un capital A es seguido por una V minúscula, aparecerá un espaciado visualmente más grande entre los dos caracteres (de hecho, el espacio de caracteres es el mismo), que no se puede resolver mediante un espacio de caracteres ordinario. Si se reducen, las otras letras se conectarán en una pelota. En este momento, se necesita ajuste de kerning para manejarlo. La siguiente figura muestra un ejemplo de uso de kerning: párrafo 1. Presidente (medida) La longitud de la línea se refiere al ancho de un párrafo de texto. Como se muestra a continuación: Hay dos problemas de legibilidad relacionados con el presidente: Cuanto más larga sea la longitud de la línea, mayor será el espacio de línea requerido. El espacio de línea es demasiado pequeño, lo que facilita a los lectores serializar al leer nuevas líneas. El espacio de línea es demasiado grande, y los lectores sentirán que el texto es discontinuo al leer la línea. En el texto, es aconsejable tener de 40 a 70 letras por línea. 2. Alineación Básicamente, hay cuatro tipos de alineación de los párrafos: izquierda (descarga izquierda), derecha (descarga derecha), centrada (centrada) y justificada. La alineación izquierda se refiere a un método de alineación que establece el contenido de texto, ajusta el espacio horizontal del texto y alinea el texto en párrafos o artículos a la izquierda en la dirección horizontal. La alineación izquierda le da al texto en el lado izquierdo del artículo un borde ordenado. Al mismo tiempo, el lado derecho del texto será desigual. Por lo tanto, la alineación en inglés a la izquierda también se llama Ragged Right, lo que significa el lado derecho con apariencias desiguales. La alineación correcta es la misma. La alineación central se refiere a un método de alineación que establece el contenido de texto, ajusta el espacio horizontal del texto y hace que el texto en el párrafo o artículo se alinee en una dirección horizontal hacia el medio. Alinee el centro para que el texto en ambos lados del artículo esté perfectamente concentrado en el medio, de modo que todo el párrafo o artículo esté perfectamente organizado. Alinear los dos extremos significa configurar los dos extremos del contenido del texto, ajustando el espacio horizontal del texto/palabras, de modo que se distribuya uniformemente entre los márgenes de la página izquierda y derecha. Alinee los dos extremos para que el texto en ambos lados tenga bordes ordenados. Después de usar los dos extremos para alinearse, las líneas de alineación en ambos lados serán claras, y la sensación "rápida" de bloques de texto será obvia. Sin embargo, en el inglés tipográfico, cuando la longitud de la línea es muy corta, usando los dos extremos para alinearlo puede hacer algunas líneas con un espacio demasiado largo y algunas líneas con un espacio demasiado corto, por lo que el espacio desigual se sentirá muy desordenado. de ropa con parches en todas partes. 3. Facilidad de legibilidad La alfabetización describe la facilidad y la comodidad de la lectura de texto tipográfico. De hecho, este es el propósito más fundamental del diseño ordinario. Además de algunos de los principios descritos anteriormente, he incluido algunos pequeños principios de legibilidad y compartir con usted: Un diseño utiliza hasta tres tamaños de fuentes. Un máximo de tres fuentes se usa en un diseño. Se debe garantizar un cierto contraste, pero no debe haber contraste excesivo. El texto yang (caracteres negros sobre fondo blanco) es más fácil de leer que el texto yin (caracteres negros sobre fondo negro). En el fondo de #FFFF, usar el texto #333 se ve más cómodo que el texto de #000. Presta atención a los antecedentes del texto. El fondo debe ser soltero. Evite el ruido de fondo. "Menos es más" utiliza los elementos menos para transmitir la mayor cantidad de información. Haga que su enlace parezca un enlace. Haga un buen uso de su espacio.