SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
Uso consciente de la
 tipografía en web
Monoespaciada   



Proporcional
           



Serif
   



Sans-Serif
Máximo tres en un sitio

 Texto
 Display
 Decoración
Propiedades de la
    tipografía

Legible
Leíble
Escaneable
Legible

Eligiendo la tipografía y sus propiedades

Eligiendo la tipografía y sus propiedades

           Eligiendo la tipografía y sus propiedades




Eligiendo la tipografía y sus propiedades
Leíble
Generalmente los usuarios de
Mac disponen de las fuentes
incluidas en Windows Font
Pack, ya que éste se instala
automáticamente desde que
Mac Os viene por defecto con
Internet Explorer, pero nunca
estaremos seguros de qué
versión tiene el usuario final,
así que la regla de declarar
fuentes alternativas mediante
C S S d e b e r e m o s a p l i c a r l a
siempre. 
Leíble
Generalmente los usuarios de Mac disponen de
las fuentes incluidas en Windows Font Pack, ya
que éste se instala automáticamente desde que
Mac Os viene por defecto con Internet Explorer,
pero nunca estaremos seguros de qué versión
tiene el usuario final, así que la regla de declarar
fuentes alternativas mediante CSS deberemos
aplicarla siempre. 
Escaneable
Escaneable
Manejo de pesos, tamaños y colores
  para dividir y clasificar grandes
 cantidades de texto de modo que
  sea sencillo llegar a fragmentos
    específicos de información
Otras recomendaciones
 Uso de itálicas para títulos de libros, citas, o
             como estilos de ligas
Otras recomendaciones
  No siempre es bueno subrayar las ligas
Otras recomendaciones
  No manejar columnas de texto muy largas,
 para no entorpecer la lectura (ancho óptimo
            de 58 a 72 caracteres)

Más contenido relacionado

Destacado

Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016Adriana Tienda
 
Tipografia web
Tipografia webTipografia web
Tipografia webaldiablo
 
2. ¿Qué es un Hosting y como contratarlo
2.  ¿Qué es un Hosting y como contratarlo 2.  ¿Qué es un Hosting y como contratarlo
2. ¿Qué es un Hosting y como contratarlo IMAGINA EDUCATION SLU
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...Igalia
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015Adriana Tienda
 
Presentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos MadridPresentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos MadridIMAGINA EDUCATION SLU
 
Color + Tipografia en la web
Color + Tipografia en la webColor + Tipografia en la web
Color + Tipografia en la webguest8667c2
 
Color y Tipografia en la web
Color y Tipografia en la webColor y Tipografia en la web
Color y Tipografia en la webguest8667c2
 
DiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaDiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaRubens Yanes
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaJenny Palacios
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Reglas Para Diseño Web
Reglas Para Diseño WebReglas Para Diseño Web
Reglas Para Diseño WebLuis Palomino
 

Destacado (17)

Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Tipografia web
Tipografia webTipografia web
Tipografia web
 
2. ¿Qué es un Hosting y como contratarlo
2.  ¿Qué es un Hosting y como contratarlo 2.  ¿Qué es un Hosting y como contratarlo
2. ¿Qué es un Hosting y como contratarlo
 
Procediments de disseny digital
Procediments de disseny digitalProcediments de disseny digital
Procediments de disseny digital
 
Organizador grafico
Organizador graficoOrganizador grafico
Organizador grafico
 
Flat design
Flat designFlat design
Flat design
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015
 
Presentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos MadridPresentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos Madrid
 
Color + Tipografia en la web
Color + Tipografia en la webColor + Tipografia en la web
Color + Tipografia en la web
 
Color y Tipografia en la web
Color y Tipografia en la webColor y Tipografia en la web
Color y Tipografia en la web
 
DiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaDiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y Tipografia
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 
Reglas Para Diseño Web
Reglas Para Diseño WebReglas Para Diseño Web
Reglas Para Diseño Web
 

Más de Pamela Rodriguez

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcialPamela Rodriguez
 
Tema 9 - Estructura con css
Tema 9 - Estructura con cssTema 9 - Estructura con css
Tema 9 - Estructura con cssPamela Rodriguez
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssPamela Rodriguez
 
Tema 6 - Formularios en html
Tema 6 - Formularios en htmlTema 6 - Formularios en html
Tema 6 - Formularios en htmlPamela Rodriguez
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlPamela Rodriguez
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webPamela Rodriguez
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaPamela Rodriguez
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLPamela Rodriguez
 

Más de Pamela Rodriguez (9)

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcial
 
Tema 9 - Estructura con css
Tema 9 - Estructura con cssTema 9 - Estructura con css
Tema 9 - Estructura con css
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
Tema 6 - Formularios en html
Tema 6 - Formularios en htmlTema 6 - Formularios en html
Tema 6 - Formularios en html
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en html
 
Tema 5 - Tablas en html
Tema 5 - Tablas en htmlTema 5 - Tablas en html
Tema 5 - Tablas en html
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos web
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materia
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 

Tema 8 - Uso de la tipografía en web

  • 1. Uso consciente de la tipografía en web
  • 2. Monoespaciada Proporcional Serif Sans-Serif
  • 3.
  • 4. Máximo tres en un sitio Texto Display Decoración
  • 5.
  • 6. Propiedades de la tipografía Legible Leíble Escaneable
  • 7. Legible Eligiendo la tipografía y sus propiedades Eligiendo la tipografía y sus propiedades Eligiendo la tipografía y sus propiedades Eligiendo la tipografía y sus propiedades
  • 8. Leíble Generalmente los usuarios de Mac disponen de las fuentes incluidas en Windows Font Pack, ya que éste se instala automáticamente desde que Mac Os viene por defecto con Internet Explorer, pero nunca estaremos seguros de qué versión tiene el usuario final, así que la regla de declarar fuentes alternativas mediante C S S d e b e r e m o s a p l i c a r l a siempre. 
  • 9. Leíble Generalmente los usuarios de Mac disponen de las fuentes incluidas en Windows Font Pack, ya que éste se instala automáticamente desde que Mac Os viene por defecto con Internet Explorer, pero nunca estaremos seguros de qué versión tiene el usuario final, así que la regla de declarar fuentes alternativas mediante CSS deberemos aplicarla siempre. 
  • 11. Escaneable Manejo de pesos, tamaños y colores para dividir y clasificar grandes cantidades de texto de modo que sea sencillo llegar a fragmentos específicos de información
  • 12. Otras recomendaciones Uso de itálicas para títulos de libros, citas, o como estilos de ligas
  • 13. Otras recomendaciones No siempre es bueno subrayar las ligas
  • 14. Otras recomendaciones No manejar columnas de texto muy largas, para no entorpecer la lectura (ancho óptimo de 58 a 72 caracteres)