Tamaños de fuente comunes en diseño web
Lo mejor es utilizar tamaños de fuente uniformes.
1. Texto de navegación del encabezado 12 o 14;
2. Número de texto de navegación del menú
3.SidebarNo. 12 o no. 14,
4. El número 14 se usa para el menú de primer nivel y el número 12 se usa para el menú de segundo nivel.
O utilice 12 para el menú de primer nivel y 12 para el menú de segundo nivel.
5. 12 o no. 14
6. Texto: Título No. 24-32; texto del título 16 o 18; texto número 12 o 14
7. , 32px, intenta usar números pares.
8. Texto del botón: por ejemplo, los botones de la página de inicio de sesión y registro u otros botones, el número de texto es 14-16, el tamaño se puede ajustar o poner en negrita según la situación real.
9. Los tamaños de fuente del mismo nivel deben ser consistentes. Por ejemplo, coherencia en el tamaño del texto del título y del texto del contenido dentro del mismo bloque de nivel.
En el sitio web oficial de Apple, el texto de visualización del producto coincide con el número 64 y el número 32, que es breve y potente, muy legible, tiene un gran impacto visual y resalta las características de la marca.
Especificaciones de composición tipográfica
En primer lugar, las mejores especificaciones de legibilidad
1 Ancho de línea
Cada línea de composición tipográfica de libros tradicional. El mejor número de caracteres es entre 55 y 75, pero en la práctica, entre 75 y 85 caracteres por línea es más popular en la web. Cuando la fuente china es 14, se recomiendan entre 35 y 45 caracteres.
Ir más alto
En diseño web, el espacio del texto es generalmente de 1 a 1,5 veces el espacio entre líneas y de 1,5 a 2 veces el espacio entre párrafos, dependiendo del tamaño de fuente.
Por ejemplo, fuente 12, el interlineado es de 12 px-18 px y el interlineado de párrafo es de 18 px-24 px.
Además, altura de línea/espacio entre párrafos = 0,754. Es común que el interlineado sea exactamente el 75% del interlineado.
3. Alineación de líneas
En términos generales, se recomienda utilizar solo un método de alineación de texto en la página y tratar de evitar alinear ambos extremos.
4. Deje el texto en blanco
Al componer texto, debe dejar espacio libre en el diseño. El orden de los espacios en blanco de pequeño a grande debe ser: espacio entre caracteres, línea. espaciado, distancia entre párrafos. Además, antes de formatear el área de contenido, debe dejar un espacio en blanco alrededor de la página de acuerdo con la situación real de la página.
5. Principio del Tonto (Carpa)
Contraste, repetición, alineación e intimidad.
Selección de fuente
Fuente: chino: Song Dynasty, Microsoft Yahei, Founder series (stateless)
Tamaño de fuente: tamaño de fuente de texto/navegación en la página web Entre 12px y 18px.
El inglés puede ser entre 10 y 16 píxeles más pequeño.
Por muy pequeño que sea, el reconocimiento no es especialmente bueno.
Regular, clásico y universal
Estilo de canción Zhong Yi
Las fuentes más comunes de Win, mapa de bits de fuente pequeña, fuente TrueType grande, pero las fuentes grandes no. Se ve bien, pero es mejor no hacer un título.
Microsoft Yahei
La fuente Microsoft Yahei es ligeramente más gruesa en secciones grandes. Navegar en línea durante mucho tiempo puede resultar incómodo para la vista. En comparación, las fuentes serif son muy decorativas y fáciles de leer, por lo que las fuentes Song son más adecuadas para sitios web de texto grande como Zhihu.
La sensación de Microsoft Yahei incluye paz, limpieza, sencillez, tranquilidad y profesionalidad.
China Fine Black
El idioma chino predeterminado en Mac.
Español
Helvetica:
Calificada como la fuente favorita del diseñador, tiene un estilo realista, líneas simples y modernas, y es muy buscada.
Se considera la mejor fuente web en Mac, pero se muestra mal en Windows debido a las indicaciones.
Arial:
El "Clon" de Helvetica es muy similar a Helvetica, con ligeras diferencias en detalles como R y g. Si la fuente es demasiado pequeña y el número de palabras es demasiado. Para muchos, parecerá un poco agotador. Win y Mac se muestran normalmente.
Familia Lucida:
Lucida Grande es la fuente estándar para la interfaz de usuario de Mac OS, que tiene un estilo humanista y un poco animado. La visualización en Mac es mejor que en Win.
Verdana:
Una fuente especialmente diseñada para visualización en pantalla, estilo humanista, el tamaño de fuente pequeño aún se puede mostrar claramente, pero faltan detalles de la fuente, es mejor no usarla. como título.
Tahoma:
También es un estilo humanista, la fuente es un poco como Verdana, pero un poco más estrecha y el contador es un poco más pequeño. Solía ser una fuente estándar para Windows y también se instaló de forma predeterminada después de Mac 10.5.
Verdana:
Es un conjunto de fuentes sans serif. Debido a que todavía tiene propiedades de alta calidad, como una estructura clara y una fácil lectura y reconocimiento en caracteres pequeños, rápidamente se convirtió en una de las fuentes estándar favoritas en muchos campos después de su lanzamiento en 1996.
Georgiano:
Georgiano es básicamente una fuente serif adecuada para visualización de texto en pantalla. Los trazos son pesados, las serifas son brillantes, los contornos son grandes, las fuentes pequeñas son claras y los detalles están bien.
Algunos sitios web orientados al arte utilizan langosta para caracteres grandes. Busque fuentes gratuitas o obsequios de fuentes para un sitio web más artístico.
Trebuchet, Georgia, Times New Roman, Arial, Lucida y otras fuentes funcionan mejor cuando tienen 26 píxeles o más y son muy adecuadas para títulos de texto.
Fuente de banner web
El método de selección de fuente para banner web es elegir la fuente según el tema del banner, porque la fuente en sí tiene su propia personalidad.
La primera categoría, estable (coordinada, completa, estable, de alta calidad)
Microsoft Yahei, Holly Bold, Song Style, China Premium Black, Founder Black, Founder Lanting series.
El segundo tipo es rígido, agudo, claro y fuerte.
ZuoZuoFangHeiTi,ZuoZuFangHeiLi,ZuoZiFangHaiLian,RuiZiLiShariLine,ZhangHaishanSharpLine,KanghuaLiJinhei,MonnaSuperhardHeiTi.
(Más adecuado para temas como atmósfera, entusiasmo, autoridad, declaración, etc.)
La tercera categoría es relajada, escrita a mano, linda, infantil y amable.
Fundador Jinghei, Kanghua Poster, Hanyi Wheat, Fundador Zhiyi, Xindi Afternoon Tea, Hanyi Bianti, Xindi Xiaowanzi.
(Aplicable a carteles de juegos y entretenimiento, páginas publicitarias h5 y temas infantiles/femeninos)
La cuarta categoría es inteligente, fresca, hermosa, elegante, refinada y antigua.
Versión Fangzheng Qingke de las tiras de bambú de Song Yue, escritura regular del fundador de Song Jiexiu, estilo Fangzheng de Song Jieke, escritura regular de Xiu, poesía Tang completa de Hanyi, estilo de diccionario Jian Kangxi, estilo de caligrafía corriendo Xiangnan, Zaozifang, Estilo de grabado de canciones.
(Adecuado para temas como retro, elegancia, tradición, calidad y elegancia)