SlideShare una empresa de Scribd logo
1 de 31
Descargar para leer sin conexión
@acirujano  | #WCVLC
Cómo acertar
al elegir el tipo de letra
de tu web
Ana Cirujano | WordCamp Valencia | 19-oct-2019
@acirujano  | #WCVLC
Ana Cirujano
Diseñadora
@acirujano
anacirujano.com
easyworkation.com
unbilleteachattanooga.com
@acirujano  | #WCVLC
@acirujano  | #WCVLC
La tipografía es el traje con el que vestimos a las palabras.
@acirujano  | #WCVLC
La tipografía
es el traje con el que vestimos
a las palabras.
@acirujano  | #WCVLC
@acirujano  | #WCVLC
Bodoni
Serif, racionalista, didona
Moderna
@acirujano  | #WCVLC
Trasandina
Sans serif, geométrica, humanista
@acirujano  | #WCVLC
RBNo3.1
Sans serif, geométrica
@acirujano  | #WCVLC
Museo sans rounded
Sans serif, Geométrica, rounded
@acirujano  | #WCVLC
UndergradHorror Show
Swung Note Stencil Antiqua EF Rough
@acirujano  | #WCVLC
Montserrat es un tipo de letra que se ha utilizado mucho en
los últimos años, es extremadamente popular. Combina una
apariencia geométrica con proporciones modernas. Se ha
usado demasiado, es omnipresente. La verdad es que es una
tipografía excelente, de ahí su popularidad. Está disponible
en 9 pesos, con sus itálicas, y también tiene versalitas.
Un título diferente para
ser más interesante
@acirujano  | #WCVLC
@acirujano  | #WCVLC
aeMontserrat
aeRoboto
aeOpen Sans
aeHelvetica
@acirujano  | #WCVLC
WordCamp
Baskerville
WordCamp
Merriweather
@acirujano  | #WCVLC
Merriweather
@acirujano  | #WCVLC
Playfair Display es un tipo de letra que me gusta mucho
para cabeceras pero no para párrafos porque tiene
mucho contraste y eso hace que pierda legibilidad en
tamaños más pequeños. Su propio nombre lo indica.
En este terreno se mueve mucho mejor, por ejemplo,
Georgia, que es un tipo de letra que diseñó Matthew
Carter, uno de los mejores tipógrafos de la Historia.
@acirujano  | #WCVLC
WordCamp Valencia
WordCamp Valencia
@acirujano  | #WCVLC
@acirujano  | #WCVLC
@acirujano  | #WCVLC
@acirujano  | #WCVLC
WordCamp Valencia
WordCamp Valencia
WordCamp Valencia
WordCamp Valencia
@acirujano  | #WCVLC
@acirujano  | #WCVLC
1996
Fuentes de sistema
2005
OpenType
2010
@fontface
webfonts
Servicios de
tipografía web
2016
Fuentes
variables
@acirujano  | #WCVLC
@acirujano  | #WCVLC
1996
Fuentes de sistema
2005
OpenType
2010
@fontface
webfonts
Servicios de
tipografía web
2016
Fuentes
variables
@acirujano  | #WCVLC
@acirujano  | #WCVLC
@acirujano  | #WCVLC
@acirujano  | #WCVLC
@acirujano  | #WCVLC
¡Gràcies!

Más contenido relacionado

Más de Ana Cirujano

Vaca, xovenca e pucha: fuentes variables en WordPress
Vaca, xovenca e pucha: fuentes variables en WordPressVaca, xovenca e pucha: fuentes variables en WordPress
Vaca, xovenca e pucha: fuentes variables en WordPressAna Cirujano
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoAna Cirujano
 
Elige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu webElige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu webAna Cirujano
 
Mejora la UX y la WPO de tu web con un plugin de fuentes variables
Mejora la UX y la WPO de tu web con un plugin de fuentes variablesMejora la UX y la WPO de tu web con un plugin de fuentes variables
Mejora la UX y la WPO de tu web con un plugin de fuentes variablesAna Cirujano
 
Ahorra tiempo y no diseñes desde cero
Ahorra tiempo y no diseñes desde ceroAhorra tiempo y no diseñes desde cero
Ahorra tiempo y no diseñes desde ceroAna Cirujano
 
Better UX and WPO using variable fonts in WordPress
Better UX and WPO using variable fonts in WordPressBetter UX and WPO using variable fonts in WordPress
Better UX and WPO using variable fonts in WordPressAna Cirujano
 
Llamar a la acción, a la emoción y a la sensación
Llamar a la acción, a la emoción y a la sensaciónLlamar a la acción, a la emoción y a la sensación
Llamar a la acción, a la emoción y a la sensaciónAna Cirujano
 
Variable fonts: the future of web design
Variable fonts: the future of web designVariable fonts: the future of web design
Variable fonts: the future of web designAna Cirujano
 
Deja de abusar de Photoshop: trata las imágenes con CSS
Deja de abusar de Photoshop: trata las imágenes con CSSDeja de abusar de Photoshop: trata las imágenes con CSS
Deja de abusar de Photoshop: trata las imágenes con CSSAna Cirujano
 
Ortotipografía para WordPress
Ortotipografía para WordPressOrtotipografía para WordPress
Ortotipografía para WordPressAna Cirujano
 
