Una mirada hacia: mejor tipografía para sitios web modernos

El texto digital se puede formatear en muchos sabores. Con el avance de las fuentes web y los scripts del navegador, hemos visto un nuevo código de proyecto para que lo utilicen los desarrolladores. Los diseñadores web también buscan la mejor estrategia para codificar sus sitios web y crear un estilo tipográfico uniforme entre todas sus páginas.

Muchos diseñadores web profesionales han escrito sobre el tema, incluidas funciones y servicios actualizados. Debe considerar cada página web como un documento singular que interrumpe el diseño de su diseño raíz. Según esta visión, es fácil ver cómo la tipografía puede fluir de página a página y ofrecer una salida única para la creatividad. Y esto se vuelve especialmente evidente creando clases únicas para sus párrafos y encabezados.

A continuación voy a entrar en algunas ideas fantásticas para los aspirantes a diseñadores de tipografía interesados ​​en construir para la web. Los blogs, las redes sociales y las empresas siempre buscan actualizar su sitio web actual. Y los estilos CSS para la tipografía web proporcionan una excelente fuente para comenzar a actualizar sus páginas.

Diferencias en Internet de hoy

La web moderna ha avanzado de forma espectacular desde principios de 2000. Hay muchas características nuevas para que los diseñadores web creen fantásticos trabajos de diseño gráfico, logotipos, banners y prácticamente cualquier otra cosa. El lanzamiento de las especificaciones HTML5 y CSS3 también ha pasado factura a la antigua forma de crear fuentes web.

Ahora es completamente posible incluir sus propias fuentes con la propiedad CSS @font-face . Puede usar cualquier archivo TrueType (.ttf) o OpenType (.otf) y almacenar una copia localmente en su servidor. Luego, con algo de magia CSS3, incluye a la familia en cualquier lugar de tu página web.

Solo con esta técnica es posible ver cómo se ha desarrollado nuestra Internet moderna.

Y con jQuery creciendo en popularidad todos los días, no es sorprendente que podamos crear increíbles efectos de animación junto con fuentes personalizadas. Como alternativa al método anterior, el complemento TTFGen para jQuery le permite incluir cualquier fuente TrueType en su página web.

Este método es un poco más confiable ya que no necesita un navegador moderno que admita los estándares CSS3 para que funcione. Pero, por supuesto, los navegadores heredados como Internet Explorer 6 tendrán problemas para renderizar correctamente.

Pero, gracias a Dios, la mayoría de los usuarios han cambiado a un software de navegación más nuevo que sí lo hace. Y cuando se está desarrollando para la web, debe considerar exactamente para quién es su mercado. No puede complacer a todo el mundo todo el tiempo, pero puede intentar acercarse lo suficiente.

El propósito de la tipografía digital

Una especie de idea extraña a considerar, pero ¿cuál es el verdadero propósito del texto digital? Para transmitir información, compartir fuentes y ofrecer su opinión al mundo de los usuarios de Internet. El texto es la forma más simplista de los medios para compartir pensamientos e ideas . Pero también es muy complejo y contiene detalles importantes que las fotos / videos simplemente no pueden usar.

Es probable que los visitantes encuentren su sitio web basado en palabras clave en su texto o en sus encabezados; simplemente es otra razón para prestar especial atención a su copia web. Y una vez que haya ganado algo de atención en su sitio web, necesita mantener su concentración. Esto se hace más fácilmente con encabezados en negrita y texto de página espaciado uniformemente.

Si estás escribiendo un artículo o tutorial, entonces necesitas usar un lenguaje claro. Es igualmente importante cómo se ve el texto de su página y la calidad de su contenido. Cuanto más grande sea el texto, más fácil será leer y buscar palabras clave. Y dado que los párrafos contendrán la mayor parte de su contenido, debe dedicar mucho tiempo a crear prototipos para lograr el ajuste correcto. Los párrafos se utilizan para transmitir su mensaje en fragmentos del tamaño de un bit divididos en oraciones. Comprenda cómo escribe y planifique con anticipación para obtener un diseño de página apropiado.

Además, con el texto de su página viene contenido multimedia y contenido secundario. Si sus párrafos contienen información principal, tal vez tenga gráficos o imágenes para darle más sabor a la página. Estos acentos son el toque correcto para que los usuarios se muevan por su sitio.

Los videos y las imágenes pueden dividir su contenido y hacer que parezca que los lectores se mueven más rápido a través de su artículo. Pero use estos elementos con moderación y no permita que nada abrume su mensaje central. Los usuarios (la mayoría) van a su sitio para obtener información y no quieren demasiadas distracciones.

Todas las demás opciones de formato se usan para especificar funcionalidad o propósito. Por ejemplo, el texto del hipervínculo a menudo es un color diferente del resto para destacarse como "seleccionable". Puede trabajar con palabras en negrita o cursivas agregando énfasis en sus oraciones. Y el uso de blockquotes o texto preformateado puede ayudar a delinear declaraciones fundamentales o código web, respectivamente.

Encabezados de página web

Uno de los recursos más importantes para su tipografía web son las etiquetas de encabezado. Si no está familiarizado con los títulos de HTML van desde

a

con el primero teniendo la mayor importancia y el último menos. Este marcado es útil para entender, ya que Google también clasifica su dominio y páginas web en función de la estructura del contenido. Por lo tanto, en última instancia, usted tiene el control sobre las palabras clave que usa y el nivel de encabezados que necesita.

