Este documento describe los conceptos básicos de tipografía, incluyendo las diferentes familias tipográficas, los elementos que clasifican las fuentes, los factores que afectan la legibilidad de un texto y técnicas tipográficas como la justificación, el interlineado y el espacio entre letras.

2. Arte o técnica de
reproducir la
comunicación mediante
la palabra impresa,
transmitirla con cierta
habilidad, elegancia y
eficacia.

3. La es
reflejo de una época.
estudio y
clasificación de las
distintas fuentes
tipográficas.

4. modelo o diseño de
una letra determinada. estilo o apariencia de
un grupo completo de
caracteres, números y
signos, regidos por
unas características
comunes.

5. conjunto de tipos basado
en una misma fuente, con
algunas variaciones, tales
como el grosor y anchura,
pero manteniendo
características comunes.

7. Existen 5 elementos para
clasificar e identificar a las
diferentes familias
tipográficas:
•La presencia o ausencia
del serif o remate.
•La forma del serif.
•La relación curva o recta
entre bastones y serifs.
•La uniformidad o
variabilidad del grosor del
trazo.
•La dirección del eje de
engrosamiento.
Tipografías con serif:
Los tipos de caracteres,
pueden incluir adornos
en sus extremos o no,
estos adornos en sus
terminaciones, se
denominan serif o serifas.
Tipografías sans serif
o de palo seco: Es la
tipografía que no
contiene estos adornos,
comúnmente llamada
sanserif o (sin serifas).

8. SERIF
•Romanas Antiguas
•Romanas de Transición
•Romanas Modernas
•Egipcias
SANS SERIF
•Grotescas
•Neogóticas
•Geométricas
•Humanísticas

9. Romanas Antiguas Romanas de Transición
Romanas modernas o
didonas
Egipcias
Italiana (variable de Egipcia) Grotesca

10. Geométricas o de Palo Seco Humanística
Inglesas o manuscritas Ornamentadas

11. Tamaño
Forma
Orientación

13. la facilidad o
complejidad de la
lectura de una
letra.
Factores que condicionan la
legibilidad de un texto
pensar en el público al cual
va dirigido el texto y que sea
capaz de leerlo perfectamente,
sin ningún inconveniente.
×Diseño
×Espacio entre letras
×Longitud de línea
×Calidad de impresión
×Ancho de columna
×Color
×Tamaño
×Tipo de letras
×Interlineado

14. •Los tipos de diseño
clásicos latinos, son los
que ofrecen mayor
legibilidad.
•Mejor con serif que de
palo seco.
•Las letras redondas y
minúsculas suelen ser
las más legibles.

15. Letras demasiado juntas
no son legibles.
Letras demasiado
separada pueden distraer
de la idea.
No basta una selección
“plástica” o estética.
Llueve en todo el país
Llueve en todo el país
L l u e v e e n t o d o e l p a í s
Llueveentodoelpaís
Llueveentodoelpaís
NORMAL
SEPARADO
MUY SEPARADO
ESTRECHO
MUY ESTRECHO

16. El tamaño ideal que
anima y favorece la
lectura en el cuerpo del
texto es de 10 a 12 pts.

17. Una línea muy larga,
impresa en un cuerpo de
letra más bien pequeño,
en la que se incluyen
muchas palabras,
entorpece la lectura, por
la dificultad que supone
pasar de una línea a otra.

18. Una columna
delgada, cansa al
usuario, ya que
tiene que cambiar
de línea
constantemente.
Onsecte
conulla
conullaor sim
vent wisl ut
praesequisit
et, sectem
amcommy
nostio cortin
henis et
ametummod
modionsent
iuscincilit
lorpero
dolorem dit
nisl dipsum
ea alisi
blamcore
veliqua
tionsequat. Ut
prat prat, sum
dit lor iliquipit
nosto odolore
commy
nonulput
augueri uscilla
facipsummy
nons dolortisi.
Onsecte conulla
conullaor sim
vent wisl ut
praesequisit et,
sectem
amcommy nostio
cortin henis et
ametummod
modionsent
iuscincilit lorpero
dolorem dit nisl
dipsum ea alisi
blamcore veliqua
tionsequat. Ut
prat prat, sum dit
lor iliquipit nosto
odolore commy
nonulput augueri
uscilla
facipsummy nons
dolortisi.
Onsequipisim
eugait acinim
dolortis nullan
volor sum volorer
cidunt alisi.
Onsecte conulla
conullaor sim vent wisl
ut praesequisit et,
sectem amcommy nostio
cortin henis et
ametummod modionsent
iuscincilit lorpero
dolorem dit nisl dipsum
ea alisi blamcore veliqua
tionsequat. Ut prat prat,
sum dit lor iliquipit nosto
odolore commy nonulput
augueri uscilla
facipsummy nons
dolortisi.
Onsequipisim eugait
acinim dolortis nullan
volor sum volorer cidunt
alisi.
Ut vero conullam et
exeraestie commy nos
nibh exeraes sequip
eugiam vullandit euisim
zzriure dolorem dolenit
adio ero od min heniam,
sim volum doluptat
aliquiscing

