Tipografía y composición tipográfica

Índice
- 1.Introducción a la tipografía
- 1.1.Tipografía: un medio gráfico para un mensaje verbal
- 1.2.Evolución histórica de la escritura
- 1.3.El lenguaje tipográfico
- 1.4.Anatomía del tipo
- 1.5.Trazos y terminales
- 1.6.Estructura geométrica del carácter tipográfico
- 1.7.Clasificación de las familias tipográficas
- 1.8.Combinar fuentes tipográficas
- 2.Composición de texto
- 2.1.Composición de carácter y composición de párrafo
- 2.2.Composición de carácter
- 2.2.1.El cuerpo
- 2.2.2.El cuadratín
- 2.2.3.Unidades tipométricas
- 2.2.4.El punto como unidad del tipo digital
- 2.2.5.La medida del tipo en la web
- 2.2.6.Caja alta y caja baja
- 2.2.7.Espaciado del tipo
- 2.2.8.Interletraje o tracking
- 2.2.9.El cran o kerning
- 2.2.10.Interlineado
- 2.3.Composición de párrafo
- 2.3.1.Anchura de columna y longitud de línea
- 2.3.2.Alineación
- 2.3.3.Separación de párrafos
- 2.3.4.La sangría
- 2.4.Color (o gris) tipográfico
- 2.5.Legibilidad
- 2.6.Expresividad
- 3.Tipografía digital
- Bibliografía
1.Introducción a la tipografía
1.1.Tipografía: un medio gráfico para un mensaje verbal

Signo chino para el jarrón triangular li. Originariamente es la representación de un jarrón y se estiliza hasta convertirse en el signo li.
Pictograma semítico buey (álef). Originariamente era la representación de un buey en los jeroglíficos egipcios y pasa a la escritura protosinaítica como signo consonántico. Después se adapta y se estiliza hasta convertirse en el signo consonántico álef, y al pasar del alfabeto fenicio al griego se cambia al signo vocálico A.
Fuente: Rastros del alfabeto: escritura y arte (1998). Barcelona: Fundación «la Caixa».
1.2.Evolución histórica de la escritura
1.3.El lenguaje tipográfico
1.4.Anatomía del tipo


