Primero debemos ver que las fuentes que podemos utilizar en el texto de nuestra página web esta limitado a muy pocas opciones y aún de estas no todas deben utilizarse debido a que no están diseñadas especificamente para web o porque no todo el mundo cuenta con estas.
Las únicas fuentes optimizadas para web son Verdana y Georgia; la primera fue diseñada como reemplazo de Arial(fuente por defecto de Windows) esta fuente cuenta con gran legibilidad y fue diseñada especificamente para funcionar en monitores, la segunda opción es Georgia que es una fuente diseñada para reemplazar a Times New Roman. Comic Sans es una fuente con poca legibilidad que no cumple estándares de diseño por lo que nunca debe ser utilizada.
Arial
Verdana
Times New Roman
Georgia
Podriamos asignar otros tipos de fuente de las cientos que tenemos instaladas en nuestro sistema pero no todos los usuarios las tienen y recordemos que nuestra página debe lucir igual no solo en pc sino también en mac, iphone, celulares hasta en el PS3 🙂 opciones tan limitadas podrían parecer insuficientes sin embargo si usamos imágenes para reemplazar títulos y combinamos los gráficos adecuados veremos que esta «limitación» no lo es tanto.
¿Cómo asignar tipo, color y tamaño de fuente?
Normalmente esto se hace en la hoja de estilos para ser más precisos en la sección body, con un código como este:
1 2 3 4 5 | body { font-family:Verdana, Geneva, sans-serif; font-size:11px; color:#333; } |
Con font-family asignamos no sólo un tipo de letra sino algunas para que la reemplacen en caso esta no este instalada, fon-size me da el tamaño y el último parámetro el color para el cual no conviene usar negro sobre fondo blanco porque tiene mucho contraste mejor es usar un gris oscuro.
Es posible asignar un tipo de fuente distinto para ciertas secciones como menus, titulos, etc aunque se recomienda sólo cambiar el tamaño y no el tipo de fuente por un tema de mantener uniformidad y coherencia.
1 2 3 4 5 | h1 { font-family:Georgia, Times New Roman, Times, serif; font-size:16px; color:#333; } |
¿Cómo usar fuentes no instaladas?(Font Face)
Aunque este truco nos permita usar fuentes que el usuario no tenga disponible debemos considerar que en algunos navegadores como IE6 pueden verse muy pixeladas.
1 2 3 4 5 6 | @font-face { font-family: 'Century'; src: url(century.ttf); src: local('Century'), local('Century'), url(century.ttf) format('truetype'); } |
En este caso se estaría asignando la fuente Century de tipo truetype, la cual debe estar en la misma carpeta de nuestra hoja de estilos, la tercera y cuarta linea sirve para definir que fuente utilizar en caso esta ya esté instalada.