Share
Bienvenido a la novena lección de nuestra serie Diseño web para niños, todo sobre tipografía.
En este tutorial veremos de qué se trata la tipografía y por qué es tan importante en el diseño. Hasta ahora hemos hablado mucho sobre la experiencia del usuario y este tutorial no será una excepción; Estaremos trabajando duro para asegurarnos de que nuestro texto sea hermoso y fácil de leer!
No olvide hacer cualquier pregunta en la sección de comentarios al final de esta página.!
La tipografía es en todos lados. Así es como vemos las palabras escritas, por lo que en cualquier lugar donde encontramos palabras, vemos tipografía. Estas palabras se pueden encontrar en pantallas, papel y carteles a nuestro alrededor..
Con la tipografía podemos cambiar la "apariencia" de estas palabras, cambiando la forma en que afectan a los lectores. los diseño Las palabras a menudo afectarán a nuestros usuarios incluso antes de que tengan la oportunidad de leer nuestro contenido, por lo que es importante que el diseño y la sensación general de nuestra tipografía coincidan con la sensación del contenido en sí..
En la lección anterior hablamos acerca de cuán importante es el contenido. Después de todo, ¡no importa qué tan bien se vea nuestro sitio si no contiene información que alguien quiera leer! Sin embargo, la forma en que presentamos estas palabras al usuario se convierte en parte tan importante del mensaje como las palabras mismas..
La tipografía involucra mucha terminología bastante similar.
UNA tipo de letra es el diseño general de una colección de caracteres (palabras y símbolos), mientras que un fuente es un tamaño específico, peso (el grosor de las letras), estilo y uso de un tipo de letra.
Nuestro diseño Tuts + Town utiliza un tipo de letra llamado "Open Sans". Utilizamos diferentes tamaños y pesos de este tipo de letra, que nos dicen cuál fuentes para cargar en la página.
Entonces, mientras usamos fuentes en nuestro sitio, estas fuentes se basan en tipos de letra que alguien ha dedicado mucho tiempo al diseño..
Un tipo de letra puede ser serif o sans-serif. UNA serif se describe mejor como las colas o extensiones en los extremos de algunas letras.
Un tipo de letra serif tiene estas extensiones:
Open Sans es un tipo de letra sans-serif; sentido sin serif Un tipo de letra sans-serif no tiene extensiones como la letra de arriba:
No hay una respuesta correcta o incorrecta sobre cuál usar en nuestro sitio, pero queremos que coincida con el diseño general y sensación estamos tratando de lograr, además de ser la opción más legible teniendo en cuenta nuestro diseño y la cantidad de texto.
Un tipo de letra serif es generalmente más fácil de leer en papel o cuando hay mucho texto, mientras que un sans-serif puede ser mejor en una pantalla o con una cantidad menor de texto en general.
Para obtener la mejor tipografía para nuestros sitios web, debemos pensar en qué hace que cada tipo de letra sea diferente de otro. Hay muchas partes diferentes de cada tipo de letra que alguien ha diseñado y pensado con gran detalle..
Son estos detalles los que conforman la singularidad de cada uno y depende de nosotros elegir cuál funciona mejor para diferentes diseños y situaciones..
Veamos brevemente algunos detalles de los tipos de letra para comprender mejor cómo pueden mejorar (o empeorar) nuestros diseños:
No hay necesidad de memorizar estas partes en este momento, solo debes saber que las variaciones de ellas ayudan a hacer que cada tipo de letra sea especial..
Al igual que con la mayoría de las cosas relacionadas con la tipografía, el espaciado es muy importante para crear la mejor experiencia para nuestros usuarios. La cantidad de espacio entre cada letra, entre palabras y entre líneas de palabras puede hacer una gran diferencia en legibilidad.
El espacio insuficiente no nos da letras y palabras que están demasiado agrupadas para leerlas bien, mientras que un espacio excesivo dividirá todo y será igual de difícil de leer y seguir..
Las fuentes vienen con su propio espacio que generalmente es muy agradable de leer, pero echemos un vistazo a cómo se llama este espacio diferente y cómo realizar cambios en nuestro CSS en caso de que lo necesitemos en nuestros diseños..
Rastreo es el espacio general entre todos los caracteres (letras) en un fragmento de texto.
Podemos hacer cambios a esto en nuestro CSS si queremos, usando el espaciado de letras propiedad:
h1 espacio entre letras: 5px;
Accentsconagua
espaciado de palabras propiedad:h1 espaciado entre palabras: 15px;
Kerning Es el espacio entre dos caracteres..
El kerning entre cada par de caracteres es cambiado por el diseñador de tipografía, porque algunas letras se ven mejor juntas y otras más separadas. Esto se debe a que las cosas se vean equilibradas y es difícil de hacer solo con CSS.
Líder Se refiere al espaciado entre líneas de oraciones..
Podemos hacer ajustes a este espaciado al dar un valor que cambia el conjunto inicial predeterminado de la fuente en uso a través de altura de la línea propiedad.
p line-height: 2;
Un valor de 2 aquí nos aseguraremos de que nuestro liderazgo sea el doble de la cantidad predeterminada para esa fuente.
Si una sola palabra se deja en una línea por sí misma (aaaah) al final de un bloque de texto, se denomina Vdo.
Digamos que los bloques en la siguiente imagen representan palabras dentro de columnas. La Viuda es el bloque azul, sentado solo al final de la columna porque ahí es donde termina la oración:
Un Huérfano es una sola palabra que existe en una línea al principio de una columna, que generalmente se encuentra junto a la columna donde se encuentra la mayor parte del texto relacionado..
Las viudas y los huérfanos se consideran una mala tipografía debido a lo distraídos que pueden ser, lo que empeora la experiencia general de lectura..
Hay varios enfoques diferentes que podemos tomar para corregir uno de estos problemas si esto ocurre en nuestros sitios, como:
Podemos optar por alinear nuestro texto a la izquierda (predeterminado en la web para los idiomas escritos de izquierda a derecha, como el inglés), en el centro o a la derecha.
El texto en la web generalmente debe estar alineado a la izquierda (de nuevo, para los idiomas escritos de izquierda a derecha) porque así es como los hablantes y lectores de esos idiomas están acostumbrados a leer.
La alineación central se usa a menudo en títulos y encabezados, lo que les ayuda a diferenciarse más del texto principal de una página. Podemos hacer esto en nuestro CSS con el texto alineado propiedad, por ejemplo:
h1 text-align: center;
El texto que está alineado de esta manera generalmente se puede encontrar en carteles y volantes que intentan captar la atención de alguien, pero no debemos alinear un gran cuerpo de texto en la web, ya que será mucho más difícil para nuestros usuarios leerlo. El texto alineado en el centro crea anchos muy diferentes de una línea a otra, lo que hace más difícil para el ojo seguir.
Algunos idiomas (como el hebreo) se escriben de derecha a izquierda, haciendo que la alineación a la derecha sea la alineación predeterminada.
Como diseñadores, también podemos optar por tener ciertos pequeños fragmentos de texto alineados correctamente para que se destaque un poco más, como los títulos de las imágenes. Estos títulos son títulos o descripciones para imágenes con su propio elemento HTML, figcaption.
La alineación anterior se realiza declarando Correcto en el elemento en un documento CSS:
figcaption text-align: right;
Gran parte de la tipografía que diseñamos se debe a que nosotros mismos leemos el contenido y hacemos los ajustes necesarios. Sin embargo, hay algunos consejos generales que nos pueden ayudar a sentirnos más cómodos con nuestras habilidades de tipografía..
UNA tamaño de fuente menos que 16px en el texto que constituye la mayor parte de nuestro contenido generalmente se considera demasiado pequeño y difícil de leer en las pantallas.
Hablamos mucho sobre jerarquía visual En el anterior tutorial de conceptos básicos de diseño. La configuración de la jerarquía del texto a lo largo de nuestro diseño garantizará que el sitio sea más fácil de navegar al separar el contenido relacionado y resaltar lo que es más importante.
El texto en nuestro sitio de Tuts + Town tiene varios niveles diferentes de jerarquía, siendo el título el más importante, seguido de las categorías de negocios y tiendas específicas, y termina con la sección "creado por" en la parte inferior.
La jerarquía aquí se establece por diferentes tamaños, colores y ubicaciones en la página.
Hablaremos más detalladamente sobre el color y el contrato en el siguiente tutorial, así que solo debes saber cuál es el color del texto y si está en conflicto con el color de fondo, lo que dificulta su lectura..
Aquí hay un ejemplo de mal contraste a la izquierda y mejor contraste a la derecha:
El texto rosa brillante sobre un fondo turquesa oscuro a la izquierda muestra el impacto de un contraste pobre. El texto es difícil de leer, se ve un poco borroso y nos duele la vista.!
Como regla general, es mejor no usar más de dos o tres fuentes diferentes por proyecto. Las fuentes emparejadas deben adaptarse entre sí y ambas apoyan la sensación general y las ideas detrás del diseño.
No todas las fuentes funcionan bien en la web y son las mejores para imprimir solamente. Afortunadamente, Google Fonts, que solíamos importar Open Sans en nuestro sitio Tuts + Town, nos proporciona una increíble lista de fuentes adaptadas a la web..
En este tutorial abordamos qué es exactamente la tipografía, repasamos cómo las diferentes partes de una tipografía pueden distinguirla de otras, y concluimos con algunos consejos generales para tener en cuenta al trabajar con texto y fuentes en la web. Todo para lograr un objetivo final: hacer que nuestro contenido sea más fácil de leer..
A continuación, analizaremos algunas reglas generales relacionadas con el uso de colores en la web y el mensaje que comunicamos a nuestro usuario según nuestra selección general de colores..
Te veo por la ciudad!
