Uso de tipografía en web

Vista previa del material en texto

Tipografías e íconos
El HTML manda a llamar fuentes en la computadora del usuario
Se conocen como “Fallbacks”
Se especifican varias fuentes de una familia
Cuidar que el diseño se mantenga igual en cualquier equipo
Familias genéricas
Serif
Times New Roman
Georgia
Garamond
Sans-serif
Arial
Verdana
Helvética
Tahoma
Trebuchet
Monospace 
Courier New
Lucida Console
Monaco
Cursive
Brush Script Mt
Lucida Handwriting
Fantasy
Copperplate
Papyrus
.p1
{font-family: “Times New Roman”, Georgia, serif;}
.p2
{font-family: Arial, Helvetica, Verdana, sans-serif;}
.p3
{font-family: “Lucida Console”, “Courier New”, monospace;}
* Si el nombre de la fuente lleva más de una palabra va entre “”
Las tipografías sans-serif se leen mejor en pantalla
Usar las display solo para h1, h2
Siempre dejar fallbacks como alternativa en el mismo estilo
Algunas consideraciones
Antes se usaban imágenes en lugar de fuentes genéricas
Se pueden incrustar webfonts a través de CSS
Fuentes específicas para pantalla
¿Y si quiero una tipografía más interesante?
Convertir una fuente a web Font
http://www.Fontsquirrel.Com/tools/webfont-generator 
O descargar una web font existente (.woff es el formato más común)
Guardarla en la misma carpeta de tu html
1. Forma difícil
@font-face
{font-family: mifuente;
src: url(fonts/sensation_light.woff);}
.p4
{font-family: mifuente;}
Mandarla a llamar en el CSS y aplicarla 
Usar google fonts
Se mandan a llamar desde el servidor de google
Son gratuitas
2. Forma Fácil
<link
rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
En el CSS
.p4
{font-family: ‘Sofia’, cursive;}
En el HTML dentro del head
<link
rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Inconsolata|Droid+Sans">
Fuentes con espacio poner un +
Uso de varias fuentes separarlas con |