Esta información se distribuye bajo licencia Creative Commons.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Esta información se distribuye bajo licencia Creative Commons."

1 Esta información se distribuye bajo licencia Creative Commons. Usted es libre de: Copiar, distribuir y comunicar públicamente Hacer obras derivadas No Comerciales Bajo las condiciones siguientes: Reconocimiento: debe reconocer y dar crédito al autor original ()

2 Incluye características de elementos individuales (tipos de letra y estilos) y sus agrupamientos (técnicas de estilo).

Se deberá usar un numero reducido de tipos de letra que serán legibles, claros y singulares (por ejemplo, para distinguir diferentes clases de información).

3 Se deberá usar un numero reducido de tipos de letra que serán legibles, claros y singulares (por ejemplo, para distinguir diferentes clases de información). Recomendaciones: un máximo de 3 tipos de letra en un máximo de 3 tamaños de puntos. un máximo de caracteres por línea de texto. ajustar el texto a la izquierda y los números a la derecha. En listas, usar el centrado de texto. usar mayúsculas y minúsculas siempre que sea posible. Imagen tomada de:

4 Para los textos en pantalla, a diferencia de lo que suele ocurrir en los impresos, es recomendable utilizar un tipo de fuente sans serif (sin serifas, adornos en los extremos de las letras). Este tipo de fuentes resultan mucho más legibles en textos de poco tamaño, como se suelen encontrar en las pantallas.

5 Tipos clasificables por peso, inclinación, proporción, espaciado, con serifas o sin serifas (adornos). Actualmente un solo archivo, contiene todas las variantes de una tipografía.

6 Diseño más elaborado Escasa legibilidad En TypeKit.com puedes ver una muestra de las diferentes formas de renderización de una fuente, dependiendo del navegador y del sistema operativo que se utilice.

7 El objetivo del pixelado es aumentar la nitidez, mientras que el suavizado consigue formas más estéticas mediante el difuminado de los bordes. Encontrar una fuente que respete el equilibro entre ambas características será la clave para una óptima legibilidad.

8 Radio Calculador Contraste Es medido usando una fórmula que da un radio desde 1:1 (sin contraste ej. Texto en color negro en un fondo negro) hacia 21:1 (contraste máximo ej. Texto negro en fondo blanco) 3:1 contraste mínimo para textos a escala grande (18pt o 14pt negrita ) Nivel AA (nivel contraste mínimo) 4.5:1 contraste mínimo para texto tamaño regular Nivel AA 7:1 contraste mejorado para texto tamaño regular Nivel AAA (nivel contraste mejorado) Sin embargo un contraste demasiado marcado (superior a 15:1) termina por cansar la vista, afectando negativamente a la legibilidad. Niveles de accesiblidad (A,AA,AAA):

9 Tomado de:

10 Se recomienda tamaño al 100% en lugar del 80% habitual. Esto ayudaría a relajar la lectura y conseguir más espacio visual en el diseño. Aplicar tamaños de fuente escalables en nuestros diseños para que el usuario pueda configurar su navegador con un tamaño de letra superior. Variar la fuente, color y formato de los títulos y subtítulos siguiendo un patrón jerárquico, ayuda a identificar la estructura del diseño y por lo tanto facilita la comprensión de la lectura y le aporta mayor fluidez.

12 Aplicar un interlineado suficientemente espaciado y separar los párrafos con amplios márgenes facilitan la lectura. Como norma general se establece un alto de línea de 1.5em. En caso de utilizar una fuente de pequeño tamaño y con las letras demasiado juntas, se puede aplicar 1 ó 2 píxels a la propiedad letter-spacing de CSS para separar las letras. Las columnas de nuestro diseño no deben superar más del 50% del ancho total de la pantalla, con el objetivo de que la lectura sea cómoda y no resulte pesada. Por este mismo motivo también se recomienda que cada línea contenga una media de 15 palabras, y distribuir la información en frases y párrafos cortos.

14 Facilidad de lectura y comprensión de un texto. Que un texto sea legible ayuda a hacer el contenido de un sitio más fácil de leer para todos y en especial para las personas con discapacidades para la lectura y/o cognitivas.

blogspot.mx/2012/02/readable-text-in-colour.html http://w3c.

15 El W3C trata el tema de la legibilidad en las Técnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web 1.0 en el apartado 5 Comprensión. Tomado de: Herramientas de legibilidad:

Tritanopia: Consiste en la carencia de sensibilidad al color azul Deuteranopia: Los conos de la retina responsables de la recepción de luz con longitud de onda correspondiente al color verde están

16 Tritanopia: Consiste en la carencia de sensibilidad al color azul Deuteranopia: Los conos de la retina responsables de la recepción de luz con longitud de onda correspondiente al color verde están ausentes o no son funcionales. Por tanto existe una deficiencia a la hora de discriminar entre verde y rojo. Protanopia: es la carencia de sensibilidad al color rojo, una disfunción visual relacionada con la percepción del color. Se denomina también dicromacia roja.

El W3C propone los siguientes puntos de revisión en esta sección: 14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. [Prioridad 1] 13.

17 El W3C propone los siguientes puntos de revisión en esta sección: 14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. [Prioridad 1] 13.8 Localice la información destacada al principio de los encabezados, párrafos, listas, etc. [Prioridad 3] 14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página. [Prioridad 3] Además, también sería de aplicación el siguiente punto de revisión: 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2]

18 Esfuércese para que los encabezados y las descripciones de los vínculos sean claras y precisas. Ello incluye utilizar como vínculos frases concisas que tengan sentido cuando se lean fuera del contexto o como parte de una serie de vínculos (algunos usuarios navegan saltando de vínculo a vínculo y leyendo sólo el texto de estos vínculos). Sitúe el contenido básico al principio de la frase o párrafo (esto es denominado "colocación inicial"). Ello ayudará tanto a la gente que está mirando superficialmente, como a los que usan sintetizadores de voz. "Hojear", aplicado a la voz, significa habitualmente que el usuario salta de encabezamiento a encabezamiento, o de párrafo a párrafo, y escucha sólo las palabras suficientes como para establecer si el trozo de información (encabezamiento, párrafo, vínculo, etc.) le interesa. Limítese a un concepto principal por párrafo. Evite el uso de argot, jergas y significados particulares de palabras comunes, a no ser que las defina en el propio documento. Prefiera las palabras de uso común. Por ejemplo, utilice "empezar" mejor que "comenzar" o "intentar" mejor que "procurar". Evite frases de estructura complicada.

19 El W3C recomienda las siguientes técnicas para lograr alcanzar este criterio de éxito: Proporcionar un resumen del texto que requiera una habilidad de lectura menos avanzada que el nivel de secundaria alta. Proporcionar ilustraciones visuales, imágenes y fotografías que ayuden a explicar ideas, acontecimientos y procesos. Proporcionar una versión hablada del texto. Hacer el texto más fácil de leer. Proporcionar versiones en la lengua de signos de la información, ideas, y procesos que tienen que ser entendidos para usar el contenido.

Documentos relacionados

Clasificación de familias tipográficas

Clasificación de familias tipográficas -El cuerpo o tamaño mayúsculas, minúsculas y capitales. -El grosor del trazado ultrafina, fina, book, normal, media, seminegra, negra y ultranegra. -La inclinación