¿Cómo se diseña una web y cuánto cuesta?
¿Cómo se diseña una web y cuánto cuesta?¿Cómo se diseña una web y cuánto cuesta?
¿Cómo se diseña una web y cuánto cuesta?Ana Cirujano
 
Ana Cirujano: Fuentes variables, el futuro de la tipografía web
Ana Cirujano: Fuentes variables, el futuro de la tipografía webAna Cirujano: Fuentes variables, el futuro de la tipografía web
Ana Cirujano: Fuentes variables, el futuro de la tipografía webAna Cirujano
 
¿Puede la tipografía aumentar las ventas de tu tienda online?
¿Puede la tipografía aumentar las ventas de tu tienda online?¿Puede la tipografía aumentar las ventas de tu tienda online?
¿Puede la tipografía aumentar las ventas de tu tienda online?Ana Cirujano
 
Bloguero, cuidado con el lock-in
Bloguero, cuidado con el lock-inBloguero, cuidado con el lock-in
Bloguero, cuidado con el lock-inAna Cirujano
 
Mejora el diseño de tu web: Tipografía responsive
Mejora el diseño de tu web: Tipografía responsiveMejora el diseño de tu web: Tipografía responsive
Mejora el diseño de tu web: Tipografía responsiveAna Cirujano
 
Tipografía Responsive - WC Zaragoza 2018
Tipografía Responsive - WC Zaragoza 2018Tipografía Responsive - WC Zaragoza 2018
Tipografía Responsive - WC Zaragoza 2018Ana Cirujano
 

Más de Ana Cirujano (16)

Vaca, xovenca e pucha: fuentes variables en WordPress
Vaca, xovenca e pucha: fuentes variables en WordPressVaca, xovenca e pucha: fuentes variables en WordPress
Vaca, xovenca e pucha: fuentes variables en WordPress
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
 
Elige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu webElige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu web
 
Mejora la UX y la WPO de tu web con un plugin de fuentes variables
Mejora la UX y la WPO de tu web con un plugin de fuentes variablesMejora la UX y la WPO de tu web con un plugin de fuentes variables
Mejora la UX y la WPO de tu web con un plugin de fuentes variables
 
Ahorra tiempo y no diseñes desde cero
Ahorra tiempo y no diseñes desde ceroAhorra tiempo y no diseñes desde cero
Ahorra tiempo y no diseñes desde cero
 
Better UX and WPO using variable fonts in WordPress
Better UX and WPO using variable fonts in WordPressBetter UX and WPO using variable fonts in WordPress
Better UX and WPO using variable fonts in WordPress
 
Llamar a la acción, a la emoción y a la sensación
Llamar a la acción, a la emoción y a la sensaciónLlamar a la acción, a la emoción y a la sensación
Llamar a la acción, a la emoción y a la sensación
 
Variable fonts: the future of web design
Variable fonts: the future of web designVariable fonts: the future of web design
Variable fonts: the future of web design
 
Deja de abusar de Photoshop: trata las imágenes con CSS
Deja de abusar de Photoshop: trata las imágenes con CSSDeja de abusar de Photoshop: trata las imágenes con CSS
Deja de abusar de Photoshop: trata las imágenes con CSS
 
Ortotipografía para WordPress
Ortotipografía para WordPressOrtotipografía para WordPress
Ortotipografía para WordPress
 
¿Cómo se diseña una web y cuánto cuesta?
¿Cómo se diseña una web y cuánto cuesta?¿Cómo se diseña una web y cuánto cuesta?
¿Cómo se diseña una web y cuánto cuesta?
 
Ana Cirujano: Fuentes variables, el futuro de la tipografía web
Ana Cirujano: Fuentes variables, el futuro de la tipografía webAna Cirujano: Fuentes variables, el futuro de la tipografía web
Ana Cirujano: Fuentes variables, el futuro de la tipografía web
 
¿Puede la tipografía aumentar las ventas de tu tienda online?
¿Puede la tipografía aumentar las ventas de tu tienda online?¿Puede la tipografía aumentar las ventas de tu tienda online?
¿Puede la tipografía aumentar las ventas de tu tienda online?
 
Bloguero, cuidado con el lock-in
Bloguero, cuidado con el lock-inBloguero, cuidado con el lock-in
Bloguero, cuidado con el lock-in
 
Mejora el diseño de tu web: Tipografía responsive
Mejora el diseño de tu web: Tipografía responsiveMejora el diseño de tu web: Tipografía responsive
Mejora el diseño de tu web: Tipografía responsive
 
Tipografía Responsive - WC Zaragoza 2018
Tipografía Responsive - WC Zaragoza 2018Tipografía Responsive - WC Zaragoza 2018
Tipografía Responsive - WC Zaragoza 2018
 

Último

contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAPjuanrincon129309
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxVanessaPobletePoblet
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929FiorellaLaura2
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDAdiawaraplast
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docMerlyBrisetTorneroLu
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxHarryArmandoLazaroBa
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfsteevensnodamartel
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basicoJOSE645741
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadratc070603hmcmrha7
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezRosibelVictoriaVelas
 

Último (20)

contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAP
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptx
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptx
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdf
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
 

Cómo acertar al elegir el tipo de letra de tu web