Creación de páginas web desde cero (9 Tipografías)
Categorías : HTML.
Hoy vamos a hablar sobre las tipografías o fuentes para la web, que es un tema muy importante a la hora de definir un buen diseño en vuestras páginas.
Lo primero que debéis saber es que al existir todo tipo de dispositivos que pueden mostrar una página web bajo distintos sistemas operativos, no es algo que resulte fácil de implementar.
Hasta no hace mucho una página web estaba limitada a ciertos tipos de fuentes, e incluso podía darse el caso de que se eligiera una tipografía que no estuviera disponible por lo que al final se re-emplazaba por otra.
En HTML versión 4 e inferiores se podía utilizar la etiqueta font para especificarla, pero a partir de HTML5 esta etiqueta ha quedado obsoleta y no debe ser utilizada bajo ningún concepto, por lo que se ha relegado este trabajo a las hojas de estilo css.
La propiedad "font-family" del CSS nos permite elegir un tipo de fuente, pero ojo que como ya comente anteriormente puede darse el caso de que la fuente que elijamos no esté disponible para algunos usuarios. Veamos un ejemplo :
/* Fuente principal Verdana, re-emplazos : Geneva y sans-serif */.Fuente1 { font-family:Verdana, Geneva, sans-serif; }
En este ejemplo se ha elegido la fuente "Verdana" para la clase "Fuente1" si se diera el caso de que esa fuente no se encuentra disponible se buscaría la fuente "Geneva", y en caso de que esa fuente tampoco se encuentre disponible se buscaría la fuente "sans-serif".
A continuación veamos una lista de las combinaciones de fuentes más comunes :
| Fuentes Serif | Ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
| Fuentes Sans-Serif | Ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
| Fuentes Monoespaciadas (ideales para código fuente) | Ejemplo |
1
|
texto de ejemplo |
1
|
texto de ejemplo |
Ahora que ya habéis visto como especificar una fuente también estaría bien saber cómo especificar un tamaño para esta, y para ello se utiliza el atributo "font-size" :
/* Fuente de 21 pixeles */.Fuente21px { font-size:21px; }
Bien ahora ya podéis jugar con fuentes básicas y sus tamaños, pero que pasa si queremos utilizar algún otro tipo de fuente? tenéis dos opciones, podéis arriesgaros a utilizar una fuente que exista en vuestro sistema, pero no es muy probable que el usuario la tenga también, o podéis utilizar una fuente para la web.
Desde hace relativamente poco se pueden agregar fuentes externas a los documentos html, pero estas fuentes vienen en unos formatos especiales de forma que puedan ser leídas por la gran mayoría de sistemas operativos. El problema es que no podemos convertir una fuente cualquiera ya que la gran mayoría tienen copyright.
Echad un vistazo al siguiente enlace : Font Squirrel. En este enlace encontrareis cientos de fuentes que pueden ser utilizadas gratis, pero id con cuidado ya que puede ser que os bajéis una fuente que no tenga tildes o caracteres como la "ñ" o la "ç" así que probadlas antes de implementarlas (en la misma página web se pueden escribir textos de prueba).
Descargad un kit de fuentes para ver como vienen, por defecto deberían venir varios archivos "eot", "svg", "ttf", y "woff" estos son los que contienen la fuente para distintos sistemas operativos, además os vendrá un archivo "html" de demostración, un archivo "txt" con la licencia y un archivo "css" con la implementación para la fuente.
/* Declaración de una fuente externa */@font-face {font-family: 'CloisterBlackLight';src: url('./Fuente Cloister/CloisterBlack-webfont.eot');src: url('./Fuente Cloister/CloisterBlack-webfont.eot?#iefix') format('embedded-opentype'),url('./Fuente Cloister/CloisterBlack-webfont.woff') format('woff'),url('./Fuente Cloister/CloisterBlack-webfont.ttf') format('truetype'),url('./Fuente Cloister/CloisterBlack-webfont.svg#CloisterBlackLight') format('svg');font-weight: normal;font-style: normal;}/* Clase que utilizara la fuente Cloister */.Fuente_Cloister {font-family: 'CloisterBlackLight';}
Texto de ejemplo
Por el funcionamiento del atributo "@font-face" no os preocupéis mucho ya que siempre os viene montado en el kit (en mi caso en el archivo stylesheet.css), con lo que basta con descomprimir el kit en el directorio de vuestra pagina web, y como mucho modificar la ruta de los archivos. Yo por ejemplo he descomprimido el kit en un directorio llamado "Fuente Cloister" por lo que he agregado "./Fuente Cloister/" delante de las urls que apuntan a los archivos de las fuentes dentro del atributo @font-face.
Lo único que debéis hacer una vez insertado el "@font-face" es añadir el "font-family" con el nombre de la fuente en las clases donde queréis mostrar dicha fuente.
Y con esto terminamos la novena entrega del tutorial, si lo deseáis podéis ver el ejemplo online simplificado o descargar el ejemplo para poder editarlo en vuestro ordenador.
| Ver Ejemplo | Descargar Ejemplo |