Tipografía Composición y tipografía digital · PDF fileTipografía...

46
Tipografía Composición y tipografía digital

Transcript of Tipografía Composición y tipografía digital · PDF fileTipografía...

Page 1: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Page 2: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Durante las últimas décadas del siglo XIX una serie de avances técnicos iban a revolucionar la industria de las artes gráficas:

En 1884 apareció el grabador pantográfico. En 1886 la linotipia. En 1893 la monotipia.

Asimismo se extendió el uso de la máquina de escribir en las oficinas lo que generalizó la obtención mecánica de textos entre el gran público.

Page 3: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Máquina de escribir

El teclado de Christopher Soles

El teclado de máquina de escribir [qwertyuiop en el español] fue inventado en 1874 por Christopher Sholes para provocar el mayor movimiento de dedos y frenar la velocidad. De esta forma se evitaban los atascos de las máquinas de escribir cuyo mecanismo no era capaz de responder a impulsos demasiado rápidos.

Page 4: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en frío

Con la aparición de los periódicos de tirada masiva a finales del siglo XIX se hizo necesario inventar un sistema de composición de textos más rápido y eficaz que la antigua composición manual.

Composición manual con tipos en frío. Único sistema de composición desde mediados del siglo XV a finales del siglo XIX.

Page 5: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Linotipia

a. Lynotipe de Ottmar Mergenthaler, en 1886.

En este dispositivo un teclado disponía del almacén de matrices para componer una línea completa en plomo. El único problema estaba en la dificultad de las correcciones y en que precisaba un mayor número de matrices. La linotipia ordenaba las matrices de cada tipo así como cuñas para el espaciado que eran empujadas por una palanca para facilitar la justificación. A continuación esta moldura se llenaba de plomo fundido, formando una línea que se colocaba junto a las anteriores, mientras las matrices eran devueltas automáticamente a su posición original.

Page 6: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Linotipia

Page 7: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Linotipia

Page 8: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Page 9: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Monotipia

b. Monotype de Tolbert Larston.

La monotipia componía tipos sueltos y operaba mediante un sistema de cintas perforadas.

Las pulsaciones de teclado producían perforaciones en una bobina de cinta que era después llevada al vaciador. Las instrucciones para el espaciado estaban señaladas en la cinta y se obtenía algo muy parecido a la antigua composición de cajista.

Frente a la linotipia era adecuada para corregir los inevitables errores y tuvo mucho éxito en Europa. Los impresores de libros veían un procedimiento más parecido a la composición tradicional.

Page 10: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Monotipia

Page 11: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Composición en caliente

Monotipia

Page 12: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Pantógrafo tipográfico

Linn Boyd Benton

En Milwakee, Linn Boyd Benton desarrolló un dispositivo pantográfico hacia 1884 que facilitaba la creación de letras de madera y que sería adaptado por Mergenthaler.

El pantógrafo permitió que una serie de diseñadores, con escasa formación técnica para la creación de punzones, pudieran fundir letras. Ya había sucedido en el siglo XVIII que algunos editores como Bodoni o Baskerville crearan tipos sin hacer ellos los punzones pero ahora esto iba a ser aún más sencillo.

Lo más negativo es que el diseño mediante pantógrafo descuidó los ajustes que antes se hacían para cada uno de los cuerpos, especialmente los más pequeños que eran engrosados para mantener su legibilidad. A partir de entonces con un único dibujo se tallaban los diferentes cuerpos o, a lo sumo, se utilizaban unos pocos para cada tramo de cuerpos.

Page 13: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Pantógrafo tipográfico

Linn Boyd Benton

Page 14: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Pantógrafo tipográfico

Linn Boyd Benton

Page 15: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

American Type Founders

American Type Founders. Los nuevos procedimientos de composición provocaron cambios drásticos en el negocio de la tipografía que llevaron a la unión de muchas fundiciones en la American Type Founders bajo la dirección de Robert Nelson.

