optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ice/diseño...
TRANSCRIPT
![Page 1: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/1.jpg)
Optimización de documentos para lectura en dispositivos dedicados
Luciano Sánchez
![Page 2: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/2.jpg)
Indice
• Fuentes
– Tipos de fuentes y sus usos. Hinting y antialiasing. Fuentes embebidas. Fuentes para e-ink.
• Diseño de documentos
– Estructura de una página y posicionamiento
– Kerning, tracking, longitud de líneas, leading, encabezamientos
– Dibujos y ecuaciones
![Page 4: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/4.jpg)
Qué es una fuente
• Familias tipográficas: grupos que comparten propiedades visuales: “Arial”, “Times New Roman”, etc.
• Caras tipográficas: diferentes estilos dentro de una misma familia: “Arial Italic”, “Arial Bold”
• Archivos de fuente: contienen una o más caras, de una o más familias.
![Page 5: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/5.jpg)
Familias tipográficas
• Las serif se clasifican en Romanas Antiguas, Romanas de Transición, Romanas Modernas y Egipcias
• Las sans serif pueden ser Grotescas, Neogóticas, Geométricas y Humanísticas
![Page 6: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/6.jpg)
Romanas antiguas
• Con serif
• Espaciado ancho
• Peso y color intenso
• Garamond, Caslon, Trajan
![Page 7: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/7.jpg)
Romanas Antiguas
![Page 8: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/8.jpg)
Romanas de transición
• Serif más agudo que las antiguas
• Diferencias más marcadas entre trazos finos y gruesos
• Baskerville, Times, Century
![Page 9: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/9.jpg)
Romanas de transición
![Page 10: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/10.jpg)
Romanas modernas
• Serif lineal
• Trazos marcadamente variables
• Cursivas muy inclinadas
• Bauer Bodoni, Didi, Caxton, Ultra Condensed
![Page 11: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/11.jpg)
Romanas modernas
![Page 12: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/12.jpg)
Egipcias
• Serif muy grueso, cuadrado (Lubalin Graph, Robotik) o redondo (Cooper Black)
• Clarendon o Egyptienne son actuales y se emplean en textos de libros y en fotocomposición.
![Page 13: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/13.jpg)
Egipcias
![Page 14: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/14.jpg)
Grotescas
• Grotesque en Europa, Gothic en América
• Derivadas del tipo egipcio
• Futura Haas o Helvética, Univers, Franklin Gothic
![Page 16: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/16.jpg)
Geométricas o de palo seco
• Letras basadas en estructuras geométricas, normalmente monolíneas
• Futura, 1927, Eurostile, Industria
![Page 18: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/18.jpg)
Humanísticas
• Basadas en las proporciones de las romanas
• Gill Sans, Stone Sans, Optima
![Page 19: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/19.jpg)
Humanísticas
![Page 20: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/20.jpg)
Manuscritas, ornamentadas
• Se usan en carteles, títulos, etc.
![Page 21: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/21.jpg)
Fuentes para pantallas
![Page 22: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/22.jpg)
Fuentes para libros electrónicos
• Kindle: PMN Caecilia
• Nook: Helvetica Neue, Amasis, Light Classic
• Sony: Dutch Roman (Dutch 801), Swis701 para el interface
![Page 24: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/24.jpg)
Nook (Amasis)
![Page 25: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/25.jpg)
Sony (Dutch 801)
![Page 27: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/27.jpg)
Cuándo se usa cada fuente
• Los tipos Serif son adecuados para textos extensos (libros)
• Los tipos Sans-Serif se usan en títulos, cabeceras y presentaciones
• No se deben mezclar varios fuentes en una página
• Algunos fuentes han sido diseñados para la pantalla de un ordenador (bitmaps, algunos truetype), cuya densidad es cercana a 100DPI.
• El texto impreso tiene densidad superior a 600DPI.
• La elección correcta de un fuente influye en la legibilidad del texto
![Page 28: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/28.jpg)
Archivos de fuente
• Un archivo de fuente contiene imágenes de los caracteres, llamadas glifos (glyphs).
• También contienen la métrica necesaria para disponer el texto correctamente.
• Pueden contener tablas para soportar disposiciones más complejas, como las ligaduras.
![Page 29: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/29.jpg)
¿Qué es una fuente bitmap?
• Una fuente bitmap es un fichero de fuente que contiene imágenes almacenadas como mapas de bits.
• Cada bitmap se relaciona con un tamaño de fuente, por lo que el fichero suele contener imágenes correspondientes a diferentes tamaños.
![Page 30: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/30.jpg)
¿Qué es una fuente escalable?
• En una fuente escalable, los glifos no se almacenan como bitmaps, sino como formas vectoriales (outlines), descritas mediante segmentos y curvas de Bezier.
• Se dibujan más lentamente, pero pueden ser ampliados y rotados sin distorsión
• No son legibles a baja resolución sin hinting
![Page 31: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/31.jpg)
¿Qué es el hinting?
• “Hinting” es un método de redondeo de la posición para definir qué pixeles se usan para crear el mejor bitmap posible en tamaños pequeños o baja resolución
![Page 32: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/32.jpg)
Hinting
• Si el sistema no puede usar tonos de gris, el redondeo produce efectos poco agradables a la vista
![Page 33: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/33.jpg)
Hinting para mantener color
• Grosor constante de los trazos
![Page 34: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/34.jpg)
Hinting para legibilidad
• A bajas resoluciones es complicado representar un carácter
![Page 35: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/35.jpg)
Hinting para espaciado
• El espaciado entre palabras es sensible a los redondeos
![Page 36: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/36.jpg)
Hinting y peso
• Diferencias entre la negrita y el texto plano
![Page 37: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/37.jpg)
Hinting y alineación
• Altura de los diferentes elementos de la misma familia y entre distintas familias
![Page 38: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/38.jpg)
¿Que es el hinting TrueType?
• En el formato TrueType, el hinting se define mediante pequeños programas que se ejecutan en una máquina virtual de pila, almacenados en el propio archivo de fuente.
• Como consecuencia, el resultado es adecuado tanto a baja como a alta resolución.
• Muy costosos (“Times New Roman” necesitó 12 años-hombre).
![Page 39: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/39.jpg)
¿Qué es el hinting Postscript?
• En el formato Postscript, los hints son más sencillos. Son parámetros de un programa que optimiza el bitmap.
• Normalmente no se consiguen tan buenos resultados como con TrueType, pero el diseño es mucho más sencillo
![Page 40: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/40.jpg)
Auto-hinting
• Algoritmos inteligentes que pueden aplicarse durante el diseño de una fuente o incluso en tiempo de ejecución (p.e. el motor de FreeType 2 determina el hinting al cargar el fichero de fuentes)
![Page 41: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/41.jpg)
Antialias
• Si se dispone de más de dos colores, el hintingse completa con un suavizado de los trazos
![Page 42: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/42.jpg)
Antialias
• El antialias permite leer texto de pocos puntos en una pantalla con poca densidad
![Page 43: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/43.jpg)
Antialias subpixel
• En TFTs se pueden usar por separado los tres elementos de colos constituyentes de cada pixel
![Page 44: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/44.jpg)
Cómo se dibujan las letras en la pantalla de un libro electrónico
• Hay antialias, pero no es subpixel
• Hay menos niveles de gris que en un TFT, luego el hinting es crítico
• Los resultados dependen de que el fuente esté embebido en el documento o se procese por el motor de fuentes del libro
![Page 45: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/45.jpg)
Fuentes embebidas en documentos
• PDF: Se pueden insertar todas las fuentes, pero no lo hace por defecto
• ePub: El formato lo soporta, los lectores no siempre
• Mobipocket y AZW: Sólo el fuente por defecto en el lector
• LRF: Limitado por los fuentes en el lector
• Topaz: Soporta fuentes embebidos
![Page 46: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/46.jpg)
Diseño de documentos
![Page 47: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/47.jpg)
Tamaño de fuente
• Sistema Didot: La unidad es el cícero y la unidad menor es el punto. 1 punto = 0.375 mm
• Sistema Angloamericano: La unidad es la pica. Un punto de pica = 0.353 mm
• Una letra de 12 puntos en Pica es de 11 puntos en Didot
![Page 48: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/48.jpg)
El área de escritura
• Componer documentos extensos requiere que el área de escritura se adecúe al contenido y al medio
• Hay diferentes escuelas que estudian cómo distribuir en el papel el texto, las figuras y los restantes elementos del libro
![Page 49: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/49.jpg)
Tamaños de página
• En la norma DIN la proporción entre ancho y alto es 1:1.414
• El formato de un libro que se mantiene en la mano al leerse es diferente del de un libro que se apoya en una mesa: los primeros son más altos que anchos 2:3 ó 1:1732.
![Page 50: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/50.jpg)
Tamaños de página DIN
![Page 51: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/51.jpg)
Ancho frente a alto
![Page 52: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/52.jpg)
Legibilidad
• La línea debería tener 70 caracteres incluyendo espacios
• Cuanto menos decorativos sean los fuentes, más legibles serán
• Times Roman es más estrecho que Times newspaper. Los fuentes menores de 8 puntos no se leen fácilmente
![Page 53: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/53.jpg)
Posicionamiento
• Posicionamiento canónico
![Page 54: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/54.jpg)
Posicionamiento
• Posicionamientos de Tschichold y van de Graaf
![Page 55: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/55.jpg)
Corrección para encuadernado
• En textos impresos, el posicionamiento se corrige para corregir el encuadernado
• En libros electrónicos, para aprovechar el área, es frecuente eliminar los márgenes externos
![Page 56: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/56.jpg)
Resumen de las reglas
• Si el área de escritura debe ser tan alta como el ancho de la página, papel 3:4 y texto 2:3
• El método de Graaf sirve para cualquier proporción
• La longitud de una línea no debería superar los 70 caracteres
• El ancho se ajusta de acuerdo con el tamaño del fuente
![Page 57: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/57.jpg)
Kerning
• Es el espaciado entre las letras. Hay espacios poco visuales entre W, Y, V, T, L
• Se ajusta cuando el tamaño del fuente es grande
![Page 58: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/58.jpg)
Tracking
• En algunos fuentes se ajusta globalmente el espacio aunque el tamaño sea pequeño
![Page 59: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/59.jpg)
Longitud de las líneas
• Es el parámetro más importante
• 7 a 12 palabras por línea (o 70 caracteres)
![Page 60: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/60.jpg)
Longitud de línea
![Page 61: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/61.jpg)
Leading
• Espacio entre líneas de un párrafo
• Generalmente al 120% (texto número 3 en la figura)
![Page 62: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/62.jpg)
Encabezamientos
1. Distancia
2. Tamaño
3. Línea abierta
4. Sin espacio
5. Mayúsculas y negrita
6. Color
7. Subrayado al inicio
8. Subrayado intermedio
![Page 63: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/63.jpg)
Dibujos e ilustraciones
![Page 64: Optimización de documentos para lectura en dispositivos ...di002.edv.uniovi.es/~luciano/ICE/Diseño básico.pdf · •Algunos fuentes han sido diseñados para la pantalla de un ordenador](https://reader030.vdocuments.net/reader030/viewer/2022041108/5f0c8c337e708231d435f386/html5/thumbnails/64.jpg)
Ecuaciones
• Hay un conjunto bastante extenso de reglas de tipografía para los documentos de ciencias y de matemáticas
• Algunos sistemas de composición (TeX, LaTeX) cumplen automáticamente esas normas