Uso de tipografía en diseño web

1. TIPOGRAFÍA EN DISEÑO WEB

2. EL DISEÑO WEB ES 95%
TIPOGRAFÍA
El 95% de la información en la web es lenguaje
escrito.
Por esta razón resulta lógico decir que un
diseñador web debe tener un buen entrenamiento
en la disciplina de l a información escrita, en otras
palabras: Tipografía

4. RECOMENDACIONES GENERALES
JERARQUÍA

5. RECOMENDACIONES GENERALES
TAMAÑO

6. RECOMENDACIONES GENERALES
SELECCIÓN TIPOGRAFÍA

7. RECOMENDACIONES GENERALES
SELECCIÓN TIPOGRAFÍA

8. RECOMENDACIONES GENERALES
INTERLINEADO

9. RECOMENDACIONES GENERALES
USO DE MAYÚSCULAS

10. RECOMENDACIONES GENERALES
CONTRASTE

11. RECOMENDACIONES GENERALES
CENTRADO Y ALINEADO

12. RECOMENDACIONES GENERALES
CENTRADO Y ALINEADO

13. UNIDADES DE MEDIDA
Normalmente, las tipografías se trabajan en
píxeles.
Opcionalmente, en vez de trabajar con píxeles,
podemos definir el tamaño de una tipografía como
un porcentaje de la tipografía "media" definida en
el ordenador del usuario.

14. WEB FONTS

15. PROBLEMÁTICA INICIAL
Durante mucho tiempo, el uso de tipografías en el
diseño web, desde el diseño, tuvo un problema.
Por defecto, los navegadores web solo podían
presentar el texto con las tipografías instaladas en
cada equipo dependiendo de su sistema operativo
(Windows, Mac, Linux,…).

16. IMÁGENES CON TEXTO
Una solución a este
problema fue
sustituir las
tipografías por
imágenes
Esto permite crear
cualquier efecto que
queramos a las
tipografías.

17. IMÁGENES CON TEXTO
CONSIDERACIOES
La página web tarda mucho en cargarse.
Los buscadores no pueden indexar el texto.
El texto no se puede utilizar en bloques fluidos.
El usuario no puede aumentar el texto y algunos
pueden tener problemas de legibilidad.
El texto es complicado de actualizar.

18. FUENTES DE SISTEMA
Listado de tipografías que se van a
intentar utilizar en orden establecido

19. FUENTES DE SISTEMA
GRUPOS DE FUENTES MÁS UTILIZADOS
Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive

20. FUENTES DE SISTEMA
Si la primera fuente no está disponible en el ordenador del
usuario, la segunda fuente será utilizada y así
sucesivamente.
FONT STACK
Sintaxis CSS

21. FORMATO PARA TEXTOS
DESDE HOJAS DE ESTILO
Actualmente esta limitación se ha solucionado,
pero los efectos web que se pueden realizar a las
tipografías (negrita, subrayado, alienación…)
continúan siendo muy limitados.

22. ESTILOS APLICABLES
POR MEDIO DE CSS
Color.
Normal, negrita, cursiva, subrayado.
Alinear a derecha, izquierda, centro, justificado.
Tamaño de fuente. Se puede definir en píxeles o en un tamaño
relativo (pequeño, grande).
Espaciado de palabras, espaciado de letras, espaciado entre
parágrafos.
Sombreados o gradientes de colores (propiedades de CSS3).
Otros (consultar con el maquetador).

23. USO DE WEBFONTS
Una de las mejoras más importantes de diseño web
hoy en día es el soporte para fuentes web en todos
los navegadores modernos utilizando cualquier
fuente que está disponible en el sitio web alojado
como fuentes de Google, TypeKit y Fonts.com,
entre otros.

24. USO DE WEBFONTS
Esto se realiza a través de la etiqueta @import y la
etiqueta de enlace estándar, link dentro de los
documentos HTML y CSS

25. USO DE WEBFONTS
Etiqueta de enlace: link
Etiqueta @import

26. VENTAJAS DEL USO DE
WEBFONTS
Se ahorra dinero. No es necesario adquirir las
fuentes en línea .
Ahorra tiempo. Se pueden integrar fuentes
manualmente en su archivo de carpetas, mediante
fuentes web se puede hacer con una línea de código .
Son compatibles con todas las versiones nuevas de
los navegadores web y son SEO-friendly.

27. SERVICIOS WEBFONT

28. SERVICIOS
Typekit
https://typekit.com/
Webtype
http://www.webtype.com/
Fonts.com
http://www.fonts.com/
Google Fonts
https://www.google.com/fonts
Font Squirrel
http://www.fontsquirrel.com/

29. Jugando con la tipografía
Kerntype
http://type.method.ac
Typewar
http://typewar.com
I shot the Serif
http://www.tothepoint.co.uk/more/fun/shoot_the_serif/
Shape type
http://shape.method.ac
Kill Comic Sans
http://www.objectiveinc.com/kill-comic-sans/

30. COMPLEMENTOS
Font Finder
https://addons.mozilla.org/es/firefox/addon/font-finder/

31. ADRIANA ATZIMBA TIENDA MARTÍNEZ
ATZIMBATM@GMAIL.COM