En 1886 un comité de la ATF adoptó el sistema de puntos de Fournier de 1764 en lugar de la informal nomenclatura empleada hasta entonces para cada cuerpo.

La unidad definida no era la misma y no guardaba relación que ningún sistema de medida conocido. En el sistema 996 unidades equivalían a treinta y cinco centímetros, doce unidades formaban una pica, más o menos un sexto de pulgada y un poco más pequeño que el cícero.

Robert Nelson impulsó la idea de familias tipográficas en las que convivieran en un mismo diseño, negritas, cursiva, estrecha y otras muchas variante.

Page 16: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Page 17: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

American Type Founders

Frederic William Goudy es considerado uno de los tipógrafos estadounidenses más prolíficos: diseñó alrededor de 124 tipografías.

Entre sus creaciones se encuentran las conocidas tipografías Copperplate Gothic y Goudy Old Style.

Page 18: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Fotocomposición Intertype

Page 19: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Fotocomposición Willy Fleckhaus

Page 20: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Las escrituras utilizadas en los ordenadores personales son tipografías vectoriales o de contorno.

Cada segmento o vector queda codificado por las coordenadas de dos puntos y la tensión de la curva por otros dos que funcionan como controladores de la misma.

Dibujo original Bitmap RLE [Run Length Encoding]

Diferentes dibujos para cada cuerpo. Archivos para alta resolución, filmados a 2.400 puntos por pulgada.

Page 21: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Tipografía digital

Bitmap

Programas de dibujo de mapas de píxeles o bitmap. Dr Halo

Page 22: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Lo-Res

Oakland Emperor Emigre Universal

“Comencé con tipos de mapa de bits condicionada por la resolución de la pantalla y la impresora de matriz de puntos. Como los primeros ordenadores eran tan limitados, tenía que diseñar algo especial. Aunque era muy difícil adaptar la caligrafía al plomo y más tarde a la fotocomposición, se pudo hacer; pero era físicamente imposible adaptar un cuerpo 8 de la Goudy Old Style a los 72 puntos por pulgada [de la pantalla]. En definitiva, no se podía ni con la Goudy Old Style ni con las Times Roman ni con ningún otro tipo con remate”,

Zuzana Licko

Zuzana Licko

Page 23: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Lo-Res

Oakland Emperor Emigre Universal

Senator

“Aplicando los mismos principios que con Modula, diseñé Senator, basada en las proporciones de Emigre Fifteen”.

Zuzana Licko

Page 24: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Hacia 1979 Peter Karow desarrolló el software Ikarus que permitía definir las letras mediante curvas distintas a las curvas de Bézier.

Tipografía vectorial

En esta tecnología la letra queda definida por el conjunto de ecuaciones de la polilínea de contorno del carácter. Se consigue un perfecto escalado mediante una simple transformación matemática por lo que no es necesario instalar todos los tamaños de un tipo de letra que se desee utilizar, en realidad no existe más que un dibujo que se adapta a distintos tamaños.

Page 25: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Fuentes Adobe PostScript

Fuentes PostScript

Es un sistema vectorial de definición de caracteres basado en curvas de Bézier que son definidas por cuatro puntos: la curva pasa por el primero y el último, puntos de anclaje, y es atraída por los otros dos que se conocen como controladores o puntos de control.

Page 26: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Fuentes Adobe PostScript

Fontographer Windows 3.1

Page 27: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Adobe Type Originals

Lithos Trajan Garamond

Adobe Garamond Redonda Adobe Garamond Negrita Adobe Garamond Cursiva

Page 28: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Carol Towmbly

