Presentación sobre las generalidades del diseño tipografico y algunas recomendaciones de como usar tipografías para una aplicación para pantalla.

1. bcbbTipo
abb
gráfico
ad
,S
1/18@xacarana

2. Age da
¿Quées?
Clasificación
Propiedades edición
Funciona en la web
Dingbats & ASCII
Buscar con muestra
Experimental
¿Cómoescoger?
Reglas&Diagramación
Encontrarfuente
Enuso
Conclusiones
2/18@xacarana

3. ¿
¿
Qué
es
Tarea u oficio e industria que se
ocupa de la elección y el uso de
tipos, para desarrollar una labor de
impresión, hace referencia a: Letras,
números y símbolos pertenecientes a
un contenido impreso.
3/18@xacarana

4. Con serif
Con remate
Sin serif
Palo seco
Manuscrita
Script
Decorativa
Gráfica
Cla
sifi
ción
ca
4/18@xacarana

5. 1 2 3
4 5
¿Cómo escoger
una tipografía?
5/18@xacarana

6. HeavyHeavy
UltraLightItalic
RegulaRegular
Bold
Black
Light
Thin Italic
Aileronfamily
Se recomienda escoger una fuente con una familia con difer-
entes estilos, esto hace que el diseño sea versátil e interesante.
6/18@xacarana

7. Transformar la
fuente no es lo
único que se debe
tener en cuenta para
que el texto funcione.
El criterio del OjO del
maquetador es clave para
validar atributos de calidad
como el render del texto.
• Usar valores de tamaño de
fuente par
• En lo posible usar fuentes
palo seco
• Realizar pruebas con html
y css, no confiarse del ren-
der de programas de diseño
Este efecto busca eliminar, o al menos difuminar, lo
máximo posible los «dientes de sierra» que suelen
aparecer en las texturas cuando los diferentes pixeles
de las imágenes son demasiado grandes o no terminan
de procesarse correctamente.
aliasingAntialiaalia
TheAilsOfTypographicAnti-Aliasing/TomGiannattasio
7/18@xacarana

8. Optimizar el tiempo de carga
de los archivos que definen la
fuente es clave para una cor-
recta visualización desde el
momento cero de interacción.
Se recomienda usar una
tipografía base por defecto
que tenga una alta probabili-
dad de encontrarse de manera
nativa, para texto corrido.
Revisar el formato de conversión,
cada vez se requieren menos archi-
vos extra. Los navegadores modernos
tienen suficiente con .woff
WOFF-WebOpenFontFormat/caiuse.commBrowsersAndFontFormatSupport/SaraElson
WebOpenFontFormat
8/18@xacarana

9. Aceptar
la realidad
Asuma
lo peor
Pruebe
Ya es el
Futuro
Fuentes
para
pantalla
Cuidado
con
fuentes
grandes
9/18@xacarana

10. Buenas
Prácticas
Espacio interfigural Evitar las viudas
Alineación a la dere-
cha, para poco textoEspacio
interfigural
Víuda
Se refiere a crear descansos
visuales que permitan al
ojo identificar los diferentes
elementos de presentes en
una interfaz gráfica.
Se debe tratar siempre que
el bloque de texto tenga
un mínimo de palabras por
reglón entre 45 a 75, sin
embargo en algunas oca-
ciones el texto parace ind-
omable
Solo alienar a la derecha si
es poco texto.
Título
Dirección de lectura
Alineación izquierda
para evitar rios
Partición de palabras
Al partir una palabra en
varios reglones, se debe
agrupar por sílabas.
La lectura se realiza de
izquierda a derecha y de
abajo hacia arriba, este es
el comportamiento natural
de lectura, se debe respetar
este orden, o recorrido Z.
Los rios son espacios
que se generan entre las
palabras, se da cuan-
do se justifica el tex-
to. Una forma de evi-
tar los rios es alinear
el texto a la izquierda.
10/18@xacarana

11. Resumen
Seleccione la
fuente adecuada
La diagramación
facilita la comp-
rensión del texto.
Hay infinidad de
reglas editoriales
que siguen sien-
do válidas para el
formato digital.
Busque fuentes que tengan
una familia con diferentes
estilos, mínimo 6 estilos. No
todas las fuentes gratuitas
aplican para un sitio o app.
11/18@xacarana

12. • Maquetación tablas
• Bordes redondeados
usando imágenes
• Tipografías como
imágenes
• CSS Hacks
• CSS 1
• Spritesheets
• X-html
• Nuevos navegadores
• Flash
• CSS 2.1
• CSS3
• Media queries
• Web fonts
• HTML5
• Sass - Compass
• Accesibilidad
(ligaduras)
• Íconos como fuentes
• SVG
12/18@xacarana

13. EnconTrar
Tipografías
font
squirrel
.com
13/18@xacarana

14. Buscarcon muestra
What
font
is.com
14/18@xacarana

15. En
Uso
font
in
use
.com
15/18@xacarana

16. ExperiEExx
men
ta
m
L
mem
EperiEExx
men
pp
t
pm
ppmm
pppp
@ash-
worth-
chris
@phoe-
becor-
nog
@schul-
tzschul-
tzgrafik
@roxy-
prima
@ben-
john-
ston-
design
@david-
carson
16/18@xacarana

17. clusiones
*TIPS
Revisar que la fuente este
completa con todos los
carácteres del español
Cuidado con las fuentes
con licencia
Realizar pruebas impresas
o directamente en el medio
digital de publicación
Usar una rejilla y líneas
guías para diagramar
Es un reto pensar solo en
tipografía, o llevar a un
cliente a experimentar
desde este punto clave
de la comunicación
Usar o crear una fuente
para representar los íconos
de la aplicación
Usar una tipografía con una
familia de estilos mayor a 6
1
2
3
4
5
6
7
17/18@xacarana

18. raG¡
cias!xacarana.com
@xacarana
github.com/xaca
f<3nts
f<3nts
18/18@xacarana