Tipografía en diseño web
•
1 recomendación•1,084 vistas
El documento discute la importancia de la tipografía en el diseño web, señalando que el 95% de la información en la web es texto. Explica recomendaciones generales sobre jerarquía, tamaño, selección de tipografía, interlineado, mayúsculas, contraste, alineación y centrado. También cubre unidades de medida, fuentes de sistema, formato de texto desde hojas de estilo, ventajas del uso de webfonts y servicios populares de webfonts.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Tipografía en diseño web
Similar a Tipografía en diseño web (20)
Más de Adriana Tienda
Más de Adriana Tienda (15)
Último
Último (20)
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
- 9. RECOMENDACIONES GENERALES USO DE MAYÚSCULAS
- 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.
- 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/
- 31. ADRIANA ATZIMBA TIENDA MARTÍNEZ ATZIMBATM@GMAIL.COM