tipografÍa
DESCRIPTION
TipografíaTRANSCRIPT
IPOGR FÍA
Arte o técnica de reproducir la comunicación mediante la palabra impresa, transmitirla con cierta habilidad, elegancia y eficacia.
La tipografía es reflejo de una época.
estudio y clasificación de las distintas fuentes tipográficas.
T I P O 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.
F U E N T E TIPOGRÁFICA
conjunto de tipos basado en una misma fuente, con algunas variaciones, tales como el grosor y anchura, pero manteniendo características comunes.
F A M I L I A TIPOGRÁFICA
P A R T E S DE UN TIPO
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).
FAMILIAS
SERIF• Romanas Antiguas • Romanas de Transición • Romanas Modernas • Egipcias
SANS SERIF• Grotescas• Neogóticas • Geométricas• Humanísticas
FAMILIAS
Romanas Antiguas Romanas de Transición
Romanas modernas o didonas
Egipcias
Italiana (variable de Egipcia) Grotesca
Geométricas o de Palo Seco Humanística
Inglesas o manuscritas Ornamentadas
VA R I A B L E S V IS U A L E S
Tamaño
Forma
Ori
enta
ció
n
la facilidad o complejidad de la lectura de una letra. Factores que condicionan la legibilidad de un textopensar en el público al cual va dirigido el texto y que sea capaz de leerlo perfectamente, sin ningún inconveniente.
CONSIDERACIONES×Diseño×Espacio entre letras×Longitud de línea×Calidad de impresión×Ancho de columna×Color ×Tamaño×Tipo de letras×Interlineado
LEGIBILIDAD
• 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.
D I S E Ñ O
Letras demasiado juntas no son legibles.
Letras demasiado separada pueden distraer de la idea.
No basta una selección “plástica” o estética.
ESPACIO ENTRE LETRAS
Llueve en todo el país
Llueve en todo e l pa ís
L l u e v e e n t o d o e l p a í s
Llueve en todo el país
Llueve en todo el país
NORMAL
SEPARADO
MUY SEPARADO
ESTRECHO
MUY ESTRECHO
El tamaño ideal que anima y favorece la lectura en el cuerpo del texto es de 10 a 12 pts.
T A M A Ñ O DE LETRAS
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.
LONGITUD DE LÍNEA
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
ANCHO DE COLUMNA
Una impresión deficiente con fallos, remosqueados, exceso de tinta, pisada o presión excesiva, puede perjudicar la legibilidad.
CALIDAD DE IMPRESIÓN
• NEGRO / BLANCO + Legible
• BLANCO / NEGRO – visibilidad
EN COLOR TOMAR EN CUENTA:• TONO• VALOR• INTENSIDAD• CONTRASTE• CARACTERÍSTICAS DE
LA LETRA
C O L O R
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,
T A M A Ñ O
NEGRITASUn 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
CURSIVASDe la misma forma, un texto escrito todo en cursiva, resulta pesado leerlo.
BOLD Y VERSALES
ESPACIO ENTRE PALABRASEl espacio entre letras o palabras no tiene que ser ni muy amplio, ni demasiado reducido, para que tengan una buena visibilidad y legibilidad.
ESPACIO ENTRE PALABRAS
INTERLINEADO
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 10ptinterlineado 10pt
Interlinea de Porcentaje; es el 120% del cuerpo.Times 10ptinterlineado 12pt
Interlineado de suma; se le suma un punto al interlineado.Times 10ptinterlineado 11pt
Interlineado negativo; es más pequeña que el cuerpo (titulares o efectos visuales).
ALINEACIÓN
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.
TIPOS DE PÁRRAFO
MODERNO
JUSTIFICACIÓNUna buena justificación modifica el espacio entre palabrasEste 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.
RÍOS
Una buena justificación compone línea por líneaCuando 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í:
VIUDAS Y HUÉRFANOS
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.
TRACKModificar 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.
KERNEl 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.
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.
TIPOGRAFÍA D I G I T A L
Fuentes Para Impresión
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.
Fuentes Para Pantalla
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).
VERDANAVerdana
TAHOMAtahoma
GEORGIAgeorgia
PIXELIZACIÓN
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.
ANTIALIASING
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.
HINTING
para cualquier fuente que intente funcionar en cuerpos pequeños y en dispositivos de baja resolución.
FUENTES
TAMAÑO
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
TAMAÑOel 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/
DISPOSICIÓN DEL TEXTO
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.
NIVEL DE CABECERAS
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.
COLOR
1. No abusar de la mayúscula2. No usar textos pequeños en tipo serif3. No abusar de la letra cursiva4. No abusar de los textos en negrita5. No usar, ni abusar, de los efectos de parpadeo o deslizamiento6. No usar demasiados tipos de fuentes ni demasiados colores diferentes7. Cuidar la accesibilidad de la información8. Usar enlaces visualmente independientes9. Presentar el texto de una forma lógica10. 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.
RECOMENDACIONES