Una mirada a la mejor tipografía para los sitios web modernos

El texto digital puede ser formateado en muchos sabores. Con el avance adicional de las fuentes web y los scripts del navegador, hemos visto un nuevo código de proyecto para que los desarrolladores lo utilicen. Los diseñadores web también están buscando 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 separa el diseño de la raíz. Bajo esta vista, es fácil ver cómo la tipografía puede fluir de una página a otra y ofrecer una salida única para la creatividad. Y esto se hace especialmente evidente construyendo 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 tipografía web son una excelente fuente para comenzar a actualizar sus páginas..

Diferencias en la Internet de hoy

La web moderna ha avanzado dramáticamente desde principios de 2000. Hay un montón de nuevas características para que los diseñadores web creen fantásticos trabajos de diseño gráfico, logotipos, pancartas 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 el CSS @Perfil delantero propiedad. Puedes usar cualquier Tipo verdadero(.ttf) o De tipo abierto(.otf) archiva y almacena una copia localmente en su servidor. Luego, con algo de magia CSS3, incluye la familia en cualquier lugar de tu página web.!

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

Y con jQuery creciendo en popularidad cada día, no es una sorpresa que podamos crear efectos de animación asombrosos 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 procesarse correctamente..

¡Pero gracias a Dios, la mayoría de los usuarios han cambiado a un nuevo software de navegación que respalda estos estándares! Y cuando se está desarrollando para la web, debe considerar exactamente para quién es su mercado. No puedes complacer a todos todo el tiempo, pero puedes intentar acercarte lo suficiente.

El propósito de la tipografía digital

Una especie de extraña idea 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 sus visitantes encuentren su sitio web en función de las palabras clave de su texto o encabezados, solo otra razón para prestar atención a su copia web. Y una vez que haya ganado algo de atención en su sitio web, debe mantener su concentración. Esto se hace más fácilmente con encabezados en negrita y texto de página espaciados uniformemente.

Si está escribiendo un artículo o un tutorial, debe utilizar un lenguaje claro. Sus Igualmente importante es el aspecto del texto de la página y la calidad del contenido.. Cuanto más grande sea el texto, más fácil será leer y escanear las palabras clave. Y dado que los párrafos contendrán la mayoría de su contenido, debería dedicar mucho tiempo a hacer prototipos para el ajuste correcto. Los párrafos se utilizan para transmitir su mensaje en trozos del tamaño de bits divididos en oraciones. Comprenda cómo escribe y planifique con anticipación para obtener un diseño de página adecuado.

Además, con el texto de su página viene contenido multimedia y secundario. Si sus párrafos contienen información primaria, quizás tenga gráficos o imágenes para darle vida a la página. Estos acentos son el toque correcto para que los usuarios se muevan a través de 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 deje que nada abrume su mensaje central. Los usuarios (en su mayoría) vienen a su sitio para obtener información y no quieren demasiadas distracciones.

Todas las demás opciones de formato se utilizan para especificar la funcionalidad o el propósito. Por ejemplo, el texto del hipervínculo suele ser de un color diferente al resto para destacar como “cliqueable”. Puede trabajar con palabras en negrita o en cursiva, 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 activos más importantes de su tipografía web son las etiquetas de encabezado. Si no está familiarizado con los encabezados HTML van desde

a

siendo el primero el que más importancia tiene y el segundo el menos importante. Este marcado es útil de entender, ya que Google también clasifica su dominio y sus páginas web según la estructura del contenido. Por lo tanto, en última instancia, usted tiene control sobre qué palabras clave usa y qué nivel de encabezados requeriría.

A pesar de que 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 tus páginas. Y también es altamente improbable que encuentres un uso para 6 encabezados diferentes. Cuando se siente por primera vez a construir sus estilos, intente redactar algunos ejemplos de encabezados para ver qué le gusta.

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

Por ejemplo, tu

Las etiquetas deberían destacar más 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 fuentes en negrita, subrayados, bordes discontinuos o diferentes colores ayudará a que sus títulos salten de la página..

El espacio también es importante cuando se trata de títulos, o cualquier parte de su contenido para el caso. Asegúrese de agregar márgenes adicionales entre sus encabezados y el área de contenido principal. Si ha hecho que su fuente sea lo suficientemente grande, cada encabezado debería destacarse como su propio bloque central. Este aspecto es ideal si desea atraer la atención de sus lectores con un mensaje claro..

Construyendo hipervínculos únicos

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

Usted debe elegir el texto de espera para su enlace con mucho cuidado. Este es el contenido específico que será 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 su texto de hipervínculo. Es más probable que sus visitantes hagan clic en un enlace si también pueden reconocer el contexto y tal vez descubrir qué contendrá la nueva página..

Cuando vayas a diseñar tus enlaces debes considerar lo siguiente - cómo se verían los cambios en la configuración de tu página, ¿En qué tipo de color de fondo estás trabajando?, y de que color es el texto para contraste?

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

Un punto de interés son algunas características que debe probar evitando. Las cosas como cambiar la familia de fuentes de texto o el tamaño de fuente pueden ser muy molestas. Esto hará que el texto se distorsione y se mueva, lo que puede colocar el cursor del mouse justo fuera de la zona de enlace. De manera similar, debe evitar agregar márgenes / relleno adicionales a sus enlaces o efectos de desplazamiento. Estos funcionan mucho mejor cuando te mantienes simple. Un cambio de color o un subrayado agregado contribuye en gran medida a la experiencia del usuario.

Construcción de listas de estilo

Es muy probable que también tengas que trabajar con listas en algún momento. Se incluyen las 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 encabezados, ya sea.

Sus visitantes deben comprender inmediatamente que están mirando una lista de artículos. Mantenga cada elemento de la lista separado y ubicado en una nueva línea en su página. Agregue un poco de espacio extra entre ellos, si es posible. Esto le dará un poco de espacio para respirar y aparecerá como una buena separación para el texto del artículo. Si lo desea, puede incluso resaltar un poco la fuente o las sangrías para que se aleje de los márgenes de diseño estándar..

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

Cómo crear citas en la página

La aparición de citas y citas son muy limitadas en estos días. En la red temprana no verías mucho de estos elementos en uso. Tal vez en editoriales, ensayos, o artículos educativos. Pero, sin duda, HTML5 ha actualizado un poco las reglas, lo que hace que las citas en bloque sean mucho más fáciles..

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