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/

PXtoEM.

Conversor de px a em y viceversa.

Web Fonts Test Suite

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