10 reglas de tipografía web que todo diseñador debería saber
Cuando alguien visita un sitio web que ha diseñado, lo más probable es que no le preocupen demasiado los colores, las imágenes o los sonidos, sino que está mirando el texto de inmediato.
No importa cuántas campanas y silbatos haya incorporado a un sitio web, todos confían en el texto para lograr lo que sea que estén visitando en el sitio .
Solo eso debería hacer que la tipografía, el arte de organizar el tipo, sea una prioridad para cualquier diseñador web.
En este artículo echamos un vistazo a 10 reglas fáciles de tener en cuenta al diseñar su próximo proyecto web.
1. Lea el texto usted mismo
Con un diseño como JonesingFor un diseñador sin una gran comprensión del texto habría tenido problemas para armar la tipografía que hace que este sitio realmente funcione. Al abordar su propia tipografía, probablemente no tenga que preocuparse por escribir el texto de un sitio, ¡pero sí tiene que leerlo!
Algunos diseñadores web piensan que simplemente copiar y pegar un archivo de texto constituye el total de sus tareas textuales. Pero leer el texto proporciona al menos una idea básica de cómo se puede integrar el texto en un sitio web, evitando la desconexión entre la redacción y el diseño de un sitio web.
Puedes poner tu tipografía en otro nivel, si puedes leer el texto una vez que esté en su diseño. Tome nota especial del espacio alrededor de las letras . ¿Tienes espacios inusualmente grandes que parecen extraños? Una pequeña tipografía cuidadosa puede eliminar esos problemas. También puede hacerse una idea de las líneas que pueden ser demasiado largas para leer fácilmente, interrupciones de línea incómodas y problemas similares.
2. Volcar Lorem ipsum tan pronto como sea posible
¿Crees que podrías haber diseñado Sitio web de Jesus Rodriguez Velasco sin el texto real? El sitio depende en gran medida de la palabra escrita, y también palabras muy específicas. Incluso el texto del cuerpo recibió atención especial con un gorro y otros ajustes que simplemente no hubieran sido posibles con Lorem ipsum.
A menos que el texto de su sitio web sea en realidad Lorem ipsum, el texto falso no tendrá similitud con el texto real . Eso significa que cualquier modificación que pueda hacer en el texto, o el diseño que lo rodea, tendrá que esperar hasta que obtenga lo real. Solicitar (y obtener) mensajes de texto de su cliente lo antes posible en el proceso le dará la capacidad de coincidir con su diseño general y su tipografía.
3. Mostrar una jerarquía clara
Cuando llegas a Industrias Rik Cat , sabes de inmediato dónde debes comenzar a leer. Aunque hay algunos enlaces en la parte superior de la página, la bienvenida de Rik llama la atención primero. Es mucho más grande, usa tipografía para establecer una jerarquía clara .
Cada sitio necesita una jerarquía bien desarrollada: indicadores de dónde comenzar a leer y cómo proceder. Su tipografía puede proporcionar esa jerarquía, tal como lo hace Rik, siempre que conozca su orden jerárquico con anticipación. Al pensar en el tamaño y los tipos de letra, puede resaltar una parte del texto como un título de una manera que las diferentes ubicaciones en el diseño simplemente no pueden proporcionar.
La jerarquía de su diseño va más allá de la tipografía que emplea, por supuesto, pero dado que los usuarios casi siempre comienzan con el texto, tiene sentido que los diseñadores hagan lo mismo.
4. Preste atención a la tipografía macro y micro
Confiando completamente en la tipografía para su página principal, Crowley Webb y asociado El sitio web fue diseñado con dos factores en mente: la tipografía macro y micro .
La tipografía macro es la estructura general de su tipo, cómo aparece en el contexto de su diseño y su estética cuando considera su texto como un bloque en sí mismo.
La micro tipografía está más relacionada con los detalles del espaciado, los problemas que determinan si las palabras son fáciles de leer. La micro tipografía es una necesidad absoluta cuando se trata de armar un bloque de texto: si no es legible, no tiene sentido seguir adelante. Crowley Webb y Associates abordaron esta pregunta a través de una escritura cuidadosa y espaciando las palabras que el sitio destacaría.
Pero la macro-tipografía le brinda la oportunidad de hacer que su texto esté más que espaciado: es la oportunidad de que se vea atractivo y parte de todo su diseño . La elección de tipos de letra y colores en este sitio web crea un todo viable. Ignorar cualquiera de las facetas de la tipografía es perjudicial.
5. Cuida con el tipo de colores
Sería tan fácil perder texto en el fondo de ArtofElan , especialmente la combinación rojo brillante sobre rojo oscuro utilizada por el diseñador. Cuando un diseñador web trabaja con el tipo de color, la atención es absolutamente necesaria, no hay garantía de que sea visible una combinación de rojo sobre rojo, o incluso una combinación de amarillo sobre rojo . Después de todo, todos han visitado un sitio web en el que el texto parecía estar a solo un tono del color de fondo y obtenían un efecto visual cuando intentaban leerlo.
La solución más sencilla para esta situación es asegurarse de que el color de su tipo sea drásticamente diferente del de su fondo . El blanco y el negro funcionan tan bien porque son tan diferentes como se puede conseguir, pero hay combinaciones de colores que funcionan bien: algo así como un azul oscuro sobre un rosa claro hará su trabajo. El texto invertido es bastante complicado ... mientras que puede trabajar con texto rosa claro sobre un fondo azul oscuro, es más probable que reciba una queja al respecto.
6. Ponte en serio sobre tu CSS
Si su CSS es sólido, puede moverse entre las páginas de su sitio web sin problemas, al igual que las diferentes versiones de Hutchouse.com confíe en diferentes hojas de estilo para crear efectos impresionantes. Incluso si no lleva las cosas tan lejos como Hutchhouse, CSS puede ayudar a eliminar problemas de tipografía amateur como cambiar tipos de letra y tamaños entre páginas.
CSS puede proporcionar una coherencia fácil entre su tipografía en la totalidad de un sitio web . Sin embargo, si eres coherente en la forma de usar el tipo, romper esa coherencia incluso una pequeña cantidad puede hacer que lo que desees destacar realmente se destaque, así como establecer y luego romper una cuadrícula puede contribuir a un diseño eficaz. En la tipografía web, mantener sus fuentes consistentes puede ser una simple cuestión de CSS.
7. Elimine el texto centrado
Elegir una alternativa al texto centrado puede hacer que el diseño de un sitio web sea fácil de leer , al igual que DesignCanChange.org . Optar por el texto centrado, especialmente en una página como esta, sería una página problemática: los bordes dentados que se crean a ambos lados hacen que sea mucho más difícil de leer y hay muchas oportunidades para que el texto perfectamente centrado termine distorsionando el resto del texto. tus diseños en diferentes pantallas.
En algunos círculos, el tipo centrado está solo a un paso del uso de Comic Sans en el diseño de un sitio web. Puede considerarlo para un título, pero en general, alinear su texto a la izquierda hará que sus lectores se sientan mucho más cómodos, a menos que lean de derecha a izquierda .
8. Tratar con presupuestos inteligentes y otros símbolos
Luigi Ottani El sitio muestra qué atención cuidadosa prestará a las comillas y otros símbolos: una completa falta de problemas cuando el sitio muestra esos símbolos. Muchos sitios web están salpicados de símbolos que un navegador no puede mostrar. Es un legado del hecho de que la mayoría del texto con el que trabaja un diseñador web probablemente fue escrito en Microsoft Word u otro software de procesamiento de textos que realiza todo tipo de pequeños cambios en el texto sin que el escritor le preste mucha atención.
Uno de los peores cambios son las comillas inteligentes: las comillas rizadas Word sustituyen automáticamente a las comillas . Otro área problemática se presenta cuando trabajas con texto escrito en otro idioma: los acentos y umlats pueden causar tantos problemas como la ayuda de Word. Si solo copia y pega texto con dichos cambios en su diseño, es probable que tenga que volver y solucionarlos más tarde, al menos para algunos navegadores web.
En cambio, consígalos temprano en el proceso de diseño para que pueda concentrarse en hacer que su texto se ajuste mejor a su diseño . Si desea que aparezcan esos símbolos extravagantes y citas inteligentes en el diseño final, divida sus entidades HTML.
9. Planifica que tu texto se haga más grande
Cuando aumenta el tamaño del texto en Veerle Pieters página web, no es tan bonita como si usara el tamaño de letra que seleccionó. Sin embargo, aún puede leer todo, buscar enlaces, etc., algo que es verdad en muy pocos sitios web.
Eso se debe a que, en parte, muchos diseñadores se aseguran de que el texto se distribuya en letra de 10 puntos o incluso más pequeño. La mayoría de las personas se sienten cómodas leyendo estas fuentes, pero los Baby Boomers conforman una gran parte de la población que navega por la web y muchos de los navegantes web envejecidos van a tener sus navegadores configurados para mostrar lo más grande que puedan . Su texto, así como su diseño, deben poder adaptarse a ese hecho.
También vale la pena tener en cuenta el hecho de que el tamaño del navegador puede variar drásticamente , moviendo el texto a ubicaciones inesperadas si no tiene cuidado. Si aumentar el tamaño de un punto crea problemas, ese grupo demográfico antiguo pasará al siguiente sitio web con prisa. Tener que desplazarse para siempre hacia un lado tendrá un resultado similar.
10. Mostrar una preferencia por sans serif
Si miras el A List Apart's página web, casi todos los grandes bloques de texto están configurados en un tipo de letra sans serif, por lo que es mucho más fácil de leer. Los titulares y otros bloques de texto más pequeños se presentan en fuentes serifed, creando un equilibrio entre los dos.
Cuando se trata de diseñar texto en una pantalla, las fuentes sans serif son casi siempre la mejor opción , especialmente si eliges una fuente como Verdana que fue diseñada para mostrarse en la pantalla de una computadora. Las fuentes serifed tienen una mayor probabilidad de mostrarse mal, volviéndose borrosas o incluso pixeladas.
No es posible evitar por completo los serif, por supuesto. Pero especialmente para grandes bloques de texto, el uso de una fuente sin serifas puede ofrecer un nivel extra de garantía de que los visitantes podrán leer fácilmente el texto de un sitio. Cuando elige fuentes para un proyecto, primero revise sus opciones sans serif .
Un comentario final
La tipografía se pasa por alto con facilidad, e incluso cuando un diseñador la toma en consideración, es fácil descartarla como una actividad que requiere mucho tiempo y poco retorno. Pero pasar incluso unos minutos con el texto que será la pieza central de su diseño puede transformarlo de algo que cualquier diseñador web podría dar en una página a un elemento que respalda el resto del diseño.
Escrito exclusivamente para WDD el jueves Bram.
¿Sigues estas reglas y otras? Por favor comparta sus puntos de vista a continuación ...