19. Una impresión
deficiente con fallos,
remosqueados,
exceso de tinta, pisada
o presión excesiva,
puede perjudicar la
legibilidad.

20. •NEGRO / BLANCO + Legible
•BLANCO / NEGRO – visibilidad
EN COLOR TOMAR EN
CUENTA:
•TONO
•VALOR
•INTENSIDAD
•CONTRASTE
•CARACTERÍSTICAS DE
LA LETRA

22. SI IMPORTA…
si el tipo es demasiado grande, o
pequeña, cansa mucho al lector y
reduce la legibilidad.
Igna faccum velisit alit praese consed
euguero dolese tet, suscincil dip erciduisi.
Ros alit, consenim zzriurer alisl ute mincing
et nit praestie digna autate modolore
eugiamcorper in et in ero odipis niat in
henismod exerosting eugiam ent del iure
vent augiat aliquam do dolorper senim
dolestions num accummod tio
commodigna feum velit adipisim il eugue er
sis esequatumsan eu feugiat, quis nonsenit
nos dolor amet lobor sequisl inciduis
nulpute ming eu feuis am, quating et,
vullan ut ipsummodo
Igna faccum
velisit alit
praese consed
euguero
dolese tet,
suscincil dip
erciduisi.
Igna faccum velisit alit praese
consed euguero dolese tet,
suscincil dip erciduisi.
Ros alit, consenim zzriurer alisl ute
mincing et nit praestie digna autate
modolore eugiamcorper in et in ero
odipis niat in henismod exerosting
eugiam ent del iure vent augiat
aliquam do dolorper senim
dolestions num accummod tio
commodigna feum velit adipisim il
eugue er sis esequatumsan eu
feugiat, quis nonsenit nos dolor
amet lobor sequisl inciduis nulpute
ming eu feuis am, quating et,

23. NEGRITAS
Un texto todo en negrita es muy
denso y también dificulta la lectura.
Un problema que puede surgir
con el espacio entre las palabras,
es que puede desestructurar la
línea y entorpecer la lectura y la
estética cuando las palabras
distan mucho unas de otras. Hay
que encontrar una medida
razonable, que dependerá del tipo
de escrito que estemos
componiendo.
Igna faccum velisit alit praese consed
euguero dolese tet, suscincil dip
erciduisi.
Ros alit, consenim zzriurer alisl ute
mincing et nit praestie digna autate
modolore eugiamcorper in
Igna faccum velisit alit praese consed
euguero dolese tet, suscincil dip erciduisi.
Ros alit, consenim zzriurer alisl ute mincing
et nit praestie digna autate modolore
eugiamcorper in et in ero odipis niat in
henismod exerosting
CURSIVAS
De la misma forma, un texto
escrito todo en cursiva, resulta
pesado leerlo.

24. ESPACIO ENTRE PALABRAS
El espacio entre letras o palabras no
tiene que ser ni muy amplio, ni
demasiado reducido, para que tengan
una buena visibilidad y legibilidad.

25. Espacio vertical entre líneas.
Se usa para dar mayor
legibilidad a las líneas de un
texto, cuando éstas son
largas y están compuestas
en un cuerpo pequeño.
Interlinea Solida; tiene el
mismo valor que el cuerpo.
Times 10pt
interlineado 10pt
Interlinea de Porcentaje; es el
120% del cuerpo.
Times 10pt
interlineado 12pt
Interlineado de suma; se le
suma un punto al interlineado.
Times 10pt
interlineado 11pt
Interlineado negativo; es más
pequeña que el cuerpo
(titulares o efectos visuales).