1.5.Trazos y terminales
1.6.Estructura geométrica del carácter tipográfico
![Fuente: Johannes M. Zanker. Visual Perception II: Objecte recognition. [Fecha de consulta: julio de 2009]. <http://www.pc.rhul.ac.uk/staff/j.zanker/>](http://materials.cv.uoc.edu/daisy/Materials/PID_00236882/html5/img/76511_m3_007.gif)

1.7.Clasificación de las familias tipográficas
1.7.1.Clasificación tipográfica Thibaudeau


1.7.2.Clasificación tipográfica Novarese
1.7.3.Clasificación tipográfica Vox-ATypI
Vox(1954)
|
Vox/ATypI (1962)
|
DIN 16518 (1964)
|
BS 2961 (1967)
|
---|---|---|---|
1. Clásicas |
|||
1. Humanísticas |
1.1. Humanísticas |
I. Humanísticas |
I. Humanísticas |
2. Garaldas |
1.2. Garaldas |
II. Garaldas |
II. Garaldas |
3. Reales |
1.3. Reales |
III. Reales |
III. Reales |
2. Modernas |
|||
4. Didonas |
2.1. Didonas |
IV. Didonas |
IV. Didonas |
5. Mecánicas |
2.2. Mecánicas |
V. Mecánicas |
V. Mecánicas |
6. Lineales |
2.3. Lineales |
VI. Lineales |
VI. Lineales |
|
2.3.1. Grotescas |
|
VI.a. Grotescas |
|
2.3.2. Neogrotescas |
|
VI.b. Neogrotescas |
|
2.3.3. Geométricas |
|
VI.c. Geométricas |
|
2.3.4. Humanísticas |
|
VI.d. Humanísticas |
3. Caligráficas |
|||
7. Incisas |
3.1. Incisas |
VII. Incisas |
VII. Incisas |
8. De escritura |
3.2. De escritura |
VIII. De escritura |
VIII. De escritura |
9. Manuales |
3.3. Manuales |
IX. Manuales |
IX. Manuales |
|
3.4. Fracturas |
X. Fracturas |
|
Fuente: Wikipedia. Viquiprojecte Tipografia (UOC, 2010).
Vox(1954)
|
Vox/ATypI (1962)
|
DIN 19518 (1964)
|
BS 2961 (1967)
|
---|---|---|---|
|
|
X.a. Góticas |
|
|
|
X.b. Góticas redondeadas |
|
|
|
X.c. Schwabacher |
|
|
|
X.d. Fracturas |
|
|
|
X.e. Fracturas variantes |
|
|
3.5. Gaélicas |
|
|
|
4. No latinas |
XI. No latinas |
|
Fuente: Wikipedia. Viquiprojecte Tipografia (UOC, 2010).












1.7.4.Bringhurst, una clasificación historicista
1.8.Combinar fuentes tipográficas
«El tipógrafo novel que tenga que proyectar un libro tendría que empezar por explorar en primer lugar las posibilidades que ofrece la unidad tipográfica [el uso de una sola familia tipográfica], y sólo tendría que pasar a combinar tipos distintos cuando su gusto se haya consolidado y depurado. [...] Un libro donde se utilice un solo tipo será en el peor de los casos solamente mediocre; el error en la combinación de familias produce resultados nauseabundos.»
Josep M. Pujol; Joan Solà (1995). Ortotipografia: manual de l'autor, l'autoeditor i el dissenyador gràfic. Barcelona: Columna Edicions.
«Cuando se combinan dos tipografías hay que evitar el peligro de caer en la ambigüedad: tienen que ser familias bien contrastadas.»
Josep M. Pujol; Joan Solà (1995). Ortotipografia: manual de l'autor, l'autoeditor i el dissenyador gràfic. Barcelona: Columna Edicions.

2.Composición de texto
2.1.Composición de carácter y composición de párrafo
2.2.Composición de carácter
2.2.1.El cuerpo





2.2.2.El cuadratín
«En un sistema básico de 18 unidades, una «M» de caja alta (la letra más ancha) tiene 18 unidades, la «o» de caja baja, 10 unidades y la «i» de caja baja, 4 unidades.»
Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume.

2.2.3.Unidades tipométricas
«Durante más de 250 años después de la invención de los tipos móviles que realizara Gutenberg, cada fundición produjo tipos con sus propias especificaciones y tamaños, lo cual significaba que un tipo no era intercambiable entre una fundición y otra. En respuesta a esta situación caótica, el grabador francés Pierre Simon Fournier formuló el sistema de puntos en 1737.»
Perfect (1992)
1 punto Didot continental
|
1 punto anglosajón
|
---|---|
0,376 mm |
0,352 mm |
12 puntos Didot = 1 cícero |
12 puntos de pica = 1 pica |
1 cícero = 4,512 mm |
1 pica = 4,23 mm |
14 puntos Didot = 5,264 mm |
15 puntos de pica = 5,28 mm |
2.2.4.El punto como unidad del tipo digital
2.2.5.La medida del tipo en la web
2.2.6.Caja alta y caja baja


2.2.7.Espaciado del tipo


2.2.8.Interletraje o tracking
2.2.9.El cran o kerning


© UOC. Creative Commons Reconocimiento CompartirIgual 3.0-es. Imágenes de elaboración propia basadas en materiales extraídos de http://ilovetypography.com/

© UOC. Creative Commons Reconocimiento CompartirIgual 3.0-es. Imágenes de elaboración propia basadas en materiales extraídos de http://ilovetypography.com/
2.2.10.Interlineado


2.3.Composición de párrafo
2.3.1.Anchura de columna y longitud de línea
2.3.2.Alineación
2.3.3.Separación de párrafos
2.3.4.La sangría
2.4.Color (o gris) tipográfico
2.5.Legibilidad
«Por legibilidad entendemos la facilidad con la que las palabras pueden leerse cómodamente, a una velocidad normal de lectura.»
Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume.
«La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, el interlineado y otros factores tienen una influencia decisiva en la función del tipo.»
Lewis Blackwell (1998). Tipografía del siglo XX. Remix. Barcelona: Editorial Gustavo Gili.




2.6.Expresividad
b) Todas las familias tipográficas son gráficamente diferentes y evocan sensaciones diferentes. Escoged una tipografía para la palabra. Cambiad de palabra haciendo clic sobre ella.

