Sistemas tipográficos

la tipografía es un arte de encontrar y moldear relaciones entre elementos, de mayor a menor y

de menor a mayor. Ahora que comprende los aspectos técnicos y estéticos de la evaluación de
tipos de letra, vamos a alejarnos un poco más y hablar sobre cómo los bloques de construcción
más pequeños de la tipografía se unen como un sistema de comunicación. En los siguientes
dos capítulos, exploraremos cómo los elementos de contenido dentro de un diseño se afectan
unos a otros y cómo la naturaleza del medio en sí da forma a nuestros diseños.

Como cualquier buen sistema, la tipografía proporciona un método para realizar una tarea. Un
sistema tipográfico establece una jerarquía, lo que significa que nos ayuda a priorizar el
contenido en función de los elementos individuales y las relaciones entre ellos. También ayuda
a nuestros lectores a escanear fácilmente fragmentos de información y entender lo que están
viendo. Cuando se hace correctamente, un sistema tipográfico se siente intuitivo, como un
conjunto de instrucciones tácitas. Sin ninguna lógica interna en su lugar, nuestro contenido
puede parecer un bloque monolítico, esencialmente atrapando a los lectores en una habitación
oscura sin tanto como una coincidencia.

Afortunadamente, tenemos algunas herramientas poderosas a nuestra disposición para ayudar

a que nuestra tipografía forme una base sólida. Y algunas de nuestras herramientas más
potentes también son nuestras más básicas: tamaño, espacio, color y proximidad. Juntos, nos
brindan un número infinito de posibilidades para elaborar nuestros mensajes de manera
efectiva y legible.

JERARQUÍA Y CONTRASTE

En la superficie, la jerarquía puede parecer una simple traducción visual en la que los
elementos más importantes son los más grandes y los más pequeños son los más pequeños,
pero es mucho más matizado que eso.

El tamaño es una forma de lograr la jerarquía, pero también puede hacerlo con color o
ubicación; El verdadero levantamiento de pesas ocurre cuando combinas dos o más de estas
propiedades. Las cosas más importantes no siempre tienen que ser las más grandes; solo
necesitan ser más distinguidos que otros elementos. En otras palabras, necesitan más
contraste.

El contraste es, en mi humilde opinión, el principio más crucial del diseño gráfico. Al instante
forja conexiones y distinciones entre elementos y, cuando se usa en concierto con otras
herramientas como una cuadrícula, ayuda a nuestros espectadores a discernir qué es vital, qué
está relacionado y qué no. Esa información les brinda a los lectores la capacidad de navegar
nuestros diseños de manera eficiente. Sin contraste, todo en una página puede parecer similar
en tamaño e importancia, dejando al espectador la opción de leer y decodificar cada bit de
información o rebotar para mirar los adorables GIFs de gatos.

Un nuevo pedido

La jerarquía aplica un enfoque sistemático para agrupar elementos similares y distinguir los
diferentes. Expresamos la jerarquía tanto semánticamente (en el marcado HTML subyacente)
como visualmente (en nuestro diseño). Por ejemplo, si observa los estilos de navegador
predeterminados para cosas como h1 o párrafo, verá una jerarquía integrada: h1s son más
grandes que h2s y h3s, y son diferentes del estilo de un párrafo.

La mejor manera de crear un sistema tipográfico jerárquico es auditar primero los elementos
básicos de su sitio web. Puedes romper Abajo estos elementos en una variedad de formas. A
veces se basa en lo que son semánticamente los elementos, como en los titulares como h1 y
h2, etc. otras veces se basa en lo que deben hacer esos elementos, como en el caso de tipos
muy pequeños como títulos o texto especializado como citas en bloque. Comprender las
distinciones sutiles lo ayuda a hacer que su tipo sea más legible y eficiente, y asegura que su
tipo se adapte al propósito de un elemento.

Una nota más: dado que la jerarquía es un sistema, asegúrese de mantenerla consistente. Por
ejemplo, puede determinar que los títulos y subtítulos son siempre rojos y con mayúsculas, con
texto complementario (como títulos) establecido en Georgia a 12 píxeles con un color de # 666.
Independientemente de lo que decida, una vez que haya establecido esos rasgos, desviarse de
las reglas para contenidos similares debilita su diseño y puede confundir a los lectores. Para
ver a qué me refiero, echemos un vistazo a algunos de los elementos clave que comúnmente
encontramos.