27. El texto
alineado a la
izquierda es
el
Recomendable
para textos
largos. Crea
una letra y un
espacio entre
palabras muy
equilibrado y
uniforme.
Esta clase de
alineación de
textos es
probablemente
la más
legible.
Alineación a
la derecha se
encuentra en
sentido
contrario del
lector porque
resulta
difícil
encontrar la
nueva línea.
Este método
puede ser
adecuado para
un texto que
no sea muy
extenso
El texto justificado, alineado
a derecha e izquierda. Puede
ser muy legible, si el
diseñador equilibra con
uniformidad el espacio entre
letras y palabras, evitando
molestos huecos denominados
ríos que no rompan el curso del
texto.
Las alineaciones centradas
proporcionan al texto una
apariencia muy formal y son
ideales cuando se usan
mínimamente. Se debe evitar
configurar textos demasiado
largos con esta alineación.

28. MODERNO

29. Una buena justificación
modifica el espacio entre
palabras
Este es el recurso elemental
de la justificación.
Una buena justificación
siempre usa división silábica
(hyphenation)
Simplemente no puedes
justificar bien sin meter uno
que otro guión ortográfico. Esto
es particularmente importante
en el español, ya que es una
lengua un tanto más
aglutinante que el inglés,
especialmente en los verbos.
Igna faccum velisit alit praese consed
euguero dolese tet, suscincil dip
erciduisi.
Ros alit, consenim zzriurer alisl ute
mincing et nit praestie digna autate
modolore eugiamcorper in et in ero
Igna faccum velisit alit praese consed
euguero dolese tet, suscincil dip
erciduisi.
Ros alit, consenim zzriurer alisl ute
mincing et nit praestie digna autate
modolore eugiamcorper in et in ero
Sin embargo hay que observar
que el programa divida las sílabas
correctamente y en el ajuste final,
que no queden las palabras
divididas a medio pá-rrafo.

30. Una buena justificación
compone línea por línea
Cuando modificas el espacio
entre las palabras muchas
veces coinciden los huecos
entre las líneas, creando un
efecto tipográfico poco
deseado llamado río
tipográfico. Es algo así:

31. Se denomina así a la
palabra que queda suelta
en la última línea de un
párrafo o al inicio de una
columna.
Lo normal es ajustar
levemente el interletrado para
que la palabra suba a la línea
anterior o alguna otra palabra
baje a la inferior.

32. Modificar el espacio entre letras.
Los tipógrafos han usado el track
o tracking para alterar la
densidad visual del texto o el
espacio global entre un grupo
seleccionado de caracteres.
Esta alteración afecta a todos los
caracteres, como regla general,
cuanto más grande es el cuerpo
más apretado debe ser el track.
El track ajusta el espacio que
existe entre los caracteres,
abriendo los cuerpos más
pequeños y cerrando los mas
grandes.

33. El Kern o kerning es el
espacio existente entre
dos caracteres
individuales, para cuando
dos de estos caracteres se
encuentran demasiado
juntos o separados.
El kern es proporcional, ya
que es del mismo tamaño
en puntos que el cuerpo
de los caracteres. Si un
texto es de 10 puntos, el
kern mide 10 puntos.

34. ha sido necesario rediseñar
muchas de las fuentes ya
existentes para su correcta
visualización y lectura en
pantalla, haciendo que se
ajusten a la rejilla de píxeles de
la pantalla del monitor.

35. están pensadas para ser
reproducidas en alta
resoluciones
se visualizan mal en las
pantallas, sobre todo en
pequeños tamaños,
no han sido concebidas
para ser reproducidas en
una pantalla de baja
resolución.

36. Este factor ha hecho
necesaria la creación de
fuentes específicas para
ser visualizadas en el
monitor de un
ordenador, diseñadas
para ser fácilmente
legibles en condiciones
de baja resolución. Se
trata de fuentes como
Verdana, Tahoma (sans
serif) y Georgia (serif).
VERDANA
Verdana
TAHOMA
tahoma
GEORGIA
georgia

