Download - Tipografia
![Page 1: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/1.jpg)
Diseño Web y Composición Digital
Tipografías Web
![Page 2: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/2.jpg)
![Page 3: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/3.jpg)
![Page 4: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/4.jpg)
![Page 5: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/5.jpg)
![Page 6: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/6.jpg)
9 Tipografías “seguras”
Tipografías instaladas en Windows y Mac OS Arial
Arial BlackComic Sans MSGeorgiaImpactTimes New Roman
Trebuchet MSVerdana
![Page 7: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/7.jpg)
Anatomía de una letra
Prueba Tipografía
1 Línea Base 9 Anillo
1
2 3 4
5
67
89
10
11
12
2 Altura3 Hueco
4 Barra Transversal
5 Remate
6 Línea Media
7 Fuste
8 Ápice
10 Descendente11 Ascendente
12 Serif
Prueba Tipografía
![Page 8: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/8.jpg)
Serif
Aumenta legibilidad en bloques generales de texto al proporcionar línea horizontal
Fuentes serif modernas son más útiles en títulos
Transiciones suaves a fuertes, serif redondeados a más rectos
Vogue, Brides y Harper´s Bazaar
GaramondBaskervilleGeorgiaRockwell
![Page 9: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/9.jpg)
![Page 10: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/10.jpg)
Sans Serif
Aparecidas en 1800 Más legibles a tamaño
pequeño Impreso: Titulo sans
serif, cuerpo serif Web: opuesto Arial: genérica, “sin
voz”, perfecta para cuerpo de texto
ArialCalibriHelveticaVerdana
![Page 11: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/11.jpg)
![Page 12: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/12.jpg)
Escritas a mano
Símbolo de humanidad Personalidad tangible Baja legibilidad
Brush Script Std
Edwardian Script
Handwriting Dakota
Lucida Handwriting
![Page 13: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/13.jpg)
![Page 14: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/14.jpg)
Novelty
Decorativas Menos legibles Añaden gran
personalidad y estilo al diseño
Mesquite Std
Rosewood MaturaHerculanum
![Page 15: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/15.jpg)
![Page 16: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/16.jpg)
dingbat
Carácteres ornamentales que se usaban para separar texto
La mayoría tienen un tema
Webdings Webdings
Wingdings Wingdings Wingdings wingdings
![Page 17: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/17.jpg)
ARCADE
![Page 18: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/18.jpg)
Otras características
ALTAS – bajas Tamaño Peso:
Bold Light
Estilo Itálica Oblicua
Decorado: Subrayado Overline Tachado Blink
![Page 19: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/19.jpg)
Espaciado de Texto
Horizontal Kerning: espacio
entre letras particulares
Tracking: Espacio entre letras en general
Alto de línea: Altura del texto
![Page 20: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/20.jpg)
CCS
Letter-spacing Word-spacing Text-align Line-height Text-indent
Font-family Font-variant Font-weight Font-style Font-size Text-transform Text-Decoration
![Page 21: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/21.jpg)
¿Cómo seleccionar fuentes?
Diseño WebDiseño WebDiseño Web
Diseño WebDiseño Web
Diseño WebDiseño WebDiseño Web
Diseño WebDiseño WebDiseño WebDiseño WebDiseño WebDiseño WebDiseño web Diseño Web
![Page 22: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/22.jpg)
Tipografía
![Page 23: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/23.jpg)
Tipografía 2
Texto Font
Lorem ipsum dolor sit amet Arial
Lorem ipsum dolor sit amet Arial Black
Lorem ipsum dolor sit amet Bookman old style
Lorem ipsum dolor sit amet Comic Sans MC
Lorem ipsum dolor sit amet Courier
Lorem ipsum dolor sit amet Courier new
Lorem ipsum dolor sit amet Garamond
Lorem ipsum dolor sit amet Georgia
Lorem ipsum dolor sit amet Impact
Lorem ipsum dolor sit amet Lucida console
![Page 24: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/24.jpg)
Font = imágenes
![Page 25: Tipografia](https://reader034.vdocuments.co/reader034/viewer/2022051411/5457219aaf7959b6358b9653/html5/thumbnails/25.jpg)
sIFR
Scalable Inman Flash Replacement Fuentes en
cabeceros usando Flash y Javascript
http://www.mikeindustries.com/blog/sifr