Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
Descargar como pptx, pdf o txt
Está en la página 1/ 10
Tipografía
¿Cómo insertar una tipografía en html?
Selecciona una fuente: Antes de insertar una fuente, elige la que deseas utilizar. Puedes seleccionar una fuente de servicios en línea como Google Fonts (https://fonts.google.com/) o usar fuentes locales.
Si eliges “google fonts” deberías ver las fuentes con un formato así, seleccionas las tipografías que requerirá tu página. Si seleccionas el link deberías pegarlo en el head de tu HTML, o puedes importar la tipografía al CSS con @import Nosotros hemos elegido link, por lo que pegamos el link en el head de HTML, con la fuente Averia Libre, debería quedar así. Declaración de fuentes:
Para declarar fuentes personalizadas, se utiliza la regla @font-face en css, se utilizan las propiedades:
font-family: define el nombre de la fuente.
src: define la ruta del archivo y el formato de la fuente. font-style: define el estilo de la fuente (normal, italic, oblique). font-weigth: define el grosor de la fuente (normal, bold, bolder, lighter). Tipos de archivos para fuentes: Existen varios formatos para las fuentes utilizados en la web:
.ttf: Este es uno de los formatos de fuente más antiguos, soportado por los navegadores más actuales.
.woff: Se trata de un formato comprimido, por lo que ocupa menos espacio que el formato .ttf, también es soportado por los navegadores actuales.
.woff2: Evolución del formato .woff, incluye mejoras en la comprensión de archivos.
.eot: Formato de fuente creado por Microsoft, sólo es soportado por Internet Explorer. Recomendaciones: - Usar demasiadas fuentes en una misma web incrementa la cantidad de archivos a descargar, con una disminución en la velocidad de carga de la página web, como norma general no se debería usar más de dos familias de fuentes, una para encabezados y otra para el cuerpo.
- El formato más recomendable es el .woff2, que es más ligero y tiene amplio soporte en navegadores y es de licencia abierta. Evita el formato .eot, salvo que se requiera para dar soporte a versiones antiguas de Internet Explorer.
- Existen fuentes comerciales que requieren comprar licencias para utilizarlas.
- Los tipos de fuentes más importantes son con serifa, sin serifa, tipo display y handwriting.
- Añadir siempre fuentes alternativas al atributo font-family, para que la página se pueda leer igual aunque el navegador no tenga la fuente predeterminada. Recomendaciones estéticas Display: Se utilizan en eslóganes, posters, títulos y en general en cualquier elemento que se quiera destacar.
Handwriting: Simula la escritura a mano.
Serif y sans-serif: Estas dos son las opciones más recomendables para usar en la web, ya que tienen mejor legibilidad y aportan un resultado serio y profesional, la diferencia es la serifa o ausencia de esta, que son pequeños adornos en los bordes de las letras. Recomendaciones estéticas: - La combinación de una fuente con serifa para el título y otra sin serifa para el cuerpo (o viceversa) suele ser sinónimo de éxito. Eso no quiere decir que no puedas combinar dos familias de fuente del mismo tipo, pero de hacerlo asegúrate de que se diferencian bien. Aquí dejamos algunos ejemplos que nos gustaron y un enlace a una web con recomendaciones de estilo en este sentido.
- Combinación de Roboto Slab y Raleway.
- Combinación de Monserrat y Martel. - Combinación de Quattrocento y Karma. - Combinación de Raleway y Lato.
https://fontjoy.com/
https://arturogarcia.com/elegir-combinar-tipografias-web/ Ejercicio tipografía: - Utiliza una de las “combinaciones de éxito”, por ejemplo roboto slab para un H1, y raleway para un párrafo descargando las fuentes desde google fonts o similar.
- Carga una fuente descargándola junto a tu archivo HTML y enlázala en tu página.