Adobe Myriad Adobe Minion

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z a b c d e f g h i j k l m n ñ o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ! · $ % & / ( ) = ? ¿ ] [ { } , ; . : - _ ç [ ]

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n ñ o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ! · $ % & / ( ) = ? ¿ ] [ { } , ; . : - _ ç [ ]

Page 29: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Fuentes True Type

La tecnología True Type fue desarrollada por Apple y Microsoft con el objetivo de frenar el predominio de la tecnología PostScript de Adobe.

Se trataba de fuentes vectoriales, no PostScript, que empleaban funciones cuadráticas, más rápidas en su procesamiento que las PostScripts aunque ocupan más cantidad de memoria y que contenían hints para la mejora de la visualización a bajas resoluciones.

Las letras en el formato True Type se describen mediante curvas definidas por funciones cuadráticas.

Para mantener una nivel de calidad adecuado, incluso en las resoluciones más bajas, los contornos se ajustan a la retícula de salida antes de la rasterización. Esta información es parte de la fuente misma. Posee un conjunto extenso y flexible de instrucciones para este ajuste que dejaba sitio a los desarrolladores y fabricantes de fuentes si querían incorporar su propia tecnología de escalado.

Page 30: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

True Type Outline

Curvas

La tabla True Type incluye tres elementos:

Glifos simples que incluyen la curva, el espaciado y los hints.

Glifos compuestos que heredan el espaciado y los hints de los signos simples que lo forman.

Glifos “sin contorno” para los caracteres de función.

Page 31: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

True Type Outline

Rasterización Hints

Page 32: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

True Type Outline

Hints para cada tipografía.

Monotype Arial ITC Garamond

Page 33: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Curvas de un mismo glifo en FontLab

Bézier para PS Spline para TT

True Type genera más código que facilita la conformación de la letra, pero ocupa más espacio en memoria.

Page 34: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Windows XP

Arial Courier New Lucida Console Times N Roman Symbol Wingdings

El formato Open Type Adobe y Microsoft

El formato nació como un archivo multiplataforma desarrollado por Adobe y Microsoft a principios de este siglo.

Su principal ventaja es la capacidad para soportar juegos de caracteres muy amplios.

Apareció por primera vez en el sistema operativo Windows XP que incluía Arial, Courier New, Lucida Console, Times New Roman, Symbol y Wingdings como fuentes Open Type del sistema.

La principal novedad para el usuario era la incorporación del suavizado automático en pantalla que proporcionaba un aspecto menos pixelado de las letras sin necesidad de aumentar la resolución.

Page 35: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Ligaduras, ajuste de cifras, reordenación de caracteres.

El formato Open Type Adobe y Microsoft

Minion OT Berkeley OT Berkeley TT

fin & ft fin & ft

fin & ft

Opciones de Open Type en Adobe Illustrator

Page 36: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Open Type Adobe Microsoft Moet

M t Mœt

Mœt

Peter Levin

Shaffer

ff ff

Page 37: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Una fuente digital es software formado por un conjunto de dibujos vectoriales junto con órdenes de espaciado y kerning a los que se accede mediante el teclado del ordenador.

Una fuente es también un contenedor de glifos. Habitualmente un glifo se corresponde con un carácter, con una letra, pero no siempre es así.

Free Wifi Free Wifi

Page 38: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Línea de base, baseline, es una línea imaginaria en la que se apoyan las formas cuya parte inferior no es curva.

El ancho puede entenderse como el vector que conecta el origen de un glifo con el del siguiente. Este vector se denomina “vector avanzado”.

Glifo es la forma visual de los símbolos tipográficos, colocados en rectángulos abstractos cuyo ancho es el de la letra y sin una altura determinada.

Cada glifo flota en una caja imaginaria que es a veces un poco más grande que su forma, pero en otros casos [la f del ejemplo] es algo más pequeña.

Page 39: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Open Type utiliza el sistema de codificación Unicode y es capaz de permitir 65.000 caracteres en una única fuente con lo que puede adaptarse a cualquier idioma e incorporar variantes como versalitas y conjuntos de caracteres adicionales.

Adobe identifica con el apelativo “Pro” la inclusión de versalitas, adornos, caracteres alternativos, ligaduras, números ordinales, ornamentos, fracciones y letras griegas y cirílicas.

Su estructura está derivada de TrueType al que añade tablas de datos que permiten incorporar a una tipografía funciones tipográficas y lingüísticas avanzadas. La especificación siguió en desarrollo para convertirse en un estándar abierto.

Como siempre el problema de un formato está en su aceptación. Ya en 2001 existía un amplio catálogo de tipos OpenType y Adobe concluiría la adaptación de sus fuentes a finales de 2002.

Hacia 2006 las principales fabricantes se habían incorporado a OpenType.

Page 40: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Mapa de caracteres Windows XP

Open Type

Page 41: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

OpenType emplea la misma estructura de datos genérica (llamada “sfnt”) en la que se basan las tipografías TrueType, pero a ella agrega recursos que enriquecen la gama de prestaciones tipográficas de la familia tipográfica, así como sus capacidades de representación lingüística, por lo que se afirma que las OpenType pertenecen a la clase de los denominados “tipos de letra inteligentes” (smartfonts).

La descripción de los contornos de los signos (o “glifos”) de un tipo OpenType puede almacenarse en una de dos posibles formas:

1. Como curvas de formato TrueType en la tabla denominada ‘glyf’ 2. Como curvas de formato CFF (Compact Font Format) en la tabla ‘CFF ’.

El formato CFF, también conocido como Tipo 2 de Adobe, es una forma compacta de representar un tipo de letra de clase “Tipo 1”.

Page 42: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Considering these advantages and with all other things being equal, some may ask: why isn’t the OT/CFF format as popular, as widespread and as well-supported as TrueType, even in environments that would benefit from them? I can point out several reasons. For one, the TrueType format has been around for much longer than OpenType; it debuted in the late 1980s while the first OT/CFF fonts were released roughly ten years later. The second reason is perhaps related to legacy display modes: on an aliased environment, TrueType is able to deliver a superior solution, due to to its hints and ability to leverage handmade bitmaps, that OpenType/CFF would have a hard time matching. And lastly, historical

Late 1980s while the first OT/CFF fonts were released roughly ten years later. The second reason is perhaps related to legacy display modes: on an aliased environment, TrueType is able to deliver a superior solution, due to to its hints and ability to leverage handmade bitmaps, that OpenType/CFF would have a hard time matching. And

Fuentes en la web

Las fuentes tipográficas han sido un problema en la web porque no están incluidas en el documento HTML por la sencilla razón de que el autor de la página no posee los derechos sobre la tipografía. La forma en que se ha intentado resolver este problema es diversa.

Fuentes seguras + Bitmap

Page 43: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Win 9x/ Win XP Win Vista Mac Classic Mac Os X Linux Unix

Cambria Segura

Constantia Segura

Times N Roman Segura Segura P Segura P

Times Segura Segura Segura

Georgia Segura Segura P Segura P

Andale Mono Segura Segura P Segura P

Arial Segura Segura P Segura P

Arial Black Segura Segura P Segura P

Calibri Segura

Candara Segura

Century Gothic Segura Segura P Segura P

Corbel Segura

Helvetica Segura Segura Segura

Impact Segura Segura P Segura P

Trebuchet MS Segura Segura P Segura P

Verdana Segura Segura P Segura P

Comic Sans MS Segura Segura P Segura P

Consolas Segura

Courier New Segura Segura P Segura P

Courier Segura Segura Segura

Fuentes seguras en los principales sistemas operativos hasta 2011

Page 44: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Google Fonts

Page 45: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Tipografía Composición y tipografía digital

Google Fonts

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <html> <head>

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/ css?family=Mouse Memoirs”>

<style> body {

font-family: ‘Mouse Memoirs’, serif; font-size: 36px; text-shadow: 4px 4px 4px #aaa;

} </style>

<title>Prueba con Google Fonts</title></head>

<body>

<div> <p>P&iacute;o Baroja<br />

Page 46: Tipografía Composición y tipografía digital · PDF fileTipografía Composición y tipografía digital Composición en frío Con la aparición de los periódicos de tirada masiva

Efectos en Google Fonts y exploradores que los visualizan

Tipografía Composición y tipografía digital