Diseñamos y trabajamos con fuentes todos los días. Pero nunca prestamos seria atención a su existencia. No los hemos utilizado bien, ni siquiera abusado de ellos. Todo esto se debe a que no los entendemos. La fuente es uno de los elementos importantes de la tipografía; también es uno de los temas más profundos del diseño. En este artículo, analicemos este profundo conocimiento con usted.
Tipos de fuentes
Las fuentes inglesas (Typeface) se dividen en varias categorías principales. Este es el conocimiento básico que debes saber al utilizar fuentes inglesas:
1. Serif
Serif es la parte decorativa del borde del trazo. El área marcada en rojo en la imagen de abajo es la serif.
La intención original del diseño serif es marcar los finales de los trazos con mayor claridad, mejorar la tasa de reconocimiento y aumentar la velocidad de lectura. Además, el uso de fuentes serif hará que la gente se sienta más ortodoxa. Por lo tanto, muchos de nuestros libros comunes en inglés, especialmente ensayos y novelas, utilizan fuentes serif para completar el texto.
Las serifas más utilizadas en el diseño web incluyen Times New Roman y Georgia. El lado izquierdo de la imagen a continuación es una fuente Times New Roman de 12 px y el lado derecho es una fuente Georgia de 12 px.
En chino, la fuente Song que utilizamos es la fuente serif correspondiente.
2. Sans-serif
Si una fuente no tiene serifas, se llama non-serif o sans-serif. La siguiente imagen es sans-serif.
Hay relativamente muchas sans-serif que se utilizan comúnmente en el diseño web. Están Arial, Verdana, Tahoma, Helivetica, Calibri, etc. La siguiente imagen muestra a Arial, Verdana y Tahoma de izquierda a derecha:
Vale la pena señalar que, aunque las fuentes serif se utilizan ampliamente en los libros, las fuentes serif rara vez se utilizan en Internet. Dado que la resolución de la pantalla de la computadora no es comparable a la de los libros, las fuentes serif de 10 a 12 píxeles en el texto principal son difíciles de leer en la pantalla de la computadora. La siguiente imagen es una comparación de 10px Verdana y 10px Times New Roman sin Cleartype. Como puedes ver, Verdana a la izquierda se puede identificar fácilmente. El Times New Roman de la derecha es bastante difícil de leer.
3. Fuentes monoespaciadas
Las fuentes monoespaciadas en realidad son sólo para fuentes occidentales. Porque las letras inglesas varían en ancho. Por ejemplo, i es mucho más estrecho que m. Muestra el código al programar. Si las letras no tienen el mismo ancho, el diseño será feo. En la línea de comando de DOS, podemos ver que se utiliza una fuente de ancho fijo.
Las fuentes de ancho constante necesarias para la programación tienen los siguientes requisitos:
1. Todos los caracteres deben tener el mismo ancho;
2. Formasde
caracteres simples, claras y estandarizadas;
3. Admite conjuntos de caracteres extendidos con códigos ASCII superiores a 128;
(ASCII: 0 × 20) Mismo ancho que otros caracteres;
5. Tres caracteres como "1", "l" e "i" son fáciles de distinguir
6. Tres caracteres como "0", "o" y "; O" son fáciles de distinguir;
7. Las partes frontal y posterior de las comillas dobles y las comillas simples son fáciles de distinguir, y es mejor que sean simétricas como un espejo;
8. Signos de puntuación claros, especialmente llaves, corchetes y corchetes.
Las fuentes monoespaciadas comunes incluyen Courier y Courier New
4. Caligrafía
Como sugiere el nombre, la caligrafía es una fuente de estilo de escritura a mano. A veces también la llamamos fuente de caligrafía. La mayoría de las fuentes de caligrafía chinas son rígidas. Personalmente, recomiendo utilizar fuentes de caligrafía japonesa. Las fuentes de caligrafía japonesa son más suaves y humanas. Sin embargo, la desventaja de utilizar fuentes de caligrafía japonesas es que la mayoría son chinas tradicionales y faltan muchos caracteres chinos.
5. Símbolo
El cuerpo de símbolo más famoso en Windows es Webdings (recuerdo que lo usaba mucho cuando todavía estaba en Windows 95...). Estas son algunas de las fuentes de Webdings:
Estilos de fuente:
Los estilos de fuente comunes son: Normal, Negrita y Cursiva.
En pocas palabras, negrita significa que la fuente será más oscura y más "gruesa". Cursiva significa inclinar ligeramente el eje del texto. Se utilizan para enfatizar un determinado párrafo de texto dentro del espacio.
Cuando hablamos de negrita, podemos pensar fácilmente en la propiedad font-weight en CSS. Sabemos que además del normal y la negrita que usamos habitualmente, el valor del atributo de peso de fuente también tiene atributos como más negrita, más claro, 100 ~ 900, etc. Entonces, ¿cuál es el valor de 100 a 900? De hecho, 100 a 900 no tiene unidad. Una buena fuente proporcionará diferentes diseños para diferentes pesos. Si la fuente tiene diseños preintegrados para diferentes niveles de grosor, entonces estos valores corresponderán a cada nivel respectivamente. Por ejemplo, la fuente Zurich incluye seis fuentes: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black y Zurich UltraBlack. De esta forma, Zurich Light corresponde a los tres valores 100, 200 y 300, Zurich Regular corresponde a 400 que es "normal", Zurich Medium corresponde a 500 y Zurich Bold que es "negrita". corresponde a 600, 700, Zurich Black corresponde a 800, y finalmente Zurich UltraBlack corresponde a 900.
Las cursivas chinas generalmente no se utilizan en Internet. Debido a que el chino tiene tantos trazos, el uso de cursiva dificultará la lectura.
Unidades
Usaremos algunas unidades en nuestro diseño web:
1. Punto (pt, punto)
72 puntos = 1 pulgada, 1 pulgada son 72 puntos. Además, 1 pica = 12 puntos
2. Píxel (píxel, px)
Un píxel es la unidad de imagen más pequeña en la pantalla de la computadora. En términos sencillos, es el punto más pequeño en la pantalla.
3. DPI, PPI
El nombre completo de DPI es Puntos por pulgada, puntos por pulgada y el nombre completo de PPI es Píxel por pulgada. Son unidades de resolución. En otras palabras, cuántos puntos (píxeles) se pueden organizar en una longitud de 1 pulgada. Por ejemplo, generalmente nuestro monitor tiene aproximadamente 72 ppp, lo que significa que hay 72 puntos (píxeles) en una longitud de 1 pulgada. Cuanto mayor sea el ppp/ppi, mayor será la resolución, es decir, cuanto más pequeñas sean las partículas, más delicada será la imagen. En términos generales, la resolución de las fotos está entre 240 ppp y 300 ppp, por lo que las fotos se ven mucho más detalladas de lo que se ven en la pantalla. Las revistas se imprimen a 133 o 150 ppp, y los libros de alta calidad se imprimen a 350-400 ppp, porque los libros más bellamente impresos se imprimen a entre 175 y 200 ppp. Por eso, un texto del mismo tamaño físico es mucho más claro cuando se ve en un libro que en una pantalla. Es por eso que mencionamos antes que las fuentes Sans-serif se pueden utilizar con audacia en la impresión de libros en inglés.
Básicamente, no hay diferencia entre ppp y ppi. Si realmente desea encontrar la diferencia, entonces la única diferencia puede ser que ppp se usa a menudo para describir escáneres e impresoras, mientras que ppi se usa a menudo para describir la resolución de la pantalla.
Cuarto, ex y x-height
se utilizan a menudo en CSS. 1ex = altura de la letra x minúscula.
5. em
se usa a menudo 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 fuente. es una unidad múltiple.
Espaciado
1. Interlineado (alto de línea, interlineado)
Cuando se trata de interlineado (alto de línea, interlineado), primero debemos aprender un término llamado línea de base. ¿Recuerdas el libro de cuadrículas que usábamos para escribir letras cuando aprendimos inglés por primera vez? La línea horizontal más gruesa es lo que llamamos línea de base. La línea de base es la línea sobre la línea descendente de la fuente donde "se asientan" la mayoría de las letras. En la mayoría de las fuentes, las letras mayúsculas siempre se colocan cerca y encima de la línea base. Las fuentes chinas son las mismas que las letras mayúsculas inglesas. La línea roja en la imagen de abajo es la línea de base.
Entonces, el interlineado se refiere a la distancia entre las líneas de base entre dos líneas adyacentes. La unidad de interlineado suele ser em, que se define según el tamaño de fuente. En los navegadores, no existe una guía para el interlineado predeterminado. Según las recomendaciones proporcionadas por el W3C, el interlineado predeterminado debe estar entre 1,0 em y 1,2 em. De hecho, al establecer el espacio entre líneas, existe el principio de que el espacio entre líneas debe ser mayor que el espacio entre palabras, de lo contrario, los lectores se "serializarán" fácilmente al leer, lo que provocará dificultades en la lectura. Un espacio entre líneas suficiente puede separar cada línea de texto, lo que facilita al ojo distinguir la línea anterior o siguiente. En los últimos años, la mayoría de la gente prefiere un interlineado de 1,5 em para el diseño de texto en la Web, especialmente en los sitios web chinos. Es decir, si se utiliza un tamaño de fuente de 12 píxeles, los diseñadores suelen preferir un interlineado de 18 píxeles. 1,5 em es de hecho un buen valor de experiencia. De hecho, el estándar para los artículos chinos es utilizar un interlineado de 1,5 em.
2. Espaciado entre letras (Espaciado entre letras, Seguimiento)
El espaciado entre letras se refiere a la distancia entre un grupo de letras. El espaciado entre palabras afecta la densidad del texto en una línea o párrafo.
3. Kerning
Kerning es un proceso técnico realizado para necesidades visuales. En pocas palabras, cuando dos caracteres específicos están alineados, puede especificar individualmente un espacio entre palabras único para ellos. Por ejemplo, cuando una A mayúscula va seguida de una v minúscula, habrá un espacio visualmente mayor entre los dos caracteres (en realidad, el espacio entre palabras es el mismo), lo que no se puede resolver con el espacio entre caracteres normal. Si reduce el espacio entre ellas, las otras letras fluirán juntas. En este momento, es necesario ajustar el interletraje para solucionarlo. La siguiente imagen es un ejemplo de cómo aplicar el kerning:
Párrafo
1. Longitud de línea (Medida)
La longitud de 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 la longitud de la línea:
cuanto mayor sea la longitud de la línea, mayor será el espacio entre líneas requerido. Si el espacio entre líneas es demasiado pequeño, los lectores se romperán fácilmente al leer. Si el interlineado es demasiado grande, los lectores sentirán que el texto es discontinuo al leer las líneas.
En el texto principal, son adecuadas entre 40 y 70 letras por línea.
2. Alineación
Existen básicamente cuatro tipos de alineación de párrafos: alineado a la izquierda, alineado a la derecha, centrado y justificado.
La alineación a la izquierda se refiere a un método de alineación que establece el contenido del texto, ajusta el espaciado horizontal del texto y alinea el texto del párrafo o artículo hacia la izquierda en la dirección horizontal. La alineación a la izquierda le da al texto del lado izquierdo del artículo un borde limpio. Al mismo tiempo, el lado derecho del texto quedará desigual. Por lo tanto, la alineación izquierda en inglés también se llama derecha irregular, lo que significa que el lado derecho tiene una apariencia irregular. Lo mismo ocurre con la alineación correcta.
La alineación central se refiere a un método de alineación que establece el contenido del texto y ajusta el espaciado horizontal del texto para que el texto del párrafo o artículo esté alineado horizontalmente hacia el centro. La alineación central hace 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é ordenado.
Alineación significa configurar ambos extremos del contenido del texto y ajustar el espaciado horizontal del texto/palabras para que queden bien. distribuidos uniformemente en los bordes izquierdo y derecho de la página entre distancias. Justificar le da bordes prolijos al texto en ambos lados.
Después de usar align en ambos extremos, las líneas de alineación en ambos lados serán muy claras y la sensación de "rápida" del bloque de texto también será obvia. Sin embargo, en la composición tipográfica en inglés, cuando la longitud de la línea es muy corta, el uso de la alineación puede hacer que el espacio entre algunas líneas sea demasiado largo y el espacio entre algunas líneas sea demasiado corto. Este espacio desigual entre palabras se sentirá muy desordenado. con parches por todas partes.
3. Legibilidad
La legibilidad describe la facilidad y comodidad de leer un texto impreso. De hecho, éste es el propósito más fundamental del diseño ordinario. Además de los principios descritos anteriormente, también he recopilado algunos pequeños principios de legibilidad para compartir contigo:
Utiliza como máximo tres tamaños de fuente en un diseño.
Utilice hasta tres fuentes en un diseño.
Es necesario asegurar un cierto contraste, pero no un contraste excesivo. La escritura Yang (caracteres negros sobre un fondo blanco) es más fácil de leer que la escritura Yin (caracteres blancos sobre un fondo negro). En el fondo de #fff, el texto que usa #333 parece más cómodo que el texto #000.
Presta atención al fondo del texto. El fondo debe ser sencillo. Evite el ruido de fondo.
"Menos es más" Utilice la menor cantidad de elementos para transmitir la mayor cantidad de información.
Haga que su enlace parezca un enlace.
Aprovecha bien tu espacio.