Post Actualizado en julio 25, 2013


Legibilidad – haciendo a las páginas web fáciles de leer

Normal 0 21 false false false ES X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:”Tabla normal”; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:””; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:”Calibri”,”sans-serif”; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:”Times New Roman”; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} Legibilidad – haciendo a las páginas web fáciles de leer    No […]

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

MicrosoftInternetExplorer4


/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Legibilidad – haciendo a las páginas web fáciles de leer

  

No use demasiados tamaños de fuente

 Los tamaños de fuente son un gran diferenciador. Funcionan como señales que dicen "Aquí hay algo importante" o "Aquí hay una nueva sección – La letra grande dice de qué se trata la sección, la pequeña debajo es el contenido". Al igual que cualquier otro medio para diferenciar elementos visualmente, se necesita que haya un nivel suficiente de diferencia visual en el tamaño del texto para que funcione.

 Por esta razón, no se recomienda usar más de 3 diferentes tamaños de fuente principales para su contenido principal (p.ej. encabezado principal, subencabezado, cuerpo). Esto se aplica sólo al cuerpo de texto principal. Otros elementos de pantalla pueden usar tamaños alternativos (tales como superíndice/subíndice, etiquetas, anuncios, links de navegación separados, pie del navegador, etc.)

 Use sans-serif para todos los cuerpos de texto

 Los diferentes tipos de fuentes tienen diferentes niveles innatos de legibilidad.

Antes de subir el  Alta calidad en hospedaje web y registro de dominios de internet en Mexico, no dejes tu pagina web en manos de cualquier empresa y asegura tu tranquilidad con los profesionales del alojamiento web.

 Fuentes Serif vs. Sans-serif

 Los siguientes 2 párrafos deben ser desplegados primero en una fuente serif, y luego en una fuente sans-serif. Lea ambos palabra por palabra y juzgue cual es más fácil de leer.

 Serif

Las fuentes serif han funcionado bien por cientos de años. Tienden a verse más anticuadas y ‘establecidas’. Los serifs – las marcas que fluyen en los puntos de las letras – funcionan conduciendo al ojo hacia la siguiente letra, logrando una lectura más fácil y suave. Sin embargo, sólo funciona en resoluciones altas (p.ej. impresiones). A resoluciones bajas, la complejidad extra disminuye la claridad, y los espacios en blanco reducidos entre las letras hacen más lento el reconocimiento. Creo que las serif se vuelven más aceptables en tamaños mayores.

 Sans

Las sans-serif son literalmente fuentes que no tienen serifs. Se ven más modernas y abiertas. Las fuentes sans-serif no son más legibles que las serifs en presentaciones basadas en píxeles, porque son más simples, lo que se traduce bien a resoluciones bajas.

 Muchas fuentes sans han sido desarrolladas específicamente para los medios electrónicos. Las fuentes sans-serif más legibles son anchas, proporcionando un espacio amplio entre las letras, lo que facilita el reconocimiento. En la opinión de la mayoría de los diseñadores, la fuente más efectiva para el texto de cuerpo es Verdana.

 La Verdana es buena específicamente para texto de cuerpo, porque es una fuente amplia y espaciosa, lo que deja un espacio cuadrado amplio para cada letra. Esto hace más fácil distinguir cada letra diferente a resoluciones bajas.

 ejemplo de legibilidad en el diseño de paginas web

 No use demasiadas tipografías

 Las distintas fuentes proyectan sus propias personalidades, lo que puede ser de ayuda para el branding.

 En los textos de cuerpo generales, recomendaría siempre usar Verdana (primera preferencia), Helvética u otras fuentes sans-serif. Los títulos y otros elementos de la página (logos / navegación / anuncios) pueden usar una gran variedad de otras tipografías para crear sensaciones diferentes. Sin embargo, es generalmente conocido que demasiadas tipografías diferentes son contraproducentes.

 Como regla, no use más de 3 tipografías diferentes a lo largo de un solo diseño de una página web.

 

Énfasis

 Cree énfasis usando subrayados, negritas y cursivas, pero úselos escasamente. Para conducir la atención a una línea en particular, considere usar un fondo de color, o usar negrita, lo que es menos perjudicial para la legibilidad que los subrayados o las cursivas.

 Las negritas incrementan el contraste, y el contraste sólo funciona cuando tiene algo contra lo qué contrastar. Muchos textos en negrita no atraen la atención, compiten por la atención, crean ruido extra y disminuyen la legibilidad. Lea mi estudio en foruse.com.

 

Las cursivas son muy útiles para enfatizar palabras o frases cortas. Tienden a tener un énfasis más suave que las negritas. Las cursivas no deben ser usadas para bloques de texto, porque pueden tener un efecto similar a las fuentes serif en resoluciones pequeñas, reduciendo la legibilidad. Las fuentes sans-serif que funcionan bien en la pantalla pueden tener una legibilidad pobre en cursiva.

 