37. Las fuentes diseñadas
para pantalla presentan
la desventaja de que, al
estar diseñadas para un
tamaño determinado, no
es posible
redimensionarlas de
forma correcta,
apareciendo los trazos
verticales y horizontales
que las componen
distorsionados.
Una solución posible sería
redimensionarlas exactamente con un
múltiplo de su tamaño natural, ya que
coincidiría nuevamente con la rejilla de
píxeles de la pantalla, pero entonces se
ven pixeladas, con efectos de dientes de
sierra.

38. consistente en un
difuminado de los bordes
de los caracteres,
creando unos píxeles
intermedios entre el
color del carácter y el del
fondo, para que el
cambio entre ambos no
sea tan brusco, con lo
que se consigue que se
los márgenes se vean
suaves y no en forma de
dientes de sierra.

39. para cualquier fuente
que intente funcionar en
cuerpos pequeños y en
dispositivos de baja
resolución.

41. Un Mac trabaja por defecto a una
resolución de 72 ppp (pixels por pulgada),
por lo que en él existe una equivalencia
exacta entre punto y píxel, cosa que no
ocurre en un PC con Windows, cuya
resolución de trabajo por defecto es de 96
ppp.
Mac: 12 pt ---------- 12 px
PC: 12 pt ----------- 16 px

42. el tamaño de los contenidos textuales
para la web debe oscilar entre 9 y 15
píxeles (7 y 11 puntos), ya que con
estos valores los caracteres resultan
legibles y sin escalado.
conforme se aumenta la resolución de
pantalla disminuye el tamaño relativo
de las fuentes, es decir, su tamaño de
visualización final.
http://www.typetester.org/
Esta es una herramienta
muy útil. Te permite jugar
con la tipografía y todas las
opciones posibles (tracking,
interlineado, color, etc),
mientras vas
previsualizando cada
cambio. Para completar, te
facilita el código CSS.
Han reunido todas las variantes de las
diferentes tipografías estándares para
web. De esta manera, se puede saber
cómo se verán las fuentes en el navegador
antes de escoger cuál tipografía usar
Web Fonts Test Suite
http://jontangerine.com/silo/typography/web-fonts/

43. PXtoEM.
Conversor de px a em y viceversa.
Web Fonts Test Suite

44. Una buena disposición de textos en una
página web es la siguiente:
Un titular que describa de forma clara el
tema tratado.
Un pequeño resumen de la información
ofrecida.
Una serie de palabras clave destacadas
(en forma de vínculos, utilizando variables
tipográficas o cambios de color).
Segmentación de los contenidos en
unidades más pequeñas, reforzadas con
índices y listas con ítems.
Subtítulos significativos,
útiles.
Una idea por párrafo.
La mitad o menos de palabras
que las que normalmente se
utilizan en textos impresos.

45. Como podemos tener bastantes apartados
y cabeceras, es necesario ir remarcando la
importancia relativa de cada una de ellas
en el conjunto del documento, lo que
podemos lograr mediante su tamaño y
peso, así como con el color de su texto.

47. 1. No abusar de la mayúscula
2. No usar textos pequeños en tipo serif
3. No abusar de la letra cursiva
4. No abusar de los textos en negrita
5. No usar, ni abusar, de los efectos de parpadeo o deslizamiento
6. No usar demasiados tipos de fuentes ni demasiados colores diferentes
7. Cuidar la accesibilidad de la información
8. Usar enlaces visualmente independientes
9. Presentar el texto de una forma lógica
10. Los comienzos de párrafo deben ser fácilmente reconocibles, pudiendo usar para este
fin los indentados, los estilos o la separación de párrafos con un retorno (uno, nunca
dos).
11. Hay que evitar en lo posible el texto subrayado, en especial títulos y subtítulos, ya que
las líneas los separan del texto al que pertenecen. En caso de necesitar destacar
estos elementos, es mejor utilizar itálicas en lugar de subrayados.
12. Es una buena idea dejar un espacio mayor por encima de los títulos y subtítulos que
por debajo, así como evitar ponerlos todos en mayúsculas.
13. Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la
información, separar conceptos, subordinar unos a otros, crear dependencias, etc.
14. Los espacios en blanco hacen los documentos más fáciles de leer y le dan un espacio
más limpio.