Aunque la especificación estándar de HTML5 incluye hasta 6 estilos de encabezado diferentes, recomendaría usar entre 3-4. No es necesario incluirlos todos en sus páginas. Y también es muy poco probable que encuentre un uso para 6 encabezados diferentes. Cuando se siente por primera vez para crear sus estilos, intente dibujar algunos ejemplos de encabezados para ver lo que le gusta.

Photoshop es excelente para este escenario. También podría intentar codificar diferentes encabezados en HTML para ver cómo se ven en el navegador. Lo importante es trabajar con el flujo de su página y los encabezados de diseño de acuerdo con su rango.

Por ejemplo, tu

las etiquetas deben destacarse entre todos los encabezados de sus páginas.

y

son las etiquetas más populares y recomendadas por Google para rastrear el contenido de la página. El uso de efectos de diseño como fuente en negrita, subrayados, bordes discontinuos o diferentes colores ayudará a que sus títulos salgan de la página.

El espaciado también es importante cuando se trata de encabezados, o cualquier parte de su contenido para ese asunto. Asegúrese de agregar márgenes adicionales entre los títulos y el área de contenido principal. Si ha creado una fuente lo suficientemente grande, cada encabezado debe destacarse como su propio bloque de núcleo. Este aspecto es ideal si desea captar la atención de sus lectores con un mensaje claro.

Construyendo hipervínculos únicos

Hay mucho que decir sobre el tema de enlaces de página. De una manera u otra, tendrá que usar hipervínculos en su código. Son extremadamente importantes como la interfaz de navegación principal entre las diferentes páginas de su sitio. También puede vincular a otros blogs o incluso a sus publicaciones de blog archivadas para referencia en una fecha posterior.

Debería elegir el texto de espera para su enlace con mucho cuidado. Este es el contenido específico que se verá acentuado por un estilo de enlace. Por ejemplo, "haga clic aquí" es muy popular y se usa para descargas directas la mayor parte del tiempo. Intente evitar este enfoque sistemático y, en su lugar, sea un poco creativo con el texto de su hipervínculo. Es mucho más probable que los visitantes hagan clic en un enlace si también pueden reconocer el contexto y quizás descubrir qué contendrá la nueva página.

Cuando vaya a personalizar sus enlaces, debe considerar lo siguiente: cómo se verían los cambios en la configuración de su página, en qué tipo de color de fondo está trabajando y de qué color es el texto para el contraste.

Los enlaces deben aparecer descaradamente fuera de la página como elementos que pueden hacer clic: después de todo, esa es su función. Esta es la razón por la que el viejo azul con efecto de texto subrayado funciona tan bien. Pero si encuentra que un color alternativo funciona mejor, debe probarlo. No hay una solución única para todos los diseños de enlaces. Solo navegue por la web un poco y seguramente creará algo excepcional.

Un punto de interés es algunas características que debe intentar evitar . Cosas como cambiar la familia de fuentes de texto o el tamaño de letra pueden ser muy molestas. Esto hará que el texto se distorsione y se mueva, lo que puede colocar el cursor del mouse fuera de la zona de enlace. De manera similar, debe evitar agregar márgenes / relleno extra a sus enlaces o efectos de desplazamiento. Estos funcionan mucho mejor cuando te mantienes simple. Un cambio de color o un subrayado agregado es muy útil para la experiencia del usuario.

Construcción de listas de estilo

Es probable que también deba trabajar con listas en algún momento. Se incluyen listas ordenadas y desordenadas en HTML. Estos son perfectos para ofrecer una pequeña colección de ideas, productos, personas o enlaces en línea en una cantidad muy pequeña de espacio. El estilo no es tan diferente de los párrafos o los títulos, tampoco.

Sus visitantes deben comprender inmediatamente que están viendo una lista de artículos. Mantenga cada elemento de la lista por separado y ubicado en una nueva línea en su página. Agregue algo de espacio extra entre ellos, si es posible. Esto dará un respiro y aparecerá como una buena separación para el texto del artículo. Si desea, incluso puede poner en negrita la fuente o las listas de sangría un poco para mantenerse alejado de los márgenes de diseño estándar.

Agregar características adicionales para ayudar a que su lista se destaque no es un requisito. Pero si disfrutas del estilo de diseño de bloques realmente tiene foco en tus listas. Podría intentar agregar un fondo claro o iconos. A List Apart tiene una gran reseña sobre las listas de domesticación, que creo que incluye algunas cositas de conocimiento muy poderosas. Pero si mantiene el contenido lineal de la página y usa los bloques de lista solo cuando sea necesario, no debería encontrarse con ningún retroceso en el diseño.

Cómo crear citas in-page

La apariencia de citas y citas es muy limitada actualmente. En la web inicial, no se veían muchos de estos elementos en uso. Quizás en editoriales, ensayos o documentos educativos. Pero HTML5 ciertamente ha actualizado las reglas un poco, lo que hace que citar blockquotes sea mucho más fácil.

El sitio web de HTML5 Doctor incluye un recurso fascinante para discutir este tema exacto. Discuten el uso del contenido dentro de las blockquotes como aspecto interno de la estructura del documento. Por lo tanto, puede incluir encabezados, párrafos e incluso listas y pies de página. El uso principal de un