Entendiendo la escritura de tipografía para la web
En Diseño Web, el tema de la tipografía es importante cuando se consideran todas las áreas de la experiencia del usuario. Cada sitio web necesita texto, y hay pautas que puede seguir para crear diseños excepcionalmente impresionantes. Se deben tener en cuenta las líneas de la cuadrícula, letras, altura de la fuente, espaciado del texto, esquemas de color y otras propiedades similares.
En este artículo me gustaría profundizar en el ámbito de la tipografía web. Vamos a ver en Ideas populares detrás del diseño de textos de páginas web creíbles.. En el camino voy a introducir algunos propiedades CSS3 útiles que los diseñadores a menudo olvidan.
He tratado de centrarme más en la teoría y las ideologías para la Web. Esto le da un enfoque más amplio al texto digital en general, y usted, el diseñador web, puede elegir qué estilos aplicar para qué propósito. El contexto siempre es clave y debe determinarlo de manera adecuada para cada proyecto en el que trabaje. Considere esta guía como un paquete de referencia repleto de tendencias web modernas de innovadores tipográficos de todo el planeta..
Mida sus párrafos
No necesitarás sacar la vara del jardín para este tipo de medidas. En realidad, la medida en relación con la tipografía se refiere al ancho (horizontalmente) de cualquier párrafo dado en su página. No es un tema siempre discutido, pero sí influye en la legibilidad de su contenido. Como regla general, usted quiere limitar cualquier línea individual de alrededor de 75-85 caracteres de longitud (sin incluir necesariamente espacios).
Ahora, esto puede parecer un poco exagerado para algunos diseños más amplios. Especialmente si su diseño es fluido y está destinado a adaptarse a medida que el usuario redimensiona la ventana de su navegador. Siempre puedes configurar un CSS anchura máxima Propiedad en su contenido principal div. La codificación de márgenes y tamaños de fuente en unidades escalables (porcentajes, ems) en lugar de píxeles permitirá tal flexibilidad dentro de cualquier diseño.
No hay una unidad de medida máxima a tener en cuenta. Cómo escribir contenido y formar palabras en oraciones es mucho más importante que el ancho de cada línea. Pero tenga en cuenta que las oraciones más largas son mucho más difíciles de leer que las oraciones cortas y concisas.
Líder explicado
Al diseñar, junto con la medida de su párrafo, también debe considerar la idea de líder. La palabra se pronuncia “ledd-ing”, como el plomo utilizado en los lápices. Este nombre se origina a partir de los días anteriores de la composición tipográfica mecánica donde se colocaban tiras de plomo entre líneas de texto.
Liderar sigue siendo un concepto muy importante en el diseño web y va de la mano con las medidas de los párrafos. A medida que aumenta el ancho de su párrafo, debe aplicar un aumento igual a la cantidad de encabezado, o espacio entre lineas de texto. Este espacio adicional hace que la lectura sea mucho más fácil para tus ojos.
Si tuviera que hojear un texto muy bien enrollado, puede que le resulte difícil concentrarse en una sola línea. Si este es el caso, intente aumentar la cantidad de liderazgo con el CSS altura de la línea propiedad. Siempre desea más espacio entre las líneas de texto que entre las palabras. De lo contrario, los bloques de texto pueden aparecer como impresión de periódico y no serán fáciles de usar para hojearlos..
Una técnica sólida es aplicar más espacio del que originalmente se necesitaba y reducirlo si es necesario. No todos los textos son iguales y seguramente necesitarás párrafos con diferentes formatos internos, como palabras en negrita, enlaces de anclaje, subrayados, etc..
Utilizar tamaños de fuente naturales
Todavía hay un puñado de sitios web que eligen quedarse con tamaños de letra más pequeños que el promedio. 11px-12px puede parecer mucho más de lo “profesional estándar” para diseños de negocios. Pero estos tamaños no ayudan a la mayoría de los visitantes que buscan información específica..
En general, los navegadores web tienen un valor predeterminado de 16 px si no aplica ninguna regla de CSS. Incluso esto puede considerarse un poco pequeño si tiene espacio adicional en su diseño para acomodar texto más grande. Los tamaños de fuente más grandes solo se ven mejor y son mucho más fáciles de hojear para palabras clave relativas. Las fuentes de serif no suelen elegirse como material de párrafo, pero aún así puede salirse con la suya. Sugiero usar tamaños de texto mucho más grandes para fuentes basadas en serif para mejorar la legibilidad y atraer la atención.
Responder al entorno del usuario
A medida que pruebe diferentes familias de fuentes y tamaños, su área de contenido tendrá que adaptarse en consecuencia. La unidad estándar con la que me quedo es ems ya que pueden redimensionarse fácilmente según el espacio disponible y la resolución de la pantalla. Esto optimiza el rendimiento en el extremo del usuario, que es el más importante.
Pero cuando tiene un contenido tan flexible que hace que su diseño sea propenso a un resultado con errores. El contenido de su área de pie de página o barra lateral puede terminar sesgado o desequilibrado en algunos navegadores. O puede tener dificultades para alinear imágenes u otras formas de medios dentro de su texto principal. Hay otras alternativas al uso de ems si necesita un diseño de estilo fijo, pero pruebe ambas soluciones para ver cuál le gusta más..
Recuerde que los anchos fijos y los tamaños de párrafo se bloquearán en muchos de los ajustes de su diseño. Es genial para el contenido que incluye muchos efectos estéticos estacionarios: piense en imágenes de fondo o en muchos widgets de barra lateral ajustados. También es un proceso simple para construir un área de contenido fluido en la columna izquierda con barras laterales fijas a la derecha.
Estilo basado en contexto
Algunos otros trucos CSS realmente ingeniosos se han ocultado del diseño general. Específicamente, hay tendencias copiadas del trabajo de impresión que se pueden aplicar en el contexto adecuado.
Muchos diseñadores web nunca han usado la propiedad CSS de sangría de texto. Usted proporciona un valor para sangrar la primera línea de cualquier párrafo al que apunte esta regla. Las unidades siguen las opciones de texto estándar, como píxeles, puntos, ems, porcentajes ... Ciertamente no es una tendencia que encontrará en la mayoría de los blogs. Pero proporciona un buen ritmo de página mientras se lee en grandes bloques de texto..
Hay otro tipo de selector de CSS conocido como pseudo elemento. Esto puede dirigirse a una parte específica de cualquier selector de contenido. El pseudo selector CSS3: primera letra es perfecto para crear estilos sofisticados en párrafos importantes. Puede mejorar la letra inicial de cada párrafo, de forma similar a un libro de cuentos de cuentos, utilizando negrita, cursiva o incluso cambiando el tipo de letra. Echa un vistazo a este hermoso ejemplo de mayúsculas que incluye un código CSS adicional que puedes utilizar.
Jugando con el espacio entre letras
Estoy seguro de que muchos de nosotros hemos escuchado el término seguimiento antes, pero nunca nos dimos cuenta de que es la misma idea que la propiedad de espaciado de letras CSS. Estos dos conceptos son uno en lo mismo, relacionados entre tipografía impresa y digital. La unidad se relaciona con el espacio entre las letras dentro de cualquier línea de texto. Este es un efecto realmente bueno para aplicar en encabezados e incluso en algunos bloques de contenido más pequeños dentro de su sitio..
Es importante no confundir los términos espacio entre letras y kerning. Ambos están relacionados con la tipografía y la distancia entre letras. Sin embargo, el kerning se refiere específicamente a la distancia entre 2 letras individuales en una palabra. La propiedad de espacio entre letras se aplicará a un elemento entero de texto, ya sea una palabra o un párrafo o encabezado o enlace de anclaje. Ten esto en cuenta cuando juegues con nuevas ideas de estilos..
A menudo utilizo algunos píxeles / puntos de espacio entre letras en los encabezados con mayúsculas. Esto rompe los caracteres individuales con un espacio extra y también aparece como un muy definido “título” Mira. El espaciado de letras negativas también funciona muy bien en el contexto correcto. Generalmente me quedo con unidades más pequeñas, tal vez -0.03em o -0.1em como máximo.
Combinando y combinando tipografías
Los conceptos de diseño detrás de la tipografía web son ciertamente una forma de arte, no tanto de ciencia. Hay pautas que puede seguir, pero no hay reglas firmes con las que esté limitado. Esto significa que tiene mucha libertad para experimentar mezclando y combinando las diferentes fuentes a las que tiene acceso..
Por mucho, la combinación más popular de tipos de letra incluye una división de serif / sans-serif para el encabezado y el contenido del párrafo. Me gusta cambiar ambos, pero más a menudo usaré fuentes serif en las secciones del encabezado. Las marcas y los trazos adicionales en cada letra hacen que parezcan más favorecedores como el texto de la página dominante..
Además, las fuentes sans-serif son más limpias y fáciles de comprimir juntas en oraciones. Eso no quiere decir que las fuentes serif no funcionen en párrafos. De hecho, hay un montón de grandes ejemplos! Pero un concepto poco conocido llamado x-height es crucialmente importante para distinguir la complejidad de un tipo de letra. Al observar la línea de base de un par de palabras, aprenderá cómo esas fuentes “encajar” juntos.
También vale la pena señalar la importancia del espacio entre estos diferentes elementos. Es probable que esté usando 2 o 3 estilos de encabezado diferentes, por lo que cada uno de estos saldrá con una apariencia diferente. Tiendo a mantener mis elementos h2 / h3 un poco más cerca del siguiente bloque de párrafo, ya que esto implica que hay una correlación entre el contenido.
Esta correlación es especialmente útil cuando utiliza dos tipos de letra completamente diferentes uno al lado del otro. Recomiendo no más de 3 familias de fuentes diferentes por conjunto de contenido. Después de demasiadas personalizaciones, tus palabras aparecen mezcladas y toda la página aparece como un montón de fuentes mal interpretadas..
Conclusión
Espero que estos conceptos arrojen algo de luz sobre el complicado tema de la tipografía digital. Puede ser difícil realmente entrar en el trabajo como diseñador, especialmente si todo el tema es ajeno a ti. Pero sigue estudiando y asegúrate de practicar un montón!
La próxima semana: Estad atentos ya que vamos a ver algunos herramientas y recursos útiles para una mejor tipografía web.
Más…
Aquí hay más publicaciones relacionadas con la tipografía:
- Escaparate de diseños web con hermosa tipografía.
- Mejor tipografía para sitios web modernos
- Guía rápida de tipografía: aprender y inspirarse
