Transcripciones
1. Introducción: En la semana cuatro del bootcamp de diseño de
interfaz de usuario, estaremos
mirando la legibilidad. Primero tendremos que entender las diversas etapas de
cómo alguien lee. Echaremos un vistazo a algunos de los mitos sobre
legibilidad en sitios web. Por ejemplo, el mito de que los tipos de letra sans
serif son más fáciles leer que los tipos de letra serif.
Entonces no lo son. Por supuesto, el mito de
que deberíamos tener nuestra tipografía corporal
siempre en 16 pixeles. Diferentes tipos de letra
son diferentes tamaños a 16 píxeles y diferentes dispositivos o diferentes distancias
de nuestra cara. En cambio, aprenderemos una fórmula sólo un poco más
difícil para
asegurarnos de que nuestros tipos de letra tengan
un buen tamaño para leer. Y nos aseguraremos de que esos tamaños ajusten bien para
diferentes dispositivos. Aprenderemos sobre una ilusión óptica que la hace un poco
más difícil de lo que
pensarías emparejar un
tipo de letra de encabezado con una tipografía de cuerpo. Y por último,
veremos cómo elegir la longitud de la línea y
la altura de la línea una vez que conozca el tamaño
de su tipografía. Entonces al final de
este curso corto, sabrás elegir
el tamaño de fuente, la longitud de línea y la altura de línea para
cualquier tipo de letra para que
sea óptimo para la
legibilidad en la web.
2. Cómo leemos: Antes de poder
hablar de legibilidad, tenemos que mirar cómo la
gente realmente lee. Parece algo bastante
obvio. Pero incluso si
miras una aplicación web, hay dos tipos diferentes de lectura que están pasando. Una es cuando intentas
encontrar algo. Entonces tu navegación
y tus botones y ese tipo de cosas
donde sabes lo que estás buscando
y estás usando el texto para ayudarte a
identificar la cosa. Y el otro es cuando
estás tratando extraer información de algo, tal vez estás mirando
una visualización de datos o estás leyendo un
artículo o un comentario que alguien ha escrito cuando no sabes lo que hay en él todavía y estás tratando de extraer y entender la
información en ella. Esos son dos tipos muy
diferentes de lectura para ayudarnos a
entender la diferencia, voy a pedir prestada una
definición de Toni Basil. Es posible que hayas oído hablar de
Tony Belsen porque aquí hay un campeón de lectura de velocidad. Es experto en cómo aprendemos, y es el tipo que
inventó los mapas mentales. Tony bosón dice que hay
siete etapas para leer. El primero es el reconocimiento. Esto es identificar la E en la página como la que
está en algún lugar de tu cerebro. La mayor parte de este trabajo ha hecho
antes de empezar a leer, cuando se
aprende lo que significan cada una de las letras, la siguiente etapa es la asimilación. Esta es la parte física. Esto es cuando la luz
rebota de la pantalla y en tu ojo y luego es
transportada hasta tu cerebro. La tercera etapa
es la comprensión. Aquí es donde realmente
entendemos lo que dicen las palabras. Todas las palabras en la
página combinadas tienen algún tipo de significado y entendiendo cuál es
ese significado. La siguiente etapa es el conocimiento. Aquí es donde lo aplicamos a las otras cosas que hemos aprendido
previamente. A lo mejor formamos algún tipo de
opinión sobre lo que hemos leído. Podríamos rechazarlo o podríamos integrarlo en
nuestras otras ideas. Las tres primeras etapas se aprenden
todas en la escuela. Pero a menos que asistieras a la
universidad o a la universidad, probablemente no
aprendiste realmente la etapa del conocimiento. Realmente no aprendiste a reescribirlo con tus
propias palabras ni a tener una opinión sobre
lo que estás leyendo hasta que
llegaste a la universidad. Entonces esta es una
etapa más avanzada en la lectura. Si pensamos volver a nuestra aplicación web cuando
tenemos etiquetas para páginas, navegación y botones, no
tenemos que
preocuparnos por esta etapa. La gente ya sabía lo
que buscaban. Sólo tenemos que preocuparnos por
esas primeras dos etapas. Pero para todas las demás partes de nuestra aplicación donde estamos dando información a alguien y necesitamos que se los lleve, se involucre con la información, y la use de alguna manera. Esos se aplicarán a
las siete etapas. La quinta etapa de la
lectura es la retención. Esto es realmente capaz de
almacenarlo lejos en algún lugar nuestro cerebro para traerla de vuelta más tarde cuando realmente la necesitamos, entonces tenemos recuerdo, que es cuando sacamos
esa información de
vuelta de almacenamiento
cuando lo necesitamos. Y botones de Tony, etapa final, etapa siete es comunicación. Pudiendo usar esa
información que hemos almacenado y recordado y
explicársela a otra persona. Creo que vale la pena ser
conscientes y pensar en estas siete etapas cuando estamos
tomando decisiones tipográficas. Pero no voy a entrar en
ellos por demasiado detalle, ciertamente no en este momento. No obstante, si estás tomando una
decisión como qué usar como texto corporal en un gran
bloque de tipografía. Acabamos de mirar las dos
primeras cosas aquí,
el reconocimiento
y la asimilación. Podríamos decir, ¿Sabes qué? helvetica es un cuerpo
realmente, realmente bonito. Síguelo porque es muy, muy rápido para nosotros percibir. Es muy rápido y
eficiente para la asimilación. Utiliza formas geométricas simples. Es perceptualmente
menos esfuerzo para nosotros asimilar las letras. Cuando miramos la
anatomía de la tipografía, mencionamos cómo el ascender en una Helvética H no es
particularmente alta,
haciéndola casi
idéntica a la n Esto nos da
problemas de reconocimiento al instante. De igual forma, si miras a una, C tiene una abertura muy pequeña y la misma
forma geométrica exacta que una O o una E. Y por supuesto
la mayúscula y la minúscula l son
más o menos exactamente la misma forma. Aunque solo consideremos estas dos primeras etapas al una
decisión tipográfica, podemos ver cómo en realidad
podrían contradecirse
masivamente entre sí. helvética es una gran
opción para la asimilación, pero una terrible elección
para el reconocimiento. Y debido al uso excesivo de la
tipografía Helvetica es probablemente particularmente malo para la
memoria y el compromiso, lo que significa que la mayoría de las etapas
entre comprensión y comunicación van a ser afectado negativamente por
elegir este tipo de letra. Ahora puede parecer un detalle
innecesario mirar la definición de
cada letra y criticar o alabar
el factor de reconocimiento y asimilación para esos
pequeños y diminutos detalles. Pero como adulto, cuando
lees, casi nunca miras cada letra
individual. Y si lees lo suficientemente rápido, rara vez incluso
mirarás una sola palabra a la vez. Esto significa que con el tiempo, estamos aprendiendo a leer
una palabra entera debido la
forma general de esa palabra. Podría ni siquiera
ser en el
que estoy actualmente enfocado. Puede estar a dos o incluso
tres palabras de distancia de ella. Si leemos particularmente rápido, lo que
significa que ni siquiera está
enfocado cuando lo leemos. Identificar la
diferencia entre una Helvética o y una Helvética o C o E cuando no está en
el centro de nuestro foco, conduce a una posible
mala lectura y por lo tanto afectará negativamente a
la siguiendo seis etapas. El detalle más pequeño en una tipografía que
afecta el reconocimiento, la asimilación, el
compromiso en la memoria, o cualquiera de estos detalles, se vuelve masivamente importante
cuando las personas están leyendo un gran cuerpo de
texto porque lo
pasarán a
un ritmo increíble. Y el más mínimo
detalle puede
afectarlos emocionalmente o afectar
su comprensión. Ahora bien, si tu primer idioma
era japonés o chino, o de alguna manera Mahan o jeroglíficos
egipcios, entonces estarás acostumbrado a leer una palabra entera como
un solo símbolo. Ya estabas
leyendo bastante rápido. Pero también debemos ser conscientes de que el
esfuerzo perceptivo que se requiere para asimilar un personaje chino
o japonés es mucho más difícil. Y la importancia del reconocimiento porque si
las similitudes entre personajes hace que sea aún más importante que consideremos estos factores con
estos alfabetos. Según el bosón de Tony, hay siete
etapas para leer. Cuando tomamos todos estos
factores en consideración, no
hay manera de que
podamos decir que hay una tipografía
que debemos elegir. Esa va a ser la mejor
en todos los escenarios. Y aunque hubiera, actualmente sólo
estamos
hablando de leer. Ni siquiera estamos hablando todas las demás partes de la comunicación
visual
que acabamos de discutir. No estamos hablando de
motivar a la gente a leer. Literalmente estamos
hablando de lo bien que leen. Todos estos factores
hacen que un término como la legibilidad
sea casi imposible de definir. Pero vamos a
llegar a algún tipo de definición en el siguiente video. Solo ten en cuenta que
no es una regla establecida en piedra.
3. Readability: Si quisiéramos medir
cuán legible o la legibilidad de un bloque
de texto en un sitio web. Hay múltiples, múltiples cosas que
querríamos considerar. La forma en que las personas miden
legibilidad es tan salvaje y variada como la forma en que
miden la usabilidad en sí misma. Existen múltiples
técnicas donde las personas cuentan el
número de adverbios. Ellos miran lo compleja que es
la estructura de oraciones, cuántas sílabas por
palabras que hay en el texto. Muchas cosas que
no vamos a mirar a lo largo este curso porque
no han relacionado con la tipografía. Pero si vas a un sitio web
como readable.com, puedes poner en un párrafo
de texto y
tenerlo calificado en ese tipo de cosas. Hay muchas
formas de medir
la velocidad de percepción y con
qué precisión son
las tipografías percibidas. Hay muchas cosas que
hacer con lo fácil que es diferenciar entre
letras en la tipografía. Y todo lo que acabo de
mencionar es sólo que ver con las primeras etapas de la lectura, no ver con lo fácil que
es recordar o recordar, o cuánto
te involucra y te hace pensar y formar la tuya propia
opiniones sobre el contenido. Como tipografos web, es
mejor para nosotros pensar las variables que
tenemos disponibles para nosotros lugar de todas las formas en que podemos escribir legibilidad en su conjunto. Ahora una vez que hayamos elegido una tipografía y vamos a
estar haciendo eso en gran medida basado en lo bien el personaje de la
tipografía se ajusta a la marca. Son tres variables
que podemos controlar. Podemos controlar el tamaño del texto, la altura de línea y
la longitud de la línea. Es posible que tengas de vez en cuando, escuchaste algunas reglas del pulgar
sobre estas tres variables, específicamente con el tamaño del texto. Por ejemplo, es posible que
haya escuchado a la gente decir que el texto debe tener
al menos 16 píxeles de alto. Desafortunadamente, esa
es una regla general. Y como diseñadores tipográficos, realidad no nos sirve mucho. 16 píxeles de alto para una
tipografía no es lo mismo que 16 píxeles de alto para otro
tipo de letra, por diversas razones. Los 16 píxeles se refiere
a la caja circundante y diferentes letras y
diferentes tipos de letra llenan estas casillas de
múltiples maneras diferentes. Podrían ir directo
a los bordes. tienen absolutamente
ninguna garantía que eso vaya a suceder. Podrían ser bastante
pequeños dentro de esa caja. E incluso entonces hay
varios atributos como la x-height y
el peso óptico. Cosas de las que hablaremos en algunos videos muy pronto
que en realidad
van a afectar lo grande que aparece en la página. Incluso entonces. Eso es antes de que incluso
hablemos de diseño receptivo. En realidad sostenemos
diferentes pantallas a diferentes distancias
de nuestra cara. Entonces nuestro teléfono, cuando
miramos la pantalla de nuestro teléfono, lo
sostenemos mucho
más cerca que cuando
miramos un sitio web en
una pantalla de monitor. No hay forma de
estar exactamente seguro de cuán lejos está el usuario sujetando
su teléfono de la cara. Pero en términos generales, un tamaño de
tipo de 16 píxeles en pantalla de
un teléfono
no es el mismo que un tamaño de tipo de 16
píxeles en un monitor. Las otras dos variables, las alturas de
línea en la longitud de la línea, van a verse afectadas de alguna
manera por la elección de la topografía
y luego el tamaño de la fuente. Entonces es imposible
para nosotros trabajar estas cosas hasta que
tengamos ese tamaño de fuente. De hecho, para cualquiera de estas
variables, el tamaño del texto, altura de línea y la longitud de línea cambia una va
a afectar a las tres. Si miras el diseño de un sitio web existente y dices, Ya
sabes qué, necesitamos hacer que el texto más grande en este sitio web. Eso va a cambiar
absolutamente todo. Cuando pensamos en
la legibilidad como tipografos, estamos pensando en el tamaño
del texto,
la altura de línea y
la longitud de la línea. Y estamos pensando en que
todas estas tres cosas funcionan bien ¿qué juntos? Para el resto de este curso, me referiré a la legibilidad ya tan bien funcionan estas tres
cosas juntas. Siendo bien conscientes de que hay muchas otras cosas que
entran en si
el texto es legible o no, sobre todo que podríamos
incluso considerar lo bien recordamos y
recordamos
la información como parte de la legibilidad.
4. Relación de aspectos: En el último video, dije que las alturas generales
de la tipografía no
es demasiado importante para nosotros cuando estamos
pensando en legibilidad. Y sólo para probar ese punto, quiero mostrarles algunos
textos escritos en Verdana y luego textura en exactamente el
mismo tamaño, pero en Garamond. Ahora una gran diferencia
entre Madonna y Garamond es que
Madonna tiene una altura x
muy, muy alta, y
Garamond tiene una altura x
muy, muy pequeña sobre todo. Si tomas cualquier
tipo de letra y divides la altura total de las
letras por la altura x, obtienes la relación de aspecto. El x-height es normalmente alrededor de la mitad de
la altura del carácter general. Normalmente estás mirando
algo alrededor de nought 0.5 como la relación de aspecto. Pero podría ser cualquier cosa desde nought 0.4 hasta nought 0.6. Garamond tiene una
relación de aspecto tan pequeña como 0.38. El x-height de Garamond es muy pequeño en comparación con
el tamaño general. Recuerde que el tamaño es del
tamaño de la caja circundante. Por lo que incluso las mayúsculas podrían no encajar perfectamente
dentro de esa caja. Para Donna tiene una
relación de aspecto de nada, 0.58. El x-height es bastante grande dentro de la
altura total de la letra. Existen varias calculadoras
disponibles en línea para conocer la
relación de aspecto de tus tipos de letra. Me gusta bastante este de
esta página que
compartiré con ustedes. Y me gusta porque
puedo poner en nombre de
cualquier familia de fuentes y
media en mi computadora para que pueda calcular todo tipo de
archivos de fuente
locos y maravillosos que sucede que tengo. Ahora si estuviéramos, por ejemplo, usando Verdana y
Garamond juntos, o si estuviéramos usando una como fuente de
respaldo para la otra, entonces queríamos que lucieran más o menos del mismo tamaño y tengan una ritmo similar
bajando por la página. Algo de lo que
hablaremos un poco más tarde. Si, por ejemplo, tomamos 16 pixeles, decimos que
tenemos algún Vedanta
que tiene 16 píxeles de alto. Podemos veces que 16 por nada, 0.58, y esto
nos da un número como 9.28. Esta es la altura x de la Verdana que
tiene 16 píxeles de alto. Ahora si dividimos eso por 0.38, que es la
relación de aspecto de Garamond, obtenemos el número
veinticuatro cuarenta y dos. Veinticuatro punto cuarenta y dos es un tamaño bastante bueno
para hacer Garamond, si queríamos lucir
más o menos del
mismo tamaño que 16 pixel para Donna. Ahora como verás que estoy
bastante lucir del mismo tamaño. Y parte de la razón
es porque he elegido dos tipos de letra como el extremo
opuesto exacto del espectro, y ni siquiera se ven
similares de ninguna manera. El Garamond es bastante grande
en comparación con el Vedanta. Pero también hay
algunas otras cosas. Garamond es
una tipografía bastante abierta, tiene grandes
bolas abiertas y aberturas, tiene líneas
pesadas bastante y bastante
variedad ahí también. Hay varios aspectos de esta tipografía que
son un poco más difíciles cuantificar por esas razones
en instancias como esta, podría confiar en mi ojo un
poco más que las matemáticas. A lo mejor reduciría un poquito el tamaño de la
grasa Garamond. Ahora por ahora sólo tenemos que hacer todas esas cosas que
acabo de decir manualmente. Pero en algún momento del futuro no
demasiado lejano, hay una regla CSS
que lo hace por nosotros. Tamaño de fuente ajustar. Ahora si tuviera algún Garamond y
le di un valor de
tamaño de fuente ajusta nought, 0.58 punto naught
cinco octavos siendo la relación de aspecto de Verdana, luego darle un
tamaño de fuente de 16 pixeles, y automáticamente
lo haría 23.2 píxeles de alto. Para mí, esencialmente,
nuestro navegador sólo
hará esa pequeña ecuación que
acabamos de hacer por nosotros. Lo primero que tenemos control sobre cuando estamos pensando en cómo redoblar nuestras texturas
es el tamaño de fuente, pero los tamaños de fuente,
realmente no es un interés para nosotros. El x-height o la relación
de aspecto de la fuente es lo que nos
interesa. Podemos averiguar la relación de aspecto de las
fuentes usando una
calculadora de relación de aspecto en línea. Y luego podemos hacer cualquier
ajuste a los tipos de letra que usamos juntos para que
tengan la misma altura x en lugar de
la misma altura. No obstante, siempre queremos estar asegurándonos de usar nuestros ojos, confiamos en nuestros ojos y
entrenamos a nuestros IE. Porque si tuvieras algo
como Garamond y Verdana, hay tamaños tan drásticamente
diferentes que cuando intentas
hacerlos uniformes, siempre
van a
quedar un poco fuera. manera realista, esta es solo una de las muchas
cosas que debes considerar cuando encuentres tipos de letra
que funcionan bien juntos.
5. Visualización de la distancia: En el último video,
estábamos hablando de cómo
establecer tus píxeles altos para una tipografía basada en sus x
alturas o su relación de aspecto. Por supuesto, no queremos estar midiendo cosas en píxeles, ya
no porque todas
nuestras pantallas ahora funcionan en
base a píxeles de referencia. Un píxel de referencia es
solo del
mismo tamaño que un píxel si estás
usando un monitor de escritorio, y es un monitor de 96 DPI, la resolución de
la pantalla afecta cuántos píxeles es un píxel de
referencia, pero también lo hace cuán lejos se
mantuvieron los dispositivos de la cara del usuario. Desafortunadamente, diferentes dispositivos y diferentes pantallas pueden mostrar píxeles de referencia
al tamaño correcto con resultados
variables. Por lo que vale la pena entender
cómo funcionan. Hablaremos más sobre
cómo hacer referencia a los tamaños de nuestros textos más adelante. Pero antes de eso, quiero
tocar un punto
sobre el diseño que me encanta decir, que es que los diseñadores no
deben preocuparse por
el mundo real. Debemos preocuparnos por la
percepción de la gente sobre el mundo real. La cantidad de píxeles
en la pantalla no lo es. Lo importante es la
cantidad de píxeles en tu ojo. Me gusta referirme a estos
como píxeles perceptivos, pero la astronomía y la navegación
ya tenían un término para ello, que es minutos
de arco de minutos de arco. Un arco minutos es
básicamente el número de grados que
gira la tierra en un minuto, que es casi exactamente
160 de grado. Entonces, ¿por qué les hablo este término que usan los astrónomos
y los navegantes? Bueno, la razón por la que los astrónomos
hablan de minutos de arco es porque
hablemos de lo que podemos percibir de la tierra. Un minuto de arco es más o menos uno de nuestros píxeles perceptivos. Es lo mucho que realmente podemos
distinguir con nuestro ojo. Si te imaginas tu cabeza
ahora mismo como la Tierra, imaginas la
visión de 360 grados que tienes. Si das la vuelta la cabeza
y miras hacia arriba y abajo. Si tomas algún
movimiento de un grado hacia arriba y hacia abajo, y solo un
movimiento de grado izquierda y derecha. Y divides
los dos por 60. Acabas de
crear básicamente la cuadrícula de píxeles. Eso es lo que
en realidad se puede ver. Si algo es
menos de la mitad del tamaño de un minuto de arco, no
podemos verlo. Y la razón por la que medimos en grados o
minutos de arco es porque la distancia de nuestra IA una gran diferencia en lo
bien que podemos verlo. Entonces digamos que estábamos
midiendo algo en píxeles y estaba en una
pantalla, en un monitor. Los monitores suelen estar a
60 centímetros de la cara del usuario. Por lo que 16 píxeles de alto en ese
monitor serían 24 arcminutes. Te daré los
cálculos para eso después. Ahora si mostramos el
mismo texto de 16 píxeles en una pantalla de teléfono móvil, que típicamente sostenemos alrededor de 30 centímetros
de nuestra cara. Eso estaría más cerca
de 48 minutos de arco. Y en un iPad, 45 centímetros de
nuestra cara estarían mirando 36 minutos de arco. Por lo que este diagrama muestra
la diferencia en tamaño del
texto si cada uno de
estos dispositivos
mostraba píxeles reales
y todos ellos tienen la misma
pantalla de resolución de manera realista, porque mantiene su
teléfono más cerca a tu rostro, normalmente tiene una resolución
más alta. De hecho, Apple le dio al iPhone unos 300 puntos por pulgada o píxeles
por pulgada Pantalla Retina, precisamente porque lo sostienes 30 centímetros de tu cara. Y eso significa que un píxel es casi exactamente
un minuto de arco, lo
que lo convierte en la mayor
calidad
posible percibida para una pantalla de
teléfono móvil. Como otra nota al margen, es posible que hayas notado
este divertido símbolo después de los números en rojo. Esta cosa ligeramente inclinada que parece una
sola marca de comillas. Esto no es una sola
cita marcarlo como un símbolo primo se utiliza para
dos cosas en tipografía. Se utiliza para decir
cierto número de pies, y se usa para decir un cierto
número de minutos de arco. También puedes abreviar
esto escribiendo 48 AM, 48 amén o 48 hombres arco. Todos estos son estándares
aceptables. Sí, esa fue una forma muy
complicada de decir las cosas que están
más lejos parecer más pequeñas. Pero eso fue, para que
pudiera presentarte una de estas útiles calculadoras. Pones en tu distancia de
visualización, que normalmente va
a ser de 30 centímetros, 45 centímetros, o 60
centímetros para un teléfono, iPad o pantalla de TV, es posible que quieras calcular
ligeramente diferente una pantalla de visualización o si
incluso estás tratando con
interfaces de TV o películas, entonces en el tamaño percibido, puedes decir 20 o
22 minutos de arco. 28 a 22 minutos de arco se
acuerda para ser bastante cómodo
tamaño para la lectura, pero les daré algunos mejores cálculos
para que mucho más tarde. Y te dirá
el tamaño físico que
necesitarían los textos para estar en algo a esa
distancia si quieres ver Es
a esos
muchos minutos de arco. Una cosa que
notarás de cualquiera de estas calculadoras es que
la salida no está en píxeles y eso se
debe a que los píxeles en no un tamaño físico definido. Depende de la pantalla. O es hora de que volvamos
a los pixeles de referencia. Si miro el tamaño
percibido aquí arriba, notarás que
una de las opciones es píxeles de referencia aquí arriba. También notarás que
lamentablemente no es nada
traducible de un arco minutos. El tamaño acordado
de un píxel de referencia lamentablemente no tiene nada
que ver con nuestra percepción. Se basa en una pantalla
de 96 píxeles por pulgada, que estamos mirando
desde 60 centímetros de distancia, puramente porque ese es el tamaño
estandarizado de un píxel. De vuelta en los primeros
días de Internet, un píxel de referencia es igual
a 1.2789 minutos de arco. Entonces es un poco más grande que un píxel perceptivo
o lo que podemos ver. Y también es igual a alrededor de punto nada
nada 213 grados. Sería realmente útil para los diseñadores que se
preocupan por la percepción si acaban de hacer un pixel de referencia del mismo tamaño que un arco minutos. Pero no vamos
a hablar demasiado de píxeles de
referencia de todos modos, tocaremos que está ligeramente en el módulo de implementación, pero no vamos a
hablar demasiado de ellos. Y eso es porque no
hay demasiado uso, porque diferentes
dispositivos
realmente no los han adoptado a la perfección. Un papel importante del diseño y el desarrollo
front-end es
nunca confiar en una computadora. Hay que entender
lo que está haciendo detrás de escena porque muchos de ellos lo
van a hacer mal. Si combinamos todo lo
que sabemos sobre arcminutes y todo lo que sabemos sobre Aspect Ratio o
x-height de nuestro texto, deberíamos poder llegar
a algunos cálculos bastante buenos por nuestra tipografía. Miramos una cosa más. Si echamos un vistazo a este
artículo en el Journal of vision a partir de algunos
experimentos que
se hicieron en eficiencia de
lectura, velocidad de lectura, podemos obtener un cálculo bastante bueno para cuán grande nuestros textos deben ser. Si queremos que la gente
lea eficientemente,
estaríamos realmente castigando a nuestros lectores si
lo hiciéramos tan pequeño como posiblemente
pudiéramos para que fuera legible, queremos que sea cómodo y fácil para ellos leer rápidamente. El x-height ideal para la eficiencia de
lectura en su sitio es de nueve minutos de arco para el tamaño de la x-height. Esto se basa en realidad en
la investigación encontrando que el tamaño perfecto es de
seis minutos de arco. Pero vamos a
toparlo un poco. Así que vamos a asegurarnos de que estamos
atendiendo para toda la vista. En realidad, si estás haciendo
una aplicación donde los usuarios son quizás
un poco mayores o tal vez tengan un problema difícil
de ver. Es posible que desee empujar
esto todo el camino hasta 12 minutos de arco. Pero generalmente el tamaño
recomendado es nueve minutos de arco
para la altura x. Ahora si por ejemplo, traemos a Vedanta y
al Garamond de vuelta. Podemos simplemente veces nueve por la relación de aspecto de
estos dos tipos de letra. Y eso haría Garamond
24 arcminutes y total, mientras que Madonna es de sólo
16 minutos de arco en total. O para volver a poner esto en una medida que
todo el mundo pueda entender. Podemos mirar píxeles de referencia. Garamond sería de 18.8 píxeles de
referencia, mientras que para Donna serían
12.5 píxeles de referencia. Esto haría Garamond
2.4 milímetros en un móvil y 4.2
milímetros en un escritorio. Y haría para
Donna 1.4 milímetros en un móvil y 2.8
milímetros en un escritorio. Podemos ver que el
tamaño recomendado es bastante diferente. En realidad, ninguno de
ellos es ni siquiera tan cerca de 16 píxeles de referencia. Ahora nos guste o no, todavía
vamos a necesitar píxeles de
referencia
de vez en cuando. Entonces, ¿cómo calculé
ese último número? Sabemos que un pixel de referencia
equivale a 1.2789 minutos de arco. Entonces si divides nueve por 1.2789, obtienes algo alrededor de siete. Por lo que podríamos decir que
siete píxeles divididos por la relación de aspecto te da la
altura de píxel de referencia ideal para la tipografía. Como diseñadores, estamos
mucho más preocupados por los píxeles que la gente ve que los que
están en la pantalla. Por lo que no medimos
las alturas del texto usando los píxeles
en la pantalla. Lo hacemos usando arcminutes, que es 160º de un grado de las pocas semanas y vemos a nuestro
alrededor cuando
movemos nuestra cabeza alrededor. El tamaño ideal para el texto
para que las personas lean de forma rápida y eficiente es
entre 612 arcminutes. Idealmente apuntamos a nueve justo en el medio para que estemos
atendiendo a todas las personas. Si tienes alguna información
que demuestre que la mayoría de tus usuarios tienen una vista
particularmente buena o una vista particularmente mala. Es posible que quieras
mover esto un poco más a uno de los dos extremos. De lo contrario, generalmente
vamos a apuntar a una altura x de nueve minutos de arco. Hola, no hay forma el dispositivo que estamos mirando
sepa cuán lejos nuestras caras. A pesar de que la gente ha tratado de
desarrollar pequeños pedacitos de
tecnología que va a hacer eso. Por lo que tenemos que lidiar
con las unidades de medida que CSS nos da. Los veremos
un poco más tarde. Todo lo que tenemos que preocuparnos
por ahora es que no hay un tamaño mínimo
para la tipografía. Depende
del dispositivo y cuán
lejos las personas generalmente sostienen
ese dispositivo de su cara. Y que podemos usar una calculadora de tamaño de arco
minuto para que podamos conseguir un
tamaño uniforme entre móvil, tablet y escritorio y
posiblemente TV y relojes. Deberíamos quererlo.
6. Texto grande: Ahora sabemos que el tamaño
óptimo para nuestros textos, para que la persona
promedio lo lea de forma rápida y eficiente es que la altura x debe ser de nueve minutos de arco. Hola, pero ¿qué pasa con todo el
resto del texto en la página? ¿ Qué pasa con los encabezados
o el texto en los botones? Todas estas cosas necesitan
destacarse un poco
porque el texto de los botones
u otros elementos de la interfaz son cosas que vamos a escanear en lugar de estar
leyendo activamente y los encabezados necesitan
agarrar nuestra atención
y jurados en. Bueno, la legibilidad
no es nuestra preocupación con estos otros bits de texto o botón tiene dos
palabras en él puede ser el encabezado tiene más
cinco o seis palabras. No nos preocupa si es eficiente que alguien
leyera aquellos con elementos de
interfaz de usuario estaban
preocupados si es
fácil de detectar fuera de la
esquina de nuestro ojo y con encabezados estaban preocupados
si tiene impacto y establece el tono del mensaje
del resto del texto. Esencialmente, podemos hacer todas
estas cosas un poco más grandes que lo que es cómodo para grandes
áreas de lectura, porque eso resuelve
otros propósitos. No obstante, hay algunas
otras cosas a tomar en consideración que
no se trata de legibilidad, sino que encajan bastante bien con lo que
acabamos de hablar. Una cosa que habrás notado acerca de todos estos
diferentes dispositivos. Tu reloj, tu
teléfono móvil, tu iPad, tu monitor, tu televisión, es lo grandes que son. Cuanto más lejos están de tu cara, Cuanto
más grandes son. Y no me refiero sólo a lo
físicamente grandes que son. Quiero decir, toman más arcminutes si
están más lejos. Si actualmente estás sentado en un cómodo 60 centímetros
de tu monitor en este momento y sostienes tu teléfono
móvil arriba o cómodo a 30 centímetros
de tu rostro, notarás que
aún puedes ver tu monitor, tu teléfono móvil cubre tal vez
una cuarta parte de la pantalla. Si tienes un teléfono masivo para la mayoría de nuestros
activos, aún menos. Por lo que podríamos decir que
tenemos muchos más minutos de arco disponibles en una pantalla
de escritorio disponibles en una pantalla
de escritorioque en una pantalla móvil. Nuevamente, probablemente
un poco obvio, pero es posible que quieras preguntar
por qué generalmente no nos gusta tener cosas grandes
realmente cerca de nuestras caras. Idealmente, tampoco queremos grandes titulares obstructivos
metidos en nuestra cara. Si miras una cartelera, el texto grande es masivo y el
texto pequeño es bastante pequeño. La relación entre los textos de
encabezamiento y el texto corporal en una
cartelera es masiva. Por supuesto, una cartelera tiene un propósito
bastante diferente
a un teléfono móvil. Pero notarás
que cuanto más pequeño sea el dispositivo y cuanto más cerca lo
mantengas a tu cara, también, más pequeños serán los encabezados. Si tenemos un gran poco de texto de banner a través de
la página de inicio de un sitio web o un encabezado en la
parte superior de una aplicación web. El número de
minutos de arco se va a reducir en dispositivos que nos mantenemos
más cerca de nuestras caras. Simplemente tenemos menos minutos de arco
disponibles en la pantalla. Y tampoco nos gusta tener grandes cosas demasiado
cerca de nuestra cara. Otra cosa a tomar nota
con gran tipografía, posible
que hayas notado algunos
monitores en estos días,
algunos televisores
y monitores auténticos ostentosos han sido curvos y se preguntan ¿cuál
es el punto en esos? Bueno, aquí tienes un punto
interesante para ti. Si tus ojos están
actualmente posicionados justo en el centro
de tu pantalla, tienes más minutos de arco
en el centro de tu pantalla, entonces tienes en la parte superior izquierda de tu pantalla, por ejemplo. Porque la parte superior izquierda
de tu pantalla está siempre tan ligeramente más
lejos que el medio. Y por eso,
todo parece abultarse hacia el exterior
cada vez tan ligeramente. Hay una especie de distorsión de la
lente. Cuando el Partenón fue
construido en la antigua Grecia, lo
construyeron para que ninguno de
los muros sea recto. No hay
líneas rectas en el Partenón. Todo sobre el Partenón corrige tan levemente
para este tipo de distorsión de lente que nuestros ojos tienen cuando se cortaron las primeras
tipografías, cuando se cortaron las
piezas metálicas físicas reales de tipo, las letras más grandes fueron capturadas con un peso
óptico diferente a las letras
más pequeñas para corregir para este tipo de distorsión de lente
que tenemos en nuestro ojo. Mencioné esto antes. Si nos fijamos en una tipografía
de antes del siglo XX, cuando el proceso de corte del tipo era un
poco más manual, el cortador tipo daría un tamaño óptico más pequeño u óptico esperando a
las letras más grandes. Tendrías que ser un
muy agudo y tipografía más puro para querer hacer algo
parecido a esto hoy, pero esto es casi posible. Ahora con tipografías variables, existen múltiples razones
cuando estamos trabajando nuestro
sistema tipográfico de que
no vamos a hacer que
la tipografía para los encabezados sea la misma
tipografía que el cuerpo. Pero uno de ellos realmente
debería ser que en realidad
no aparecen igual
de todos modos. Hay un puñado
de familias de tipografía disponibles donde el diseñador de
tipos ha hecho una ligera variación para
el encabezado y para el texto del cuerpo para que
puedas usarlas en diferentes tamaños. Esta es una opción realmente agradable si quieres usar
el mismo tipo de letra para los textos de encabezado
y el texto del cuerpo sin parecer un poco
raro y distorsionado para nosotros. Estaremos hablando de
estos un poco más adelante. Para texto de encabezado o texto de interfaz de usuario. No necesitamos preocuparnos demasiado
por lo fácil que es
leer porque
normalmente no son demasiadas palabras
siempre y cuando esté por encima de ese tamaño de legibilidad del que
hablamos en el último video. No queríamos ser
conscientes aunque que las
diferentes pantallas tienen
diferentes cantidades de minutos de arco en general, cuanto más cerca
las sujetamos a nuestra cara,
más pequeña es la pantalla. Y por lo tanto, deberíamos
hacer estos bits más grandes de tipografía un
poco más pequeños en comparación porque
no es tan esencial que
salten
a nosotros cuando lo estamos sosteniendo más cerca de nuestra cara. Y no tenemos
tanta pantalla inmobiliaria. Y como lección de
topografía
súper, súper avanzada, hablé un poco sobre
cómo el dimensionamiento óptico va a aparecer texto
más grande y más grande por el hecho de que algo que es
más arcminutes grande tiene un poco
de distorsión de la lente. Si quisiéramos utilizar la misma tipografía para los
encabezados y el cuerpo, podemos elegir una familia de fuentes que
tenga una fuente de encabezado específica, que en realidad va a tener una óptica ligeramente más baja dimensionamiento. Y mucho más tarde nos pondremos en el
tema realmente emocionante de las fuentes variables, lo que podría permitirnos controlar este dimensionamiento óptico a un nivel
mucho más granular.
7. Longitud de línea: Ahora tenemos un
cálculo bastante bueno para elaborar el tamaño de fuente ideal para
grandes cuerpos de texto. La siguiente medición que
quiero mirar que ayuda con la legibilidad es
la longitud de la línea. Medimos la longitud de la línea
en caracteres por línea. Pero como cuántos caracteres, incluidos los espacios
aparecen en cada línea, probablemente
hayas
escuchado alguna regla en
algún momento que dice que debe
haber 50 y 70 caracteres por línea
para la longitud de línea ideal. Digo algo así como 50
a 70 caracteres por línea porque cada
regla que he escuchado así tiene números
ligeramente diferentes. Todos ellos en realidad se
basan en alguna investigación de atrás en 1971 que decía que la
longitud ideal del personaje es de entre 5075 caracteres por línea. Y así lo ideal es
que quieras apuntar a unos 60 caracteres por línea. Y esta es una de esas reglas
por las que no puedes simplemente aprender sobre tipografía si estás lidiando con la tipografía web
específicamente, porque no estaban probando
con tipografía web en 1971. Y cuando la gente finalmente
comenzó a probar en 98 y luego
a principios de la década de 2000, encontraron que la
longitud de línea óptima para la tipografía en una pantalla digital era de
95 caracteres por línea. Eso es de 95 caracteres
por línea es la longitud óptima
para la velocidad de lectura y eficiencia si estás leyendo fuera una pantalla de computadora ahora
antes de que te apresures y te vayas y cambia cada
diseño digital que hayas tenido hecho para que los textos sean 95
caracteres por línea. Hay algunas otras cosas que creo que debemos considerar. En primer lugar, todavía sólo
estamos hablando de legibilidad. La legibilidad ha sido una especie
de usabilidad y hay algo diferente que
los diseñadores piensan mucha experiencia de usuario. Cuando la gente ve un bloque de
texto en una pantalla de computadora, sienten que van
a leer más rápido y de
manera más eficiente con una longitud de línea
más corta que 95 caracteres por línea. Y sienten que están
haciendo más progresos. Se siente como si estuvieran leyendo
más rápido incluso si no lo son. A lo mejor es por
la sensación de progreso que
obtenemos cuando llegamos al final de la línea y nuestros ojos se devuelven al inicio
de la siguiente línea. O tal vez sea esa sensación
satisfactoria cuando
llegamos a desplazar nuestro botón
del ratón hacia abajo, sabiendo que hemos
completado la lectura una pantalla completa por cualesquiera que sean
las razones por las que debemos tener cuenta que 95 caracteres
por línea podría ser la mejor longitud de línea aceptada para legibilidad en
una pantalla de computadora, pero no significa que sea la
mejor experiencia para los usuarios. También queremos ser conscientes
de que los caracteres por línea son potencialmente
bastante ambiguos. Cuando estábamos mirando
el tamaño de nuestro texto, veremos un
arco minutos y
estábamos mirando
la relación de aspecto. Hay algunos
tipos de letra que son mucho más delgados que
otros tipos de letra. Tenemos grandes letras anchas y diminutas letras delgadas
dependiendo de qué tipo de letra elijamos. Y es posible
que leamos más rápido en una longitud de línea más larga
en una pantalla de computadora, debido a que la pantalla de la
computadora
suele estar a 60 centímetros
de nuestro ojo, mientras que el material impreso
como un periódico , revista, o un libro suelen estar unos 45 centímetros
de nuestro ojo. Esto es, por supuesto,
toda especulación. Mi punto es que ninguna de las investigaciones
que tenemos actualmente sobre longitud de
línea es lo suficientemente precisa para que podamos usarla como regla sólida. Creo que esta es una de las
pocas instancias en las que se puede ignorar un poco la ciencia e ignorar un poco la
experiencia del usuario, y mirar lo que la mayoría de la
gente está haciendo en sus sitios web para ver cuál es
nuestra los usuarios están más acostumbrados a. Y eso es de vuelta al
cuadrado uno entre 4575 caracteres por línea. Si, sin embargo,
alguna vez estás tratando con tipos de letra chinos, japoneses y coreanos, quieres apuntar a
algún lugar alrededor 15 a 30 caracteres por línea para algo sobre iPad
libro distancia de tu cara o todo el camino
hasta 40 en una pantalla de computadora. Yo recomendaría empujar
al extremo más alto de
estos números sin embargo, porque cada vez más sitios web están haciendo préstamos de línea más largos, posiblemente basados en la ciencia o posiblemente por otras razones. Entonces las personas de horas extras se están
acostumbrando cada vez más a leer longitudes de línea más largas
en las pantallas de computadora Mac. Y va a hacer que la
lectura sea
más rápida y eficiente para tus
usuarios si ese es tu objetivo. Por esas razones,
recomendaría tratar de apuntar a unos 75 caracteres por línea
fue en una pantalla de computadora. Y ahora probablemente podamos
especular que 60 caracteres por línea es
bastante bueno para un iPad, porque sabemos que esa
era la longitud óptima para el material
impreso y ese es más o menos el mismo lugar que
sosteníamos un iPad. Y luego queremos
reducirlo un poco más cuando pasamos
a una pantalla móvil, posiblemente en algún lugar de la región de 50 caracteres por línea. Y de nuevo, ten en
cuenta que esta no es una ciencia exacta en la que te he dicho los experimentos
se basan, pero también ten en cuenta que
cuando otras personas intentan decirte
la cantidad correcta de caracteres por línea, tampoco
están basando eso
en una ciencia exacta. Lo que sería
absolutamente brillante como si pudiéramos variar un
poco la línea en función de cuán amplios son
los personajes en
la tipografía. Y afortunadamente con CSS, podemos hacer esto porque podemos controlar
el ancho usando unidades EM en lugar decir cuántos caracteres
por línea, por ejemplo. Y vamos a estar
mirando esto un
poco más tarde cuando
implementemos el tipo de cosas de las que estamos hablando en este momento. Medimos longitud de línea
con caracteres por línea, y eso son todos los
caracteres especiales, todos los espacios, cada carácter
que hay en la línea. Una investigación original encontró que 50 a 75 caracteres por línea es el mejor para la
velocidad y eficiencia de lectura. Pero esto se basó en la impresión. Al mirar una pantalla de
computadora, resulta que los
caracteres óptimos por línea es de 95. No obstante, la gente siente que está haciendo más progreso
con líneas más cortas. Y por lo tanto una línea
más corta puede ser una mejor experiencia de usuario
aunque sea peor para la legibilidad. Y se cree ampliamente, pero aún no se ha comprobado
que quisiéramos menos caracteres por
línea a medida que acercamos el dispositivo a nuestra cara para intentar igualar
esto con lo que son
nuestros usuarios que actualmente se utiliza para usar otros sitios web. Personalmente recomendaría
ir por algo así como 75 caracteres por
línea en un escritorio, 60 caracteres por línea en un iPad y luego 50
en un dispositivo móvil. Pero vas a querer ajustar esto
hacia arriba o hacia abajo ligeramente
dependiendo de si prefieres que tu usuario tuviera una mejor experiencia o
quieres que lea más rápido.
8. Altura de línea: Tenemos algo que
se parece una ecuación exacta para
elaborar el tamaño de la fuente. Tal vez queramos jugar un poco
con él. Cuando lo miramos,
tenemos algo que es una especie de ecuación para elaborar
la longitud de la línea, pero en gran medida basada en lo que mayoría de las otras personas están haciendo lugar de lo que es
mejor para el lector. Y luego cuando
miremos la altura de la línea, va a ser casi enteramente por mí y confiando en
nuestro propio juicio, nos estamos volviendo poco a poco menos
científicos a medida que trabajamos a través de cada una de estas secciones
cuando escribir nuestro CSS. Y por lo tanto en el desarrollo web nos referimos a esto
como alturas de línea. Pero generalmente los diseñadores
o cualquiera que esté lidiando con la tipografía
se refiere a esto como líder. Y eso es porque
pondría pequeños trozos delgados de plomo entre las líneas de las tipografías metálicas de estilo
antiguo. Para entender los temas alrededor de las alturas de
línea o la lectura, necesitamos entender qué
es lo que hace
más eficiente que las personas lean una línea
de textos más larga en un monitor de computadora. Nuestros ojos en realidad no se detienen en cada letra
y probablemente ni
siquiera se detienen en
cada palabra, dependiendo de lo rápido que leas. Hacemos estos movimientos
oculares saccádicos donde nuestros ojos saltan de
un punto a otro, que encuentra escaneo posiblemente
tres o cuatro palabras a la vez antes de
hacer otro salto. Mencioné esto antes. Es por eso
que con algo como Futura, no
puedes tener un
OH y una que se
vea demasiado similar
porque probablemente no están en el
centro mismo de tu campo de visión y posiblemente
un poco borroso. Ahora para hacer nuestro movimiento
ocular saccádico
al siguiente
lugar óptimo para que podamos
recoger el número óptimo
de palabras que podamos. En realidad es algo complicado. Tenemos que saber desde
las alturas de línea, la longitud de la línea, y
el tamaño de fuente exactamente. tanto que el lugar óptimo
para que saltemos en I2 a continuación, este movimiento ocular saccádico
va a ser mucho más fácil si estamos haciendo un pequeño salto a lo largo de
una línea recta, entonces si estamos haciendo un gran salto, un ángulo de vuelta al
inicio de la siguiente línea. Incluso el lector más
competente
va a saltar
de vez en cuando, especialmente si se
trata de una altura de línea, tamaño de
fuente o longitud de línea a la
que no están acostumbrados
particularmente. Tener una longitud de línea más larga y por lo tanto menos
líneas significa que más de tus movimientos
oculares saccádicos están a lo largo de una línea plana estándar, pero agrega que la
longitud de la línea aumenta. Vamos a estar inclinando la
cabeza de izquierda a derecha, todos forzando nuestros
ojos de izquierda a derecha para recoger todas las palabras. Por eso sugerí en el último video
que podríamos leer longitudes de línea
más largas en una pantalla de
escritorio que en un libro, por
ejemplo, puramente porque si el tamaño del tipo es
relativamente similar, la longitud de la línea es menos minutos de
arco en un monitor. Cuando se trata de alturas de línea, realmente
queremos
estar mirando lo que mayoría de los otros sitios web están haciendo. Y la mayoría de los sitios web dicen que
su altura de línea debe estar alrededor del 130 al 150 por
ciento de la altura del texto. Por ejemplo, si decidiste que el 140% es la mejor altura de línea y tu altura de texto
fue de 20 minutos de arco. Hola, estarías apuntando a una altura de línea de 28 arcminutes. Cuáles son los factores que nos
indicarían hacer un 150 por ciento de alturas de línea
en comparación con el 130% de altura de línea. Bueno, lo primero es que si la longitud de
tu línea es
relativamente larga, quieres un
poco extra de altura de línea. Significa que cuando haces ese movimiento ocular saccádico regreso al inicio
de la siguiente línea, los ángulos no tan apretados. También está agregando un
poco más de espacio para respirar, un poco más de espacio en blanco alrededor de
lo que de otra manera sería un
bloque oscuro
bastante denso de texto. Ahora veremos
esto más adelante, pero una técnica común
es mirar una página de texto y entrecerrar los
ojos tan ligeramente, o agregar un
filtro de desenfoque a la página. Idealmente, queremos que
la página
tenga entonces un tipo bastante consistente de color gris en
lugar de grandes áreas negras, oscuras, gruesas y densas. Al mirar un bloque de texto, mayor parte del texto no está en el centro de nuestro
campo de visión, por lo tanto, se ve borroso. Queremos que ese texto
se vea agradable para nuestro usuario y además no
luzca desalentador y aterrador. Entonces por esta razón, si
elegimos una tipografía como Vedanta, que tiene una altura x realmente
alta. Por tanto, por definición, tiene ascensores
y descendientes bastante pequeños. Por lo tanto, queremos un
poco más de line-height para estos tipos de letra
con una gran altura x. Porque cuanto más cerca se
acercan
el uno al otro, más densos estamos haciendo el color en la
página y más desalentador estamos haciendo que
todo lo que busca son usuario. Si tenemos una relación de
aspecto más grande, una mayor
relación x-altura a altura de la tipografía. También queremos aumentar un poco esa
altura de línea. Entonces, finalmente, la única cosa
que nos va a hacer cambiar la altura de la línea está puramente
basada en nosotros mirándola. Tenemos que empezar a confiar nuestra propia percepción en
algún momento y ver
lo densa y desalentadora
que se ve en la página. En términos generales,
si tienes dudas sobre dos posibles
alturas de línea para un bloque de texto, probablemente vaya por la más grande. Realmente no te
preocupas por los bienes raíces cuando estás tratando con aplicaciones web
digitales. Y si funciona mejor, siéntete libre de empujarlo por
encima de un 150 por ciento. He visto un montón de sitios web
muy buenos empujar todo el miced hasta
200% line-height. Nunca quieres
apegarte rígidamente a ninguna de estas reglas
ni a cualquier otra regla. Si funciona bien, entonces funciona bien
lo que debes
hacerlo dependiendo de cuán experimentado esté el
usuario en la lectura, van a hacer movimientos
oculares saccádicos o saltos de diferentes tamaños a lo largo de la línea hasta una cierta longitud de línea. Estos saltos son más fáciles y precisos que saltar de
nuevo a la siguiente línea. Si la longitud de la línea es
relativamente larga, estaríamos haciendo el movimiento del ojo
saccádico a la siguiente línea, un ángulo mucho más apretado. Por lo que queremos aumentar la altura de la línea a medida que
aumentamos la longitud de la línea. Una técnica común
que veremos más adelante para evaluar nuestros bloques de texto
es desenfocar la pantalla. El bloque de texto debe tener un color relativamente consistente, pero tampoco debe ser demasiado
oscuro en ninguna regla de 0.1 para reducir la densidad de
este color si se trata de una tipografía
con una gran altura x, también agregó más line-height. Una tipografía con una gran altura x naturalmente tiene más del
grueso de la tipografía. Más cerca de la siguiente línea, solo
agregamos un poco extra de espacio
para respirar ahí. En realidad vamos a basar la
regla de la altura de línea mucho más en nuestra propia percepción
y nuestros propios ojos estaban apuntando
a algún lugar alrededor de ciento treinta, ciento cincuenta por
ciento del texto altura. Y lo estamos haciendo
principalmente porque eso es
lo que la mayoría de los otros
sitios web están haciendo. Hay un montón de sitios web
que empujan más allá de esto, un 150 por ciento hasta un 170, o a veces incluso un
poco más lejos. Así que siéntete libre de empujar más allá este límite superior si funciona
bien en tu aplicación.
9. Localización: A lo largo de esta sección
sobre legibilidad, he estado hablando
exclusivamente tipografía latina o texto latino. Y lo que quiero decir con eso es el alfabeto que estás
viendo actualmente en la pantalla. Usted puede, de vez en cuando
escucharlo referido como alfabeto romano. Estoy evitando eso
porque la palabra Roman ya significa algunas
cosas en tipografía. Ahora un par de cosas rápidas
sobre nuestro alfabeto latino. Es una especie de extraña. Un solo glifo. Recuerda, un glifo es
una de las formas, uno de los símbolos
en el alfabeto podría ser un sonido fonético. Entonces, por ejemplo, cómo
la H hace un sonido, podría combinarse con
diferentes glifos como el th de los dos crear un
sonido fonético para múltiples glifos. Cuando ponemos un espacio, esto significa que una palabra ha terminado
y la siguiente ha comenzado. Pero también tenemos
palabras compuestas como nosotros. Podríamos decir dónde y a veces podríamos poner un apóstrofe o un guión para decir
que las palabras que se están agravando y
a veces no lo hacemos, un glifo podría ser una
palabra entera como por ejemplo, I. Y en muchos sentidos el
alfabeto latino es bastante raro, y probablemente el idioma
inglés es el más raro de todos. Pero para así entendemos
algunas de las reglas, primer lugar, siempre
va de izquierda a derecha. Nunca va de
arriba a abajo. Nunca va de
derecha a izquierda. Y empezamos la siguiente línea. Si miramos aquí esta
frase, ¿cómo cambiará la pandemia
del virus del coronavirus? Ramadán para musulmanes, el
texto latino generalmente siempre se rompe en un espacio a menos que haya una palabra particularmente
larga donde nosotros, podría poner una guion n, donde se tiene un pequeño
guión al final de una línea para decirte que la palabra se ha roto
a través de la línea. Ahora estas reglas pueden cambiar bastante para
diferentes idiomas. De hecho, incluso sólo esa regla de
guiones que mencioné, algunos idiomas podrían tener el guión al inicio
de la siguiente línea. Y algunos idiomas podrían
tener una separación de palabras
al final de una línea y
el inicio de la siguiente. Ahora cuando creamos nuestro breve, dije que es importante saber para qué idiomas
estás creando, pero también si estás teniendo una conversación con tu
cliente sobre los idiomas, hay bastante pocas cosas de las que quieres hablar con
ellos porque algunas reglas de idiomas son
menos estrictas que otras. A través del resto de este video, te
voy a dar algunas cosas de fuego
rápido que
buscar cuando se trata
de diferentes idiomas, sería
imposible
para mí siquiera saberlo, mucho menos
explicarte cada regla individual con
cada alfabeto individual. Eso es probablemente
tantos alfabetos en el mundo como hay
videos en todo este curso. Ahora una obvia con la
que podrías tener que lidiar. Es posible que hayas notado que he
configurado mi navegador en árabe. Las pestañas están en los máximos derechos. Todos los botones y todo son al
revés. Y si miro los sitios web de
Al-Jazeera en árabe, se
puede ver que todos los
textos que van de derecha a izquierda como diseñador
y definitivamente como desarrollador vale la pena
también señala que general todo
cambia de derecha a izquierda. Entonces el icono de búsqueda, que normalmente estaría en la parte superior derecha está ahora
en la parte superior izquierda, generalmente solo
cambiaríamos un valor y la parte superior
del HTML para decir que es
texto de derecha a izquierda por lo que podemos crear fácilmente todos
los estilos para ello. Hablaremos de eso más en
la sección de implementación. Pero vale la pena ser
consciente si eres un diseñador que a veces
es posible que necesites crear los
diseños árabes separados al resto de los diseños
para otros idiomas. Porque los botones, etc., se
van a mover de izquierda a
derecha a derecha a izquierda a menudo o sin duda los lugares
mayoritarios en los que he trabajado. Normalmente no es el caso de que un diseñador crearía diseños
separados para el árabe. Simplemente desarrollaríamos todo para cambiar
al otro lado. Pero realmente todo depende del cliente con
el que estés trabajando. En términos generales, el texto
árabe aparece aproximadamente del mismo
tamaño que los textos latinos. Entonces, a menos que haya una buena razón, normalmente se pueden mantener los mismos tamaños de texto
y alturas de línea, pero podría depender
bastante en gran medida qué tipo de letra esté utilizando
para los textos árabes. Una cosa final a
tener en cuenta con árabe es porque
vas de derecha a izquierda. Si debes citar
algo en medio de algunos textos árabes en un idioma diferente que
va de izquierda a derecha. Ese texto seguirá leyendo de
izquierda a derecha o viceversa. Si cita algo de árabe en medio
de un texto de idioma
diferente, ese texto seguirá
yendo de derecha a la izquierda. Esto está bien. Puede ser
algo bastante difícil de tratar. Pero una cosa a
tener en cuenta es que
si se rompe a través de una línea, podrías terminar teniendo un salto de línea en una dirección
diferente. Si alguna vez tenemos unas citas
en un alfabeto que va en una dirección diferente en medio de algunos textos. Lo ideal
es envolverlo en algún tipo de lapso para evitar que tenga una cita del MIT de salto de
línea. texto japonés es posiblemente
el único idioma, el único alfabeto donde es posible que desee aumentar un poco el
tamaño. A veces la gente
va a subir el tamaño del texto aproximadamente un 15% puramente
porque lo han traducido al japonés. Y eso es porque hay
muchos personajes que son increíblemente complicados
con el chino, hay una
versión simplificada del alfabeto. A veces con los
japoneses, hay ciertas letras o ciertos
glifos que no se puede evitar. Tan a menudo la
gente podría subir el tamaño. Otra cosa con los
japoneses es que no necesariamente
hay espacios. Estoy en la página web de la BBC en este momento y a veces
hay espacios, pero exactamente cuándo y dónde
aparecen estos se pueden debatir ligeramente. Es totalmente
aceptable escribir japonés sin espacios en absoluto. Y este pequeño
signo de puntuación del círculo se utiliza
ocasionalmente para marcar el final de una frase un
poco como una parada completa. Ahora algo de lo que
volveremos a hablar más adelante es la puntuación colgando. Si este pequeño
símbolo de círculo apareciera alguna vez, por qué al final de
la línea de aquí, no
se rompería
en una nueva línea. Se colgaría del
margen como en él
aparecería en el
área blanca a la derecha, a menudo
se ve gente
colgando puntuación cuando escriben una
cita en textos latinos, porque la comilla lo hará normalmente aparecen al
inicio de la línea. Y por lo tanto
la comilla cuelga sobre el margen en el
lado izquierdo. Por lo que parecerá empujar
hacia fuera al margen. Si bien tenemos esa misma
regla con el japonés, este pequeño círculo aquí, hay parada completa
o pasar
el rato en el margen si aparece
al final de una línea, hay una regla CSS para línea rompiendo llamado
salto de línea, salto de guión de línea. Si ponemos esto en estricto, detendrá partes de sílabas
japonesas que
cruzan la línea. En ocasiones un símbolo japonés solo
puede ser parte de una sílaba. Muy parecido a cómo
un solo glifo en inglés hace un solo sonido
fonético, pero solo parte de una sílaba. Podemos usar esta regla CSS, salto de
línea estricto para detener una parte de una sílaba
rompiendo a la siguiente línea. O si quisiéramos que fuera completamente
justificado sin espacios, podemos escribir line break loose, y eso permitirá que se
rompa a la siguiente diapositiva. Hay ciertas reglas en el código único que
configuras tu página para que sea. Normalmente en la
parte superior de tu página, tendrías algo así como
el Unicode es igual a UTF-8. Aunque hay
un poco diferentes a los códigos únicos como ascii, estos códigos establecerán
ciertas reglas para las cuales glifos pueden romperse en una nueva
línea y cuáles no pueden. Estas se actualizan con bastante frecuencia, por lo que no voy a
entrar en ningún detalle aquí, pero de vez en cuando, es posible
que necesites comprobar
cuáles
son las reglas unicode para lo que puede y no puede
romperse en diferentes idiomas . En
lenguas del sudeste asiático como por ejemplo, atar los espacios no aparecen
entre palabras específicas, sino que en realidad aparecen
al final de una frase. El sitio web sabe cómo
y dónde irrumpir en una nueva línea porque UTF-8 ahora tiene reglas ahí
sobre dónde
puedes y no puedes irrumpir en la siguiente línea en tailandés. Pero algunos
idiomas del sudeste asiático aún no tienen roles en UTF-8, Unicode. Y algunos sitios web todavía tienen un pequeño símbolo extraño donde solías
poder agregar un espacio entre palabras sin que aparezcan
físicamente en la página web para ayudar a informar
al navegador donde
podría romperse de línea. Por ejemplo, quizás
en algún lugar por aquí sea el final de una palabra y el comienzo de la siguiente. La gente utiliza para insertar
un símbolo que
no tenía espacio visible pero actuaba
como un espacio en el sitio web. Ahora esos solían ser muy
problemáticos porque se podían
sumar esos espacios no son fácilmente poder
ver que estaban ahí. Pero también podrías agregar múltiples en un solo lugar
sin darte cuenta. Para la mayoría de las lenguas del sudeste
asiático, esto ya no es un problema. Pero si estás tratando con
un arrendador, usa el lenguaje, existe la posibilidad de
que
aún pueda utilizar estos espacios
invisibles. Por último, solo quería decir un par de cosas sobre coreano. Ahora en coreano otra vez, sí tiene algunas reglas ligeramente
diferentes sobre si se puede romper media palabra, cada símbolo y
coreano es una sílaba. Múltiples sílabas pueden,
por supuesto, hacer una sola palabra. ¿ Se puede romper media palabra? Es otra cosa que
vas a querer preguntarle
a tu cliente o a tu jefe. Lo interesante con el coreano es cada símbolo es una
sola sílaba, pero cada sílaba está
formada por sonidos fonéticos. El coreano es en realidad un alfabeto
fonéticamente perfecto. Esta primera sílaba
en la primera línea, por ejemplo, dice NAM. Y esta forma L
siempre es un sonido y luego siempre
es un sonido, y el cuadrado es
siempre un sonido. Cada uno de los
símbolos fonéticos se llama OGM y el alfabeto
se llama Hangeul. Ahora, la tipografía podría
guardarse de dos maneras diferentes. Algunas tipografías guardan cada pieza individual
de la sílaba, cada OGM como un glifo
separado y algunos tipos de letra guardan
toda la sílaba como un glifo. La segunda opción es mucho
más preferible en estos días, pero existe
la posibilidad de que estés lidiando con la primera. Esto podría ser importante cuando
terminas por tener que trabajar
con una carrera y tipografía en algún momento
que técnicamente hay dos formas diferentes de
salvar los glifos. Eso es todo lo que realmente
quería decir en este punto sobre
la localización. Hay un millón de
cosas más que podría decir. Este fue un video de fuego rápido con múltiples cosas diferentes que
hacer con diferentes alfabetos. Espero que haya sido de ayuda.
10. Resumen: Hay múltiples
etapas hasta la lectura, desde identificar
las formas en la página hasta combinarla con
cosas que hemos
aprendido previamente , formando una opinión. Y luego los lagos están recordando esa información
y esa opinión. Como diseñadores y desarrolladores, no
podemos exagerar
la primera etapa, simplemente haciendo que las formas sean
fáciles de identificar. En su mayoría me he
centrado en esto también. Pero por favor no olvides que alguien que
adquiera información rápidamente puede ser inútil
si no formaba una
opinión y la recuerdan. En este momento espero que formen sus propias opiniones sobre
cualquier cosa que tenga que decir. Una vez que hemos elegido una
tipografía, las variables, podemos controlar el tamaño, la longitud de
la línea y
la altura de la línea. Podemos usar la investigación para trabajar
mejor todo esto. Pero los
ajustes finales siempre vendrán de tu ojo
experto entrenado. Cuanto más practiques, mejor obtendrás. A veces podríamos
entender a nuestros usuarios lo suficiente como para alejarse poco
del investigador. Si nuestra aplicación
es para personas mayores, posible que
queramos hacer ese tamaño de
fuente un poco más grande. Si estamos trabajando con académicos, podemos hacer que la
longitud de la línea sea un poco más larga porque esto
les permite leer rápido. Bueno, como estas variables
mencionadas anteriormente, longitud de
línea,
alturas de línea, y tamaño de fuente, también
podemos controlar el estilo, haciéndolo negrita o cursiva y coloreando la tipografía, por
ejemplo. Normalmente, utilizamos estos
atributos para ayudarnos a crear una mejor
jerarquía visual en nuestra página y para agregar un poco más de estilo
y carácter a nuestro diseño.
Rob Sutcliffe, UI Designer / Developer
