9. Imágenes, fuentes, audio y vídeo

Fuentes en la Web

Formatos de Imagenes

Formatos de Audio

Formatos de Video

Formatos de imágenes con compresión

Material

Tipografías

Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras. Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras.

Herramienta:

Type Anything: Herramienta para ver como queda una página según la tipografía

Interactive Typography Tutorial – Learn UI Design

Diseño

Elección de las fuentes para el diseño de una página web

Mi método para elegir y combinar tipografías

Universal Sans: Permite diseñar de forma exacta una fuente sin serif 1) Es de pago . Pero vale como ejemplo para ver que se puede cambiar en una fuente.

Fuentes en la Web

Font Awesome, the iconic font and CSS toolkit

Indica la fuente a partir de una foto

10 fuentes gratuitas de 8 estilos distintos de enorme calidad

Usando fuentes descargadas en una página Web

creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf: Crear tu propia fuente de iconos 2) Creating and Implementing Your Own Icon Font – A Tutorial

ejemplo_fuentes.zip: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas

El tipo de la letra "a" hace que sea más formal o informal.

Peso de las fuentes

Enfatizar algo no es solo hacer la letra más grande sino usar una fuente con más peso (Weight)

Audio-Video

Formatos de Imagenes

GIF, JPG and PNG – What’s the Difference?

Formatos de Audio

Formatos de audio: Todo lo que deberías saber

HTML5 Audio

Formatos de Video

Formatos de video: Todo lo que deberías saber

HTML5 Video

Material complementario

El tipo de fuente de la película AVATAR

In Defense of Papyrus: Avatar Uses the World’s Second-Most-Hated Font to Signal the Downfall of Civilization

"Papyrus" Ryan Gosling en SNL (subtítulos en español)