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

Mas información:

https://youtube.com/shorts/dHJqKvBLqa8?si=-zJc-4fibGnO-wkh

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)