ADWE

www.adwe.es

El uso de la
tipografía en la web

by @Miguel__Morera

Un poco sobre mí

Miguel Morera

Diseñador web freelance

HTML & CSS

Wordpress

www.dinamiclab.com

MikeM

The early days

1996: Microsoft Develops The Internet's Core Fonts

Web-safe fonts

  • Arial
  • Verdana
  • Trebuchet
  • Times New Roman
  • Comic Sans! o_0

La alternativa

  • Imágenes para texto
  • Webs completas (o casi) hechas con imágenes

Problemas

  • No permite seleccionar texto
  • Carga de la página
  • Indexación Buscadores
  • Cero Accesibilidad

La web 2.0

  • SIFR Flash
  • Cufón
    • Dificulta seleccionar texto
    • Añade mucho código basura
    • Utiliza Javascript
  • Otras técnicas

The Web-font age

@font-face

  • Disponible desde CSS 2.1 (IE4 lo implementaba!)
  • Funciona perfectamente en navegadores modernos

The Web-font age

Phase 2 Design

Phase2 Design Studio

Problemas

  • No todos los navegadores aceptan el mismo tipo de archivo:
    • EOT : Embedded Open Type -> Internet Explorer (Formato Propietario Microsoft)
    • TTF : True Type Font -> Estándar
    • WOFF : Web Open Format (Formato oficial de la W3C, creado por Mozilla)
    • SVG : Scalable Vector Graphics --> Safari

Cómo se utiliza

	@font-face {
		font-family: 'MyFontFamily'; 
		src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
		url('myfont-webfont.woff') format('woff'), 
		url('myfont-webfont.ttf')  format('truetype'), 
		url('myfont-webfont.svg#svgFontName') format('svg');
	}
			
The Fontspring Bullet-proof Method

¿Cómo convierto mis
fuentes a todos esos formatos?

Convertidores Online

  • OnlineFontConverter.com
  • FreeFontConverter.com
  • FontSquirrel

Otras maneras de utilizarla

  • FontSquirrel
  • FontSpring
  • Typekit

La que más me gusta

Google Font API o Google Web Fonts


  1. Eliges las fuentes que necesitas entre las más de 500 familias que dispone, y...
  2. Copias y pegas el código en tu sitio web
<link href="http://fonts.googleapis.com/css?family=FONTS" rel="stylesheet" type="text/css">
			

Ventajas de Google Font API

  • Cómodo
  • Sigues utilizando HTML y CSS
  • Accesible
  • Reduces la carga de procesamiento de tu servidor

La elección de la tipografía es lo más importante

  • Elemento clave al diseñar
  • Expresa estados de ánimo e influye en ellos
  • Se puede tomar como base para definir la línea de diseño a seguir
  • Diferentes según al público al que vaya dirigido

Consejos

  • Elegir fuentes LEGIBLES
  • Intentar NO utilizar más de 2 tipografías
  • Utilizar Negritas con moderación (no como yo)
  • Vigilar el interlineado

Intentar utilizar SIEMPRE fuentes con formato web

  • Una mala elección puede resultar fatal según el navegador o el sistema operativo
  • font-size-adjust puede ayudar a mejorar la visualización

¿Cómo elegir la tipografía para que no nos pase esto?

Comprobando como se ve en los distintos navegadores o sistemas

  • Adobe Browser Lab
  • BrowserShots.org
  • Probarlo por uno mismo!