Similarmente, subrayar textos puede servir para enfatizar ciertas palabras o frases cortas, cuando son usadas con moderación. Cuídese de que al subrayar para lograr un énfasis no se confunda con un hipervínculo (quizás teniendo los hipervínculos en azul sin subrayados en su estado normal).

 

Alineación

 El texto alineado a la izquierda es más fácil de leer que el alineado a la derecha.

 La justificación completa (cuando las palabras son estiradas hasta encontrar los márgenes izquierdo y derecho, como en este párrafo) sólo es efectivo con líneas de texto largas (40 caracteres o más). Sin embargo, el texto en pantalla es más fácil de leer en columnas más estrechas, lo que hace difícil de justificar una justificación completa! En mi opinión, una página web no es el lugar correcto para un copy de justificación completa, porque no tiene la resolución para implementarlo con suavidad.

 La columna justificada completamente

de arriba se conserva relativamente

legible. Ésta columna más angosta usa

texto justificado completamente, pero note

que el flujo de lectura es más torpe,

particularmente con palabras largas.

 

El contraste en el texto

 Es muy importante tener suficiente contraste entre el texto y su fondo. Use un fondo blanco con un cuerpo de texto de negro cuando sea posible. Si no, negro sobre el color de fondo más claro que pueda poner. Una alternativa es blanco o un texto de colores brillantes sobre un color de fondo negro o muy oscuro, aunque esto se ve ligeramente más cansador.

 

Mayúsculas / Capitalización

 NO USE MAYÚSCULAS PARA EL TEXTO DE CUERPO, PORQUE DISMINUYE EL CONTRASTE ENTRE LETRAS CUANDO ESTÁN EN CUADROS DEL MISMO TAMAÑO.

 Las letras capitales son útiles porque anuncian el comienzo de una porción de texto (sentencia) o una porción importante de información tal como un nombre. Pierden su efectividad cuando son sobreutilizadas. La capitalización completa es más cansadora y lenta de leer, porque reduce el reconocimiento al darle a todas las letras un tamaño similar.

 En los títulos, use la capitalización consistentemente. Yo prefiero capitalizar las palabras más importantes en los títulos, y mantener las palabras de menor contenido en minúsculas (y, él, a, un, etc.)

 

Espaciando el texto

 Claramente, el espacio en blanco es vital para que sea legible un texto. Los espacios en blanco alrededor de los elementos son conocidos en diseño como ‘acanalar’, o ‘margen’ al aplicarse a bloques de texto. Es útil porque ayuda al ojo a identificar un bloque de texto como un grupo, y le ayuda también a encontrar rápidamente el comienzo de cada línea.

 Use la proximidad para asociar los encabezados y los títulos con el contenido. La proximidad requiere también espacios en blanco, así que use espacios alrededor de todos los párrafos y encabezados, pero asegúrese de que los encabezados estén más cerca de sus respectivos contenidos que los párrafos previos. Esto sugiere levemente ciertos niveles de asociación, y ayuda a leer.

 

El espaciado entre las letras es conocido como tracking.

 

El espaciado entre líneas es llamado leading.

 

Las CSS permiten a los diseñadores cambiar el espaciado entre letras (a través de la propiedad espaciado) y entre líneas (usando alto de línea), pero sólo debe ser considerado con una muy buena razón. No se tiente de reducir el espaciado entre letras o líneas a menos del valor por defecto, ya que esto reduce la legibilidad.

 

Una investigación demuestra que los márgenes mejoran la legibilidad (y el espaciado entre líneas está bien)

 

Tamaño del bloque de texto

 Los bloques de texto no deben ser demasiado largos o anchos.

 Cuando los párrafos se vuelven largos, se vuelven más difíciles de leer porque hay menos espacios en blanco. Los espacios en blanco le dan forma a los párrafos, lo que actúa como mejorador visual, haciendo más fácil encontrar su lugar, y encontrar el comienzo de la línea siguiente. Usar más párrafos y más pequeños se amolda particularmente al contenido web, porque le permite destacar sutilmente más frases útiles, poniéndolas en su propio párrafo, o iniciando un párrafo nuevo.

 Por razones similares, las líneas largas (párrafos anchos) son más lentas y difíciles de leer que las más angostas. Las líneas de alrededor de 100 caracteres presentan porciones de texto que pueden ser decodificadas fácilmente, y se hace realmente fácil leer hasta el comienzo de la siguiente línea. Esta es la razón por la que los periódicos y las revistas usan varias columnas en una página, y porqué los libros usan el mismo formato común.