PÁRRAFOS
Ah, el párrafo humilde, el bloque de construcción básico para la mayoría de las páginas web.
Los párrafos vienen en muchas formas, tamaños y categorías, pero por ahora, vamos a hablar
de los tipos que se ven comúnmente en los textos.

Los párrafos son donde pasamos la mayor parte del tiempo cuando leemos, por lo que
necesitamos estar seguros de que estamos utilizando un tipo de letra que sea cómodo para
una larga estancia. Esta no es una tarea demasiado difícil; Es más una cuestión de no hacer
algo incómodo leer. Por suerte, tenemos mucho margen de maniobra: elegir un tipo de letra
robusto y configurarlo bien lo llevará casi siempre. Los tipos de letra con menos adornos y una
forma uniforme hacen que las experiencias de lectura sean agradables, ya que se desvanecen
en el fondo y dejan que el texto ocupe un lugar central.

Como vimos en el último capítulo, escoger las tipografías de los párrafos significa observar de
cerca los formularios de letras en acción. Por lo general, menos es más, no buscamos
impresionar a nadie con nuestros estilos de párrafo.

La figura 5.1 muestra un buen comienzo para el diseño de párrafos. Tenemos un buen tamaño
de letra, una elección de tipo de letra simple de Chaparral, suficiente contraste con el color de
fondo y un espacio decente entre las líneas. Donde finalmente terminamos con nuestro estilo
de párrafo

FIG 5.1: Un estilo de párrafo simple y agradable establecido en chaparral.

depende de otros factores como el uso previsto, el tamaño del dispositivo, la alineación
ment, y más. Veremos esas consideraciones en el Capítulo 6.

Tamaño del tipo

Entonces, ¿qué es un buen tamaño de fuente? ¿Hay un punto dulce universal, o todo es
circunstancial? Como aprendimos con el cuadro de em, los tamaños numéricos pueden ser
engañosos, ya que no siempre reflejan el aspecto de un tipo de letra.
La mejor manera de abordar el tamaño es considerar al lector y la distancia de lectura. La
mayoría de las personas se sientan a una distancia de 18 a 24 pulgadas de sus pantallas
cuando se trata de un escritorio; para dispositivos móviles, es un poco menos (FIG. 5.2). En
pocas palabras: cuanto más lejos estemos de nuestro dispositivo, mayor será el tamaño del
tipo de letra.

Teniendo en cuenta la distancia típica y los tamaños de texto comunes en la materia impresa
(unos 10 puntos o aproximadamente 13 píxeles, que reflejan distancias de lectura más cortas),
tiendo a hacer que mi tamaño de tipo base sea de 16 o 18 píxeles, o 1–1.2 ems. He
enumerado unidades de píxeles fijos, por lo que tenemos una comprensión compartida de
aproximadamente el tamaño del texto del cuerpo. Sin embargo, en su propio trabajo, es mejor
utilizar ems, rems (root em, cuyo valor es relativo al elemento html), o porcentajes, todos cuyos
tamaños relativos le permiten responder mejor a una gama de dispositivos y visores. Aún
puedes usar píxeles cuando tus elementos requieren un tamaño específico. De lo contrario,
unidades relativas.

