-
Cómo utilizar la tipografía en los sitios web
-
Tipografía --- o, en pocas palabras, por lo que el texto se vea bien --- es una de las facetas más importantes de diseño de páginas web, pero también es uno de los más olvidados. La fabricación de su contenido claro y fácil de leer no sólo ayuda a su diseño, que inconscientemente hace que el contenido de su sitio más agradable y tendrán a los lectores vuelvan a por más. No es difícil, ya sea: Si sabe qué reglas y los elementos a añadir a las hojas de estilo de las páginas Web ', puede mejorar enormemente la apariencia de su texto en cinco minutos.
Instrucciones
1 Decidir qué fuentes que desea utilizar antes de tocar el código del sitio web. La web tiene un número limitado de familias de fuentes que todos los navegadores pueden reconocer; ver Recursos más adelante para obtener una lista de fuentes compatibles con Web. También es útil para entender la diferencia entre las fuentes serif y sans-serif. Las fuentes serif, como Times New Roman, se parecen a las fuentes tradicionales de papel de periódico o revista --- letras tienen pequeñas colas en los bordes. Sans serif, como Arial, no lo hacen, y se ven blockier. La combinación de uno serif y una fuente sans serif --- por ejemplo, utilizando un tipo de letra serif para las cabeceras del sitio y una sans serif para los cuerpos artículo --- por lo general produce un estilo tipográfico estéticamente agradable.
2 Añadir pilas de fuente de hoja de estilo del sitio web (normalmente un archivo CSS). pilas de fuente son listas de fuentes que sirven como instrucciones para los navegadores web. Si el ordenador del navegador reconoce la primera fuente, lo utilizan; si no es así, utilizar la segunda fuente, y así sucesivamente. Para declarar un conjunto universal de fuentes en la sección <body> de sus páginas HTML, la sintaxis se verá así:
cuerpo {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
La hoja de estilo dice por primera vez el navegador para usar Lucida Sans Unicode. Si no se reconoce que la fuente --- por ejemplo, los Mac no lo tiene instalado por defecto --- se pasa a la fuente similar Lucida Grande (que reconoce Macs). Si por alguna razón no reconoce ninguno de los que, como en ciertas configuraciones de Linux, utiliza sans predeterminada del ordenador, serif.3 Declarar la línea de altura y los elementos de tamaño de fuente para el texto también. En la mayoría de los navegadores, la altura de línea por defecto es demasiado estrecha. Por otro lado, se podría pensar que el tamaño de fuente por defecto es demasiado grande. Pero asegúrese de no fijar a cualquier cosa menos de 11 píxeles. No todos los ojos son tan buenos como los suyos, y algunas personas como para inclinarse hacia atrás cuando leen.
4
Cambiar el color por defecto de sus fuentes. Si está utilizando un fondo oscuro, usted querrá hacer su fuente más ligero, pero no acaba de salir de su negro de la fuente. Alto contraste puede ser un estilo eficaz si se hace correctamente, pero por lo general usted encontrará que el texto es más fácil de leer cuando es un tono de gris a diferencia de negro o blanco totalmente.
El siguiente es un conjunto de reglas de estilo se pueden colocar en su hoja de estilo que utilizan todos estos elementos juntos:
cuerpo {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
line-height: 1.8em;
color: # 555555;
}
h1 {
font-family: Georgia, serif;
}
A la izquierda de la imagen, se puede ver lo que un artículo se vería sin ningún formato. A la derecha, se puede ver lo que el mismo texto parece que con las reglas de estilo anteriores.
