Diseño Web y Composición Digital

Tipografías Web

9 Tipografías “seguras”

Tipografías instaladas en Windows y Mac OS Arial

Arial BlackComic Sans MSGeorgiaImpactTimes New Roman

Trebuchet MSVerdana

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

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

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

Escritas a mano

Símbolo de humanidad Personalidad tangible Baja legibilidad

Brush Script Std

Edwardian Script

Handwriting Dakota

Lucida Handwriting

Novelty

Decorativas Menos legibles Añaden gran

personalidad y estilo al diseño

Mesquite Std

Rosewood MaturaHerculanum

dingbat

Carácteres ornamentales que se usaban para separar texto

La mayoría tienen un tema

Webdings Webdings

Wingdings Wingdings Wingdings wingdings

ARCADE

Otras características

ALTAS – bajas Tamaño Peso:

Bold Light

Estilo Itálica Oblicua

Decorado: Subrayado Overline Tachado Blink

Espaciado de Texto

Horizontal Kerning: espacio

entre letras particulares

Tracking: Espacio entre letras en general

Alto de línea: Altura del texto

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

¿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

Tipografía

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

Font = imágenes

sIFR

Scalable Inman Flash Replacement Fuentes en

cabeceros usando Flash y Javascript

http://www.mikeindustries.com/blog/sifr