Typography on the web charla meetup valencia espanol

1. TYPOGRAFÍA PARA LA WEB
TIPS ESENCIALES PARA UNA MEJOR EXPERIENCIA UX

2. PROBABLEMENTE EL ELEMENTO MÁS IMPORTANTE DE UNA PÁGINA WEB.
LA TIPOGRAFÍA
ES IMPORTANTE.

3. HAZ TU WEB LEGIBLE – O NO LO HAGAS.
LA MAYOR PARTE DE
INTERNET ESTÁ EN
LENGUAJE ESCRITO.

4. LA TIPOGRAFÍA ES COMO EL TEXTO APARECE – NO SÓLO LAS FUENTES QUE USAS
¿QUÉ ES LA TIPOGRAFÍA?

5. CARÁCTERÍSTICAS DE LA TIPOGRAFÍA.
TIPOGRAFÍA ES MÁS QUE ELEGIR UNA FUENTE.
▸ Tamaño
▸ Estilo
▸ Color
▸ Grosor
▸ Longitud Línea
▸ Grosor Línea
▸ Kerning
▸ Espacio blanco
▸ Tono
▸ Emoción
▸ Estilo
▸ Orden visual

6. EL TEXTO ES UN ELEMENTO IMPORTANTE PARA EL UI.
TRATAR EL TEXTO COMO
INTERFAZ PARA USUARIO
(NO CONTENIDO).

7. TIPOGRAFÍA OPTIMIZADA QUIERE DECIR MEJOR UX Y UI.
TIPOGRAFÍA OPTIMIZADA QUIERE DECIR:
▸ Legibilidad optimizada
▸ Legible optimizada
▸ Accesibilidad optimizada
▸ Usabilidad optimizada
▸ Orden visual optimizada
= INTERFAZ DE USUARIO Y EXPERIENCIA DE USUARIO OPTIMIZADAS.

8. LA LEGIBILIDAD NO ES LO MISMO QUE LEGIBLE.
LEGIBILIDAD:
La legibilidad se refiere a la facilidad para leer palabras, frases y
bloques enteros de texto. Es lo bien que lees bloques largos de textos.
LEGIBLE:
La legible se refiere a lo fácil que es distinguir una letra de otra. Es lo
bien que lees las letras individualmente.

9. LA LEGIBILIDAD NO ES LO MISMO QUE LEGIBLE.
This is legible but I’m not
LEGIBLE
On the other hand, this is legible and I’m
quite sure it’s also very readable.
sure that it’s very readable
LEGIBILIDAD:

10. LA LEGIBILIDAD NO ES LO MISMO QUE LEGIBLE.
This is legible but I’m not
LEGIBLE
On the other hand, this
might be readable but
truly not so legible.
sure that it’s very readable
LEGIBILIDAD

11. EMPEZAR CON EL PIE DERECHO.
MÁS COSAS ESENCIALES
SOBRE LA TIPOGRAFÍA

12. SIMPLE, DE VERDAD.
TIPOGRAFÍA – O FONT FAMILY:
Un tipo de letra es una colección de caracteres que comparten las mismas
características de diseño distintas. Un tipo de letra es un conjunto de fuentes.
FUENTE:
Los medios físicos de producción tipográfica: metal, película litográfica o código
de computadora. Cada fuente de un tipo de letra tiene un peso, estilo,
condensación, anchura, inclinación, cursiva, ornamentación y diseño o fundición
específico. (y antiguamente tamaño, en fuentes de metal.) (fuente: Wikipedia).

13. SIMPLE, REALLY.

14. LO SIENTO – HOY NO.
ANATOMIA DE LA TIPO
Y SU CLASIFICACIÓN

15. SERIF O SANS SERIF?
SERIF VS SANS SERIF.

16. SERIF VS SANS SERIF – CON ‘GRACIAS’ O SIN
SERIF
Una tipo serif tiene pequeñas líneas cruzadas en
los extremos de los diferentes trazos, mientras que
una tipo sans serif no los tiene.
SANS SERIF
Una tipo serif tiene pequeñas líneas cruzadas en los
extremos de los diferentes trazos, mientras que una tipo
sans serif no los tiene.

17. COMO SIEMPRE – MUCHO MÁS QUE UNA ELECCIÓN DE ESTILO.
UNA TIPO EXPRESA
ESTILO, EMOCIÓN,
TONO DE VOZ.

18. Big Caslon Medium

19. Brandon Grotesque

20. Comic Sans

21. SIGUE ESTA 10 REGLAS, Y LO HARÁS CORRECTAMENTE.
10 REGLAS BÁSICAS
PARA OPTIMIZAR TU
EXPERIENCIA TIPOGRÁFICA

22. YES, ONLY TWO FONTS.
REGLA #1
LIMÍTATE A
2 FUENTES MÁXIMO

28. EN SERIO – UNA FUENTE ES SUFICIENTE.
REGLA #2
USA PESOS, TAMAÑO
& ESTILO INSTEAD

