Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Diseño Web y Composición Digital<br />Tipografías Web<br />
9 Tipografías “seguras”<br />Arial<br />Arial Black<br />Comic Sans MS<br />Georgia<br />Impact<br />Times NewRoman<br />T...
Anatomía de una letra<br />Prueba Tipografía<br />8<br />11<br />4<br />3<br />9<br />2<br />6<br />7<br />1<br />12<br />...
Serif<br />Aumenta legibilidad en bloques generales de texto al proporcionar línea horizontal<br />Fuentes serif modernas ...
Sans Serif<br />Aparecidas en 1800<br />Más legibles a tamaño pequeño<br />Impreso: Titulo sansserif, cuerpo serif<br />We...
Escritas a mano<br />Símbolo de humanidad<br />Personalidad tangible<br />Baja legibilidad<br />Brush Script Std<br />Edwa...
Novelty<br />Decorativas<br />Menos legibles<br />Añaden gran personalidad y estilo al diseño<br />Mesquite Std<br />Rosew...
dingbat<br />Carácteres ornamentales que se usaban para separar texto<br />La mayoría tienen un tema <br />Webdings<br />W...
ARCADE<br />
Otras características<br />ALTAS – bajas<br />Tamaño<br />Peso: <br />Bold<br />Light <br />Estilo<br />Itálica<br />Oblic...
Espaciado de Texto<br />Horizontal<br />Kerning: espacio entre letras particulares<br />Tracking: Espacio entre letras en ...
CCS<br />Letter-spacing<br />Word-spacing<br />Text-align<br />Line-height<br />Text-indent<br />Font-family<br />Font-var...
¿Cómo seleccionar fuentes?<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web...
Tipografía<br />
Tipografía 2<br />
Font = imágenes<br />
sIFR<br />ScalableInman Flash Replacement<br />Fuentes en cabeceros usando Flash y Javascript<br />http://www.mikeindustri...
Upcoming SlideShare
Loading in …5
×

Tipografia

3,025 views

Published on

  • Be the first to comment

Tipografia

  1. 1. Diseño Web y Composición Digital<br />Tipografías Web<br />
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6. 9 Tipografías “seguras”<br />Arial<br />Arial Black<br />Comic Sans MS<br />Georgia<br />Impact<br />Times NewRoman<br />Trebuchet MS<br />Verdana<br />Tipografías instaladas en Windows y Mac OS<br />
  7. 7. Anatomía de una letra<br />Prueba Tipografía<br />8<br />11<br />4<br />3<br />9<br />2<br />6<br />7<br />1<br />12<br />5<br />10<br />Prueba Tipografía<br />1 Línea Base<br /> 9 Anillo<br />5 Remate<br />2 Altura<br />6 Línea Media<br />10 Descendente<br />3 Hueco<br />11 Ascendente<br />7 Fuste<br />4 Barra Transversal<br />8 Ápice<br />12 Serif<br />
  8. 8. Serif<br />Aumenta legibilidad en bloques generales de texto al proporcionar línea horizontal<br />Fuentes serif modernas son más útiles en títulos<br />Transiciones suaves a fuertes, serif redondeados a más rectos<br />Vogue, Brides y Harper´sBazaar<br />Garamond<br />Baskerville<br />Georgia<br />Rockwell<br />
  9. 9.
  10. 10. Sans Serif<br />Aparecidas en 1800<br />Más legibles a tamaño pequeño<br />Impreso: Titulo sansserif, cuerpo serif<br />Web: opuesto<br />Arial: genérica, “sin voz”, perfecta para cuerpo de texto<br />Arial<br />Calibri<br />Helvetica<br />Verdana<br />
  11. 11.
  12. 12. Escritas a mano<br />Símbolo de humanidad<br />Personalidad tangible<br />Baja legibilidad<br />Brush Script Std<br />Edwardian Script<br />Handwriting Dakota<br />Lucida Handwriting<br />
  13. 13.
  14. 14. Novelty<br />Decorativas<br />Menos legibles<br />Añaden gran personalidad y estilo al diseño<br />Mesquite Std<br />Rosewood<br />Matura<br />Herculanum<br />
  15. 15.
  16. 16. dingbat<br />Carácteres ornamentales que se usaban para separar texto<br />La mayoría tienen un tema <br />Webdings<br />Webdings<br />Wingdings<br />Wingdings<br />Wingdings<br />wingdings<br />
  17. 17. ARCADE<br />
  18. 18. Otras características<br />ALTAS – bajas<br />Tamaño<br />Peso: <br />Bold<br />Light <br />Estilo<br />Itálica<br />Oblicua<br />Decorado:<br />Subrayado<br />Overline<br />Tachado<br />Blink<br />
  19. 19. Espaciado de Texto<br />Horizontal<br />Kerning: espacio entre letras particulares<br />Tracking: Espacio entre letras en general<br />Alto de línea: Altura del texto<br />
  20. 20. CCS<br />Letter-spacing<br />Word-spacing<br />Text-align<br />Line-height<br />Text-indent<br />Font-family<br />Font-variant<br />Font-weight<br />Font-style<br />Font-size<br />Text-transform<br />Text-Decoration<br />
  21. 21. ¿Cómo seleccionar fuentes?<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño Web<br />Diseño web<br />Diseño Web<br />
  22. 22. Tipografía<br />
  23. 23. Tipografía 2<br />
  24. 24. Font = imágenes<br />
  25. 25. sIFR<br />ScalableInman Flash Replacement<br />Fuentes en cabeceros usando Flash y Javascript<br />http://www.mikeindustries.com/blog/sifr<br />

×