ofrece el mayor control sobre cómo mantener el tamaño flexible y permite a los usuarios
cambiar el tamaño del texto y las páginas dentro de sus navegadores. Para más información
sobre ems y rems, consulte el artículo de Jeremy Church sobre el tema
(http://bkaprt.com/owt/49/).
En general, preferiría equivocarme por hacer algo demasiado grande que arriesgarme a que
sea demasiado pequeño. En caso de duda, hazlo más grande. Esto es cierto algunas veces en
el diseño, pero a menudo he encontrado que este es el caso en el diseño para la pantalla. Sin
embargo, no se lo digas a tus clientes.

Medida y altura de línea.

La sabiduría convencional es apuntar a una medida de 45 a 75 caracteres (la longitud de una

línea de texto) en promedio en su texto actual, dependiendo de la fuente, el tamaño y la
configuración en particular. Si bien puede ir por encima o por debajo de ese rango, algunos
sitios web de noticias pueden adaptarse a medidas en los años 80, es un buen criterio. Ese

el rango existe debido al movimiento que hace un ojo desde el final de una
línea hasta el comienzo de la siguiente. A medida que las líneas contienen más
caracteres y crecen, es más difícil para el lector hacer el viaje con éxito. Si
necesita usar una medida más larga, querrá equilibrarla aumentando la
cantidad de espacio entre las líneas (altura de línea). El espacio adicional le da
a los ojos del lector espacio para hacer el viaje y reduce la posibilidad de
perder su lugar en el camino (FIG 5.3). Del mismo modo, si se encuentra en el
extremo más corto del espectro, puede alejarse con menos altura de línea, ya
que la distancia desde el final de la línea hasta el comienzo de la línea es un
viaje más corto (FIG 5.4). El conocimiento de la altura de la línea es
especialmente importante cuando se trata de sitios web receptivos. A medida
que los bloques de contenido se expanden y se contraen, es posible que deba
ajustar los valores de altura de línea junto con el tamaño de fuente para
garantizar que el tipo se mantenga cómodo.

medida. Nos referiremos al diseño receptivo y los efectos en la medida y la altura de la línea en
el siguiente capítulo.
No existe una verdadera altura de línea ideal, porque cada tipo de cara es diferente. Debe
tener en cuenta el diseño del tipo de letra, así como la composición. ¿Es este un tipo de letra
ancho o decorativo? Es posible que necesite más espacio entre las líneas para que los detalles
respiren. ¿Es esta una columna de texto angosto, como puede ver en los títulos colgantes en
los márgenes de un artículo? Podría usar un tamaño de letra más pequeño y mantener la altura
de la línea más ajustada que el texto del artículo al lado del título. Al observar estos factores,
puede juzgar lo que requiere una configuración particular.
Un buen punto de partida con la línea de altura es aproximadamente 1.2–1.8. Es mejor omitir
las unidades para la altura de la línea, ya que sus valores pueden ensuciarse debido a las
propiedades en cascada de CSS (vea el Almanac de CSS Tricks para obtener información
específica (http://bkaprt.com/owt/50/). Se requieren algunas pruebas y error para ver qué es lo
correcto para un tipo de letra determinado en un tamaño determinado en una situación dada.
Me resulta útil declarar una altura de línea y ver cómo se siente al leer el texto en esa
configuración. ¿Los ascendentes y descendientes de letras chocan entre sí o corre un poco
demasiado cerca entre líneas? Si es así, se necesita más altura de línea. ¿Son los espacios
entre las líneas más prominentes que las líneas mismas? Si es así, intente reducir la altura de
línea. Cuando encuentre una línea adecuada A la altura, el texto parecerá caer en un ritmo
natural, sintiéndose ni demasiado lejos ni demasiado cerca.

Muescas y líneas en blanco Hay varias formas de denotar un párrafo nuevo,

desde las primeras líneas superpuestas hasta las marcas de párrafo reales (¶),
denominadas pilares. En la web, estos enfoques se inclinan hacia una línea en
blanco entre párrafos o una sangría de la primera línea (FIG 5.5). Si bien no
hay una forma correcta de marcar un nuevo párrafo, se basa en gran medida
en las preferencias personales o el estilo de la casa, es una buena idea
reforzar los patrones comunes, porque las personas saben lo que significan.
Escribir en la web tiende a ser más "fragmentado", donde cada párrafo
contiene un pensamiento completo, a diferencia de algo como la ficción, donde
un salto de línea completo puede interrumpir el diálogo, por lo que los párrafos
pueden estar más separados. Como beneficio adicional, estos trozos pequeños
resultan útiles para el contenido de skimming. Si usa una línea en blanco, haga
que sea igual a su tamaño de letra o un toque más pequeño. Para una sangría
de primera línea, es habitual sangrar alrededor de 1 em. Una vez más, esto cae
a la preferencia personal. Lo crucial es hacer evidente la distinción del nuevo
párrafo. Me gusta pensar que los párrafos son similares al ritmo del tambor
subyacente en una canción. Sientan las bases para otros tipos de contenido.
Construyendo hacia el exterior, hablemos de un compañero de párrafo común:
el título.

Titulares

Los titulares son los que llaman la atención. La gente les da una ojeada para decidir si seguir o
no leyendo. Los titulares vienen en una variedad de formas, desde títulos y subtítulos de
artículos sencillos hasta grandes frases de marketing y todo lo que se encuentre en el medio.
El título marca la línea de inicio de un texto. Orienta a los lectores y sirve como una especie de
apretón de manos y una sonrisa. Es tu primera oportunidad de hacer una impresión (FIG 5.6).
Un título no solo debe distinguirse de otro texto en la página (para no confundir el ojo), sino que
también ayuda a anclar la página como un todo. En su mayor parte, los titulares aparecen
como texto más grande, pero también puede optar por enfatizarlos mediante el peso, el
espaciado, la alineación o color. Un pequeño encabezado puede aplanar su jerarquía y detener
una de las herramientas más sólidas de su sistema visual. Pero un titular robusto da la
bienvenida a los lectores y los guía a través del texto. Un título normalmente se establece en
una proporción mayor que el texto del cuerpo. Normalmente trabajo en matemáticas simples,
doblando o triplicando el tamaño del texto del cuerpo para encontrar un tamaño de titular
potencial. Por lo tanto, puedo probar un tamaño de texto de 12 píxeles y un tamaño de titular
de 32 píxeles. Incluso podemos dividir parte de la diferencia para obtener un tamaño de
subtítulo de 16 píxeles. Tome estos números como arrancadores ásperos; siempre hay que
analizar cómo se ven cuando se escribe (FIG. 5.7). Una vez que tenga el tamaño del título
base, puede establecer relaciones entre los títulos y subtítulos. Un lector debe poder distinguir,
incluso de un vistazo, el papel de un elemento de otro. La prominencia visual de un elemento
no siempre puede reflejar su valor semántico, pero los elementos clave a menudo tendrán
mayor peso visual que el contenido de otras páginas. Felizmente, muchas de las relaciones
visuales en la web vienen preconfiguradas, gracias al marcado semántico: h1, h2, etc. Tu estilo
visual debería refuerce esos roles, que a menudo significa moverse hacia abajo desde el
elemento semántico más alto (h1). Eso le da al lector un camino a través de su contenido. Si
configura su h2 del mismo tamaño que su h1, un lector puede pensar con razón que comenzó
un nuevo artículo en lugar de una subsección.
En el último ejemplo (FIG. 5.7), puede ver que el título está en la parte superior, seguido de un
texto, un subtítulo y luego más texto. La diferencia en el tamaño del encabezado proporciona
suficiente contraste para establecer esta relación. Un lector puede asumir que el texto más
grande es importante porque aparece primero en el flujo de lectura y porque es tan grande.
Además, los párrafos están relacionados no solo porque ambos están incluidos en los
encabezados, sino también porque son del mismo tamaño. Este es un intercambio visual sutil,
que encontramos lo suficiente en la vida como para estar arraigado en nosotros.
Contrastes como estos son métodos abreviados para crear una jerarquía visual y construir un
sistema tipográfico en sus diseños, que a su vez imbuirán su trabajo con variedad y estructura.
Pueden parecer simples, pero no confunda lo simple con lo obvio.
Una vez que entiendo las relaciones generales entre elementos, observo cómo las opciones de
tipo de letra pueden respaldarlas. Por ejemplo, si necesito un tipo de letra para los titulares, me
gusta encontrar algo que se vea bien en grande, para que brillen los detalles del tipo de letra, y
que esté a la altura de las palabras fluctuantes.
Para un sitio de noticias típico con numerosos artículos, debe poder ocuparse de titulares de
diferentes longitudes, nombres que puedan requerir puntuación o caracteres acentuados,
trabajos citados en cursiva y más. Su elección tipográfica debe manejar estos con gracia. Una
cara ligeramente condensada puede funcionar bien en estas situaciones, ya que puede colocar
más caracteres en cada línea y evitar saltos de línea incómodos. Por ejemplo, FF Meta Serif es
una cara algo estrecha, que acomoda un par de caracteres más por línea que una serif más
ancha como lo hace Georgia (FIG 5.8).
Muchas personas, incluido yo, tienden a usar sans serifs para los titulares.
Todo se reduce a una geometría simple: la mayoría de los sifs se pueden
empaquetar más apretados que los siervos porque las letras ocupan menos
espacio. Esto permite más caracteres por línea y un tamaño de letra más
grande. Como se ve en la FIG. 5.9, FF Meta ocupa un poco menos de espacio
que su contraparte serif en el mismo tamaño. Es una pequeña ganancia,
pero es suficiente para evitar que una palabra se ajuste a una nueva línea y
nos da un poco más de espacio para agrandar nuestros titulares. Otro tipo de
titular es más bien una rama: no siempre acompaña a los párrafos y, a veces,
es bastante grande o decorativo. Es un poco atípico y tiene más margen de
maniobra para agitar las cosas. Agrupo esto en una categoría a la que me
gusta llamar de tipo grande. Tipo grande Si bien el tipo grande es un tipo de
titular, puede que no esté encima de un artículo. A menudo los vemos en
páginas de inicio y páginas de inicio para sitios de marketing. El tipo de letra
grande se considera mejor de la misma manera que una fotografía: una imagen
de tipo que ancla un diseño o crea el tipo de estado de ánimo que puede
detectar en un póster de película o en la portada de un libro.

En Siteleaf (http://bkaprt.com/owt/52/), el titular es un punto focal grande para la página (FIG

5.10). No solo informa al lector, sino que también establece un ambiente abierto y acogedor
junto a la imagen. El tipo grande complementa la captura de pantalla grande a través de su
proximidad y color, creando una imagen visual unificada. Los encabezados rápidos como estos
son los distintivos del diseño de marketing.
Los mismos enfoques para los titulares se aplican aquí, con un par de advertencias
adicionales. Si ha estado mirando un tipo de letra decorativo, un uso único aquí puede ser la
cantidad justa de personalidad. De manera similar, cualquier error en su texto, como la
puntuación incorrecta (¡tenga en cuenta sus citas inteligentes!) O los saltos de línea
incorrectos, solo serán más evidentes porque son más grandes. Con diseños responsivos,
también es una buena idea adaptar sus saltos de línea. Los visitantes llegan a su sitio a través
de todo tipo de tamaños de pantalla, así que considere personalizar el tamaño de tipo y los
saltos de línea para mantener el titular organizado.
Haga un esfuerzo adicional y cuide la forma en que sus titulares responden a diferentes
tamaños y condiciones de pantalla, en lugar de dejar que un navegador maneje el reflujo.
Algunas buenas maneras de acercarse a ese nivel de detalle son los complementos jQuery
FitText y Lettering by Paravel o Font-to-Width de Nick Sherman y Chris Lewis.

FitText (http://bkaprt.com/owt/53/) permite que el tamaño del tipo de un

elemento aumente o disminuya en relación con su contenedor para que.
Llena completamente el ancho. Este control adicional es especialmente útil
cuando se trabaja con capacidad de respuesta: su importante e importante
titular es siempre de ancho completo (FIG 5.11). Font-to-Width
(http://bkaprt.com/owt/54/) se basa en conceptos similares, pero aprovecha las
grandes familias de tipos al permitirle especificar un grosor de tipo de letra
diferente para llenar el ancho de un contenedor en lugar de cambiar el tamaño
del tipo . Ambas son útiles en diferentes situaciones: FitText cambia el tamaño
de tu tipo, mientras que Font-to-Width cambia la fuente real. Las letras
(http://bkaprt.com/owt/55/) envuelven las letras individuales de un elemento
específico para que pueda acceder a ellas con CSS, lo que permite algunos
ajustes rápidos al kerning (el espacio
entre letras individuales), colores de letras particulares o cualquier otra cosa
que se le ocurra (FIG. 5.12). A diferencia de las aplicaciones de escritorio para
diseño de impresión, no tenemos mucho control incorporado sobre el kerning
en CSS, ya que la configuración reside principalmente en el diseñador de tipos.
Para un uso limitado como un gran titular, es útil tener más control sobre la
forma en que se encierran las letras, especialmente en los emparejamientos
difíciles de letras que normalmente terminan con espacio extra (por ejemplo,
casi cualquier cosa que tenga mayúscula o T). Obviamente, no querrá usar
ninguno de estos complementos para una gran cantidad de texto. Pero para un
titular de página de inicio crucial, estos métodos le brindan la flexibilidad de una
imagen preparada, al tiempo que conservan todas las ventajas del texto en vivo
(como vimos en el Capítulo 2). Algunos nuevos valores de CSS también se
están implementando en los navegadores para admitir las ventanas gráficas,
como vw (1vw = 1% del ancho de la ventana gráfica) y vh (1vh = 1% de la
altura de la ventana gráfica), que le permiten obtener resultados similares sin la
necesidad de JavaScript. El soporte del navegador para estos valores todavía
es escaso, pero está en aumento. Para obtener más información sobre esto,
consulte el artículo de Chris Coyier "Viewport Sized Typography"
(http://bkaprt.com/owt/56/). Pequeño tipo El tipo pequeño se compone de una
variedad sin pretensiones de elementos de soporte. La interfaz, que cubriremos
en breve, es un tipo común de tipo pequeño, pero también es importante
distinguir las categorías específicas del artículo, como títulos, notas al pie y
apartados.

Primero, date cuenta que el tipo pequeño sirve para un propósito específico.
Marca un contraste visual y un cambio de tono, un punto de información
separado de la corriente principal de un texto. El cambio de tamaño es
equivalente a un cambio en el tono o el volumen de su voz cuando habla.
Sigues siendo el orador, pero esto es algo que vale la pena decir de manera
diferente. Un cambio en el tamaño de tipo (que puede ser tan simple como el
80% de nuestro tamaño de tipo base) señala que el cambio (FIG. 5.13). Como
este tipo es más pequeño, debe ser más consciente de su elección de tipo de
letra. Pruebe su tipo en contexto para asegurarse de que sigue siendo legible y
limpio en sus condiciones de tamaño. Puede utilizar el mismo tipo de letra que
el texto de su cuerpo si se mantiene bien en el tamaño más pequeño, o puede
elegir algo que se adapte mejor a los tamaños pequeños. Elegir una tipografía
de subtítulos separada le brinda la capacidad adicional de señalar visualmente
un cambio en la voz, como cuando una nota lateral proviene de un editor en
lugar del autor. Otro ejemplo de tipo pequeño es la línea de información de
contacto, que puede ser importante incluso si se accede con poca frecuencia
(FIG. 5.14). No necesita mucha prominencia y, por suerte, es una convención
aceptada en la que la información de contacto aparece en la parte inferior de
una página, para que la gente sepa dónde encontrarla. Como resultado, el tipo
puede ser pequeño y discreto si eso sirve para su diseño.

Una última nota sobre el tipo pequeño: si estamos hablando de más de unas pocas líneas, el
tipo pequeño puede no ser el camino a seguir. La lectura prolongada de un texto pequeño se
vuelve muy engorroso muy rápido. Sin embargo, para vistas rápidas y subtítulos, es perfecto.
OTROS TIPOS NOTABLES
Para el resto de los elementos comunes que puede encontrar, puede mezclar y combinar los
enfoques que ya hemos visto. Elementos como el blockquote, el código, los mensajes de
estado en las ventanas modales y cualquier otra cosa fuera de lo normal aparecen de vez en
cuando. Lo más importante para recordar con cualquier otro elemento es evaluar su propósito,
su importancia y dónde aparece en contexto.
En el caso de una cita en bloque, se aplican algunos principios de texto pequeño (aunque se
trata menos de tamaño). Un blockquote es un poco de texto citado fuera del texto principal de
un artículo. Es común diferenciar visualmente una nota de bloqueo del texto normal para
marcar este cambio en la voz, y esta puede ser una buena oportunidad para cambiar de un
serif a un sans serif (o viceversa, dependiendo de la tipografía de su cuerpo). En letra de
imprenta, las citas se distinguen típicamente con texto sangrado y cursiva, pero en la web, los
patrones pueden ser más estilizados. Puede marcar las comillas con cursiva, un cambio en el
tamaño del tipo, un cambio en el tipo de letra, la adición de comillas más grandes de apertura y
cierre, un cambio en el color o el borde, o cualquier combinación de los anteriores.
En el caso de las comillas extraíbles, incluso puede adoptar un enfoque ornamental al
establecer el bloque de cotizaciones más grande para agregar interés. Estos pueden ser
particularmente efectivos en la ejecución de texto para agregar cierta variedad al tipo e
imágenes (FIG 5.15). Las citas de extracción sirven como un buen ancla visual y atraen a los
lectores al artículo.
Algunos de estos estilos están bien para una cita aquí o allá, pero si está
haciendo muchas citas, un estilo más sutil (como vemos a menudo
en la impresión) es probablemente una mejor opción para evitar que el texto
del artículo y las citas luchen entre sí. En el sitio web de Jason Kottke (FIG.
5.16), probablemente vea el estilo blockquote más común, que hace que el cvv
tipo sea un poco más pequeño que el tipo base y más claro en color. Esto
funciona bien, porque es un simple cambio visual que marca un cambio en la
voz mientras se siente atado al resto del texto. Así que ahora tenemos varias
formas de manejar el contenido de texto pesado. Pero esa es solo una faceta
de la web. ¿Qué pasa con los elementos que no solo leemos, sino que también
hacemos clic, tocamos e interactuamos de otra manera? Eso es correcto,
interfaces cue!

INTERFAZ

La interfaz de usuario (UI) se refiere a elementos que habilitan acciones y dan

contexto dentro de un sitio web o aplicación . Los componentes comunes de la
interfaz de usuario incluyen navegación en el sitio, botones, elementos de
formulario y etiquetas, mensajes de estado, enlaces de cuentas y cualquier
cosa en medio.

Estos elementos tienen un doble propósito: al igual que los párrafos, son
contenido, pero al igual que los titulares, se pueden configurar grandes para no
prestar atención o anclar un diseño. Por ejemplo, el texto en un botón puede
ser más grande o más pequeño que el tamaño de nuestro texto base,
dependiendo de su propósito y lugar en la página. Un botón que admite un
título o una llamada a la acción requiere un estilo visual más prominente,
mientras que un botón para acciones secundarias obligatorias (cerrar sesión,
buscar, etc.) puede aparecer más pequeño.

Debido a que los sitios web tienen varias capas de elementos de UI que
dependen de su función, debemos medir el peso visual necesario para
transmitir la idea de un elemento y la jerarquía requerida para su propósito. Los
elementos importantes de la interfaz de usuario, como la navegación, pueden
necesitar más prominencia visual que los elementos a los que se accede con
menos frecuencia, como un botón de cierre de sesión. Eso no quiere decir que
no sean los dos importantes, pero podemos clasificar estos elementos
visualmente según su uso. Incluso con una variedad de usos y tipos, surgen
algunas convenciones para estos elementos. Muchas aplicaciones web tienden
a hacer que el texto de la interfaz de usuario sea más pequeño, por lo que
pueden comprimir muchos elementos en un espacio limitado. Mantener el texto
legible por encima de todo. ¿Qué uso es un botón importante si no puedo
leerlo?
Debido a la rapidez con la que un encabezado puede estar lleno de opciones
(especialmente después de iniciar sesión en un sitio donde se revelan más
opciones), prefiero las fuentes tipográficas sans serif para la IU. Como vimos
anteriormente, se pueden configurar más pequeños y un poco más ajustados
que las remates. Y en estas situaciones, cada espacio cuenta, especialmente
si necesita traducir sus etiquetas de navegación a otros idiomas. No hay un
tamaño o estilo aceptado para la interfaz de usuario, ya que depende de su
propósito e importancia. Pero no importa de qué tipo de elemento de interfaz
estemos hablando, debemos hacerlo legible y reconocible para el usuario.

PONIENDOLO TODO JUNTO

Una vez que haya tenido en cuenta sus componentes básicos, puede
ensamblar su sistema tipográfico y luego concentrarse en las relaciones
jerárquicas. ¿Qué elementos son los más importantes? ¿Qué relaciones
comparten los elementos? Para resolver esto, puede mirar el marcado y ver
cómo se ve la estructura semántica. Un h1 es probablemente nuestro texto
más grande e importante, y luego hacia la h2, h3 y así sucesivamente. Eso
está bien para el texto, pero ¿qué pasa con los elementos de navegación, las
imágenes y otros tipos de contenido que deben encajar? Siempre piense en su
intención (las cosas que quiere que haga un visitante) y utilícela para influir en
su estilo visual. Si quieres que alguien lea un artículo, enfoca tus esfuerzos en
diseñar el texto. Asegúrese de que sea agradable y legible, con un punto de
entrada claro, como un titular grande y atractivo que los pastores leen al
artículo. Si desea que alguien vea un video o se registre para una cuenta,
concéntrese en hacer que esos elementos brillen. No necesitan ser los
elementos más grandes en la página, pero deben tener suficiente peso y
prominencia visual a través de la colocación y el color para llamar la atención.
Veamos un sitio web con muchos contenidos como el New York Times y
examinemos algunas de las decisiones que dan la estructura y el flujo del
diseño (FIG 5.19). Desde el principio, vemos diferentes tipos de contenido: más
allá de la cabecera y la navegación, tenemos un gran encabezado y un
extracto en la parte superior izquierda, texto con una imagen grande que lo
acompaña.

El medio, y algunos artículos más pequeños que figuran en la parte superior derecha. Usando
lo que aprendimos en el último capítulo, puede descubrir las formas en que el sitio distingue
varios elementos:
• En la parte superior izquierda, el encabezado grande, establecido en cursiva para una mayor
distinción, capta rápidamente la atención del lector y proporciona un punto de entrada.
• Debido al contraste, es incluso más probable que el lector se centre en la imagen central; Su
tamaño y ubicación lo distinguen.
• Otro texto también puede ser grande, como titulares secundarios, pero eso
La imagen central y solitaria es el punto focal de la página.

Entonces, si el tipo de mamut o las imágenes son formas seguras de atraer a un lector, ¿por
qué no rellenamos nuestras páginas con ellos? Si lo piensas, ese tipo e imagen son tan
atractivos porque son únicos. Si bombardeamos la página con más imágenes y un ejército de
grandes titulares, cada uno llevaría el mismo peso y eliminaría cualquier contraste. Sin
contraste, no tenemos jerarquía, y sin jerarquía, la tipografía se siente indistinguible y nuestros
lectores se quedan sin un mapa.
En el sitio del New York Times, los contrastes en el tamaño del tipo, el estilo y la ubicación
aplican la estructura a su contenido y establecen relaciones. Cuando miramos por primera vez
algo, tendemos a buscar patrones; mentalmente agrupamos elementos similares y tratamos de
descubrir un orden de picoteo.
Los títulos en la página de inicio del New York Times se configuran en forma grande, con
titulares clave más cerca de la parte superior. Los subtítulos y las líneas se vinculan con el
título en tamaños más pequeños pero permanecen visualmente distintos de los párrafos. Este
estilo subraya que la subpartida es parte del mismo sistema que la cabecera, al tiempo que
establece que la subpartida es jerárquicamente menos importante. Los extractos del párrafo
tocan este mismo sistema jerárquico; mientras que su tamaño de tipo es incluso más pequeño
que el del subtítulo, los párrafos se establecen y se diseñan de la misma manera que los
demás. Esta consistencia significa que los lectores entienden rápidamente que estos
fragmentos son tipos de contenido similares.
He notado arreglos simples aquí, pero, juntos, forman la columna vertebral de un sistema
tipográfico sólido construido sobre relaciones. Toda la tipografía se basa en una relación
reflexiva: las cosas pequeñas informan las cosas grandes, y las cosas grandes informan las
cosas pequeñas. La suma de este toma y daca significa la diferencia entre bello y olvidable.
Hemos cubierto las consideraciones tipográficas más importantes que puede hacer a nivel
micro. Pero ¿qué pasa con el otro extremo del espectro: la página? ¿Cómo afectan los
elementos más grandes, como la ventana del navegador o los sistemas de cuadrícula, a
nuestros párrafos y titulares diseñados con amor? Veamos el panorama general.