34. MEJOR A LA IZQUIERDA.
RULE #3
USA UNA BUENA
ALINEACIÓN

37. Right now, you may feel like a fraud. Other coaches are having all of the success, and you have their social media posts
to prove it.
They are the ones on fire. You are in limbo. That's what it feels like anyway.
While that may be true right this second, I know better than to write you off today.
I've trained enough team members and solopreneurs to know one thing for sure:
You are never stuck for no reason.
There is a very specific thing holding you back from having the sales confidence AND results you want. Sure, there are
usually other things you can optimize to grow into your full potential, but those are not mission critical today.
That one specific thing is.
The good news is, it's usually very quick and easy to fix, so you can start selling from a place of alignment in no time at
all.
The bad news is, it can take you months of journaling and pondering to find the faulty part to begin with.
Months that neither your soul, nor your mortgage really have. Months that your perfect clients wouldn't be able to get
help, because you were always the one meant to provide it.

39. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about
typography and skimmed through hundreds of random
online articles. Maybe you even took a class back in
college. But how confident are you that you actually
remember everything you’ve learned over the years?

40. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about
typography and skimmed through hundreds of random
online articles. Maybe you even took a class back in
college. But how confident are you that you actually
remember everything you’ve learned over the years?

41. JERARQUIZAR CREA ORDEN Y AYUDA A TU OJO.
REGLA #4
USA JERARQUÍAS

42. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about
typography and skimmed through hundreds of random
online articles. Maybe you even took a class back in
college. But how confident are you that you actually
remember everything you’ve learned over the years?

43. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about typography and
skimmed through hundreds of random online articles. Maybe you even
took a class back in college. But how confident are you that you actually
remember everything you’ve learned over the years?

46. GESTALT IS ALWAYS YOUR FRIEND WHEN YOU DESIGN ON THE WEB.
REGLA #5
RECUERDA GESTALT :
PROXIMIDAD Y SEMEJANZA

47. PROXIMIDAD EL OJO AGRUPA ELEMENTOS QUE ESTÁN
CERCA UNO DEL OTRO

48. SEMEJANZA EL OJO JUNTA ELEMENTOS QUE
COMPARTEN CARACTERÍSTICAS SIMILARES

49. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project

50. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project

51. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about
typography and skimmed through hundreds of random
online articles. Maybe you even took a class back in
college. But how confident are you that you actually
remember everything you’ve learned over the years?

52. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on every
design project
As a designer, you’ve probably read a book or
two about typography and skimmed through
hundreds of random online articles. Maybe you
even took a class back in college. But how
confident are you that you actually remember
everything you’ve learned over the years?

53. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about typography and
skimmed through hundreds of random online articles. Maybe you even
took a class back in college. But how confident are you that you actually
remember everything you’ve learned over the years?

55. LA CORRECTA LONGITUD DE LÍNEA ES ESENCIAL PARA UNA BUENA
LEGIBILIDAD.
REGLA #6
LA CORRECTA LONGITUD
DE LA LÍNEA

60. ELIJE TIPOGRAFÍAS LEGIBLES PARA TU SITIO WEB
REGLA #7
BUENA LECTURA

62. Flawless Typography Checklist
A typography master course that doubles as an interactive
visual reference that helps you achieve flawless type on
every design project
As a designer, you’ve probably read a book or two about typography and
skimmed through hundreds of random online articles. Maybe you even
took a class back in college. But how confident are you that you actually
remember everything you’ve learned over the years?

63. Flawless Typography Checklist
A typography master course that doubles as an interactive visual
reference that helps you achieve flawless type on every design project
As a designer, you’ve probably read a book or two about typography and skimmed
through hundreds of random online articles. Maybe you even took a class back in
college. But how confident are you that you actually remember everything you’ve learned
over the years?

64. Flawless Typography
Checklist
A typography master course that
doubles as an interactive visual
reference that helps you achieve
flawless type on every design project
As a designer, you’ve probably read a book or two
about typography and skimmed through hundreds
of random online articles. Maybe you even took a
class back in college. But how confident are you
that you actually remember everything you’ve
learned over the years?

65. MULTIESTABILIDAD NUESTRA MENTE PUEDE VER SÓLO UNA
INTERPRETACIÓN A LA VEZ

70. UN BUEN CONTRASTE ES LO MEJOR.
REGLA #8
BUEN CONTRASTE

72. NO LO USES.

73. SERIAMENTE NO

74. ESTO ES LO PEOR

75. USA MAYÚSCULAS CON MODERACIÓN
REGLA #9
CUIDADO CON LAS
MAYÚSCULAS (ERHM…)

79. ¡ESTOY GRITANDO!

80. Estoy susurrando…

81. NO ANIMES, A MENOS DE TENER UNA MUY BUENA RAZÓN
RULE #10
¡SIN ANIMACIONES!

83. GRACIAS
@PICCIA PICCIA NERI PICCIA NERI WP
FACEBOOK.COM/GROUPS/DESIGNFORGEEKS/