¿Son las opciones débiles de las fuentes dañinas de su diseño web de WordPress?

Si hubiera tal cosa como el diccionario de desarrolladores web, probablemente encontraría la palabra impresión definida como “la desgracia de su existencia”. Realmente parece estúpido. ¿Cómo podría algo tan pequeño y aparentemente inocente para una fuente causar tantos trastornos de diseño web? Las opciones de fuentes, como cualquier otra cosa en el diseño web, tienen un impacto significativo en la recepción general de un sitio web. Tono. Balance. Caudal. Estas son solo algunas de las formas en que una mala elección de fuente puede tener un efecto negativo en su sitio web y puede arrojar todo en el desorden.
Si está cansado de confiar en las opciones de fuente predeterminadas de los temas de WordPress y desea diseñar de manera más eficiente con la impresión, siga leyendo para obtener consejos y herramientas que le permitirán hacerlo.

Un gran ejemplo de tipografía realizada correctamente, a través de la amabilidad de Gearoid.io
Su guía para un uso más eficiente de las fuentes de diseño web para comenzar abordando lo que es obvio: hay demasiadas fuentes allí. Parece que sería más efectivo usar solo una de las fuentes del sistema predeterminadas, ¿verdad? Aunque ciertamente sería más fácil, lo más probable es que no sea más eficiente, y explicaré por qué.
Las palabras escritas en un sitio web son la voz (digital) de una empresa o persona.
Base en una fuente que parece que todos y su sitio se perderán en la mezcla.
Use una fuente predeterminada sin pensarlo y la gente lo verá.
Elija el color incorrecto, y los mensajes relevantes y perspicaces pueden ser demasiado difíciles de leer.
Elija una fuente que implique un estilo de vida amoroso y sin preocupaciones, y las personas pueden no tomar su negocio con botones. Hay mucho en juego para elegir las fuentes. Y debido a que hay miles de opciones de tipografía para investigar, es fácil sentirse abrumado. Permítame asegurarle, sin embargo, una vez que comprenda el mensaje de su sitio web, mejor responderá una serie de preguntas clave que restringirán estas opciones.
Antes de comenzar a modelar y fortalecer la identidad digital de su sitio web utilizando la impresión, recuerde que no es encontrar una sola fuente para usar en todo el sitio. Al examinar los siguientes consejos y herramientas, considere diferentes tipos de texto y objetivos, lo utilizará en su sitio web, como:
El texto de la imagen del héroe
titulares
Subtítulos
El texto del cuerpo para páginas internas
Tipografía funcional (como CTA)
Tipo de logotipo
Texto de navegación
Hipervínculo de texto
Texto de formulario
Como puede ver, las opciones que realiza en la impresión tiene grandes efectos, por lo que es importante tomarla una por una. ¿Estás listo?
Consejos para restringir las opciones de fuentes Cada uno de los siguientes consejos le dará orientación para tomar decisiones mejores y más eficientes. Consejo 1: Mezcle sus fuentes cuando use diferentes fuentes en su sitio web, piense en cómo trabajarán juntas. Aunque puede no funcionar demasiado contraste, desea un poco de tensión para hacer las diferencias entre los tipos de texto lo suficientemente sorprendente como para atraer la atención. Considere la asociación de fuentes que alcanzan un equilibrio. Debe ser compatible pero no en forma. Sorprendentemente, pero no decepcionante. Estas son algunas de ellas algunas de las sugerencias de asociación común:
Serif + sans serif
Escrito a mano + escenario
Fuente delgada + fuente dura
Tipowolf es un recurso fantástico para la inspiración y los recursos de Tygorafia.
Tipowolf es mi recurso favorito para pares de fuentes e inspiración para el diseño. ¡Podría pasar horas navegando por este sitio! Consejo 2: No exagere después de pasar por este ejercicio, es posible que tenga una lista sólida de 10 o más fuentes que funcionarán bien para su sitio. Pero recuerde que es demasiado, especialmente en la web de diseño, puede ser mala para la experiencia del usuario.

Mantenga las opciones finales de las fuentes al mínimo. Elija dos o tres fuentes diferentes y luego confíe en diferentes estilos para proporcionar variedad a diferentes tipos de texto en el sitio. Consejo 3: Haga coincidir su estilo para elegir la fuente, aunque importante, probablemente será uno de los últimos que hagas en el diseño de un sitio web. Una vez que haya creado la estética de su sitio a través de colores, imágenes y espacio en blanco, deberá encontrar fuentes que reflejen el mismo estilo. Si aún no tiene el hábito de hacer esto, cree una guía de estilo integral en una sola página, que presenta todas sus opciones de marca. Esto lo ayudará a ver mejor qué historia cuentan sus opciones de diseño sobre la personalidad de su marca.
Consejo 4: Haga coincidir su estilo de voz y la voz difiere ligeramente cuando se trata de diseño. El estilo se trata de identidad global. Es por eso que un bufete de abogados probablemente evitaría usar fuentes cursivas en su sitio. Sin embargo, la voz se trata más del tono de su mensaje. ¿Su voz transmite un tono directo sin tonterías? ¿O es adecuado para una frase más grande y audaz? Cada fuente tiene un tono construido, por lo que tendrá que asegurarse de que te coincida.
Consejo 5: Trata las fuentes en la página inicial como en algunas imágenes debido al minimalismo y al estilo Paralax, las páginas iniciales ya no están compuestas de párrafos voluminosos. Conciso. Atrevido. Atractivo.

El logotipo de la página inicial de la lista aparece el texto que se muestra de manera inusual.
Esto es lo que todos esperamos copiar la página de inicio en estos días. Y, debido a esto, ahora podemos divertirnos más con el estilo del texto de la página inicial. Esto no significa que los consejos anteriores deben ignorarse, pero significa que puede usar una impresión más grande, una tipografía estilizada y una tipografía lo suficientemente fuerte como para agregar profundidad a un espacio libre, de lo contrario, 6: hacer que el tamaño sea el tamaño de La fuente cuenta, no solo para la legibilidad, sino también en términos de establecer la jerarquía. La recomendación estándar para el tamaño de fuente más pequeño aceptable (generalmente que se encuentra en el texto del cuerpo) es de 16 píxeles. Si tiene una fuente de kerning apretada o que tiene un estilo más delgado, considere comenzar con un píxel más grande. Luego, asegúrese de amplificar los tamaños del tipo de encabezado utilizando esa dimensión básica para referencia. También es importante tener en cuenta cómo el tamaño de la fuente afectará la longitud de las líneas en cada página (lo que puede afectar la legibilidad). Idealmente, elegir la fuente debe tener entre 45 y 75 caracteres en cada línea.
Consejo 7: Sea creativo, pero no muy creativo, el diseño web es siempre un ejercicio de control, ¿no? Tienes una idea en tu cabeza, te vuelves un poco loco cuando la colocas (¡porque todo parece genial!), Y luego tienes que sostenerlo. Sugeriría hacer lo mismo con las fuentes. Siéntase libre de ser creativo para seleccionar su primer lote de fuentes. Luego, cuando llegue el momento de restringirlos, encontrará una hermosa mezcla entre el conservador y lo creativo. Los consejos para usar fuentes en el diseño web Cada uno de los siguientes consejos le dará orientación sobre cómo usar la impresión de su sitio web mejor. Consejo 8: Haga una tipografía receptiva cuando se trata de un diseño receptivo, hay una serie de factores de impresión que debe tener en cuenta: tamaño mínimo de fuente (no menos de 16 píxeles)

Interletrado
Guiar
Llenando la página y las secciones
El número de fuentes utilizadas en un espacio dado
Número de tamaño de fuente utilizado en un espacio determinado
No hay necesidad de buscar fuentes “receptivas”. Lo importante es diseñar su sitio web dada la legibilidad en múltiples plataformas. Si está interesado en aprender a configurar CSS para la impresión de fluidos o la configuración de impresión receptiva, Smashing Magazine tiene algunos tutoriales que vale la pena verificar.
Consejo 9: Considere que el color del color es tan importante para imprimir como en cualquier otra cosa en el diseño web. Cuando decida qué colores usar en su diseño, piense en lo siguiente:
Los colores de las fuentes deben alinearse con su paleta de colores.
Si observa este selector de paleta de materiales, verá que sus recomendaciones siempre incluyen el color del texto. Estos colores siempre serán un tono de negro para una legibilidad más fácil. Reutilice el color constantemente en todo su sitio. Si un hipervínculo es azul claro, todo debe ser azul claro. Esto ayuda a los visitantes a aprender sus pistas visuales más fácilmente.
No tenga miedo de usar colores contrastantes entre las fuentes, así como en contraste los otros colores utilizados en el sitio. Esto lo ayudará mejor a mantener la atención de los visitantes.
Use el color para demostrar relaciones, crear una jerarquía o llamar la atención sobre los mensajes más importantes.

Para el texto del encabezado, se deben usar colores más oscuros y audaces, porque esos colores se atraen naturalmente.
El texto más fácil se puede usar en el cuerpo, pero debería ser lo suficientemente difícil como para leer en el fondo.
Evite colocar el texto sobre las imágenes ocupadas, incluso si la parte “ocupada” está alrededor del texto. Si no está seguro de que la legibilidad no se moleste en pantallas más pequeñas, siempre es más seguro mantenerse alejado del diseño de texto.
Elija los dos colores favoritos, y la paleta de materiales le da sugerencias para colores coincidentes y texto principal.
Consejo 10: Mejorar la escane y la legibilidad de acuerdo con un estudio reciente de los movimientos oculares y los comportamientos de lectura web, solo se lee alrededor del 20% de una página web. Entonces, en lugar de esperar que sus visitantes no sean la norma, prepárese para lo que es peor y mejore la capacidad de escaneo de copia usando encabezado Etiquetas (H2, H3, H4, etc.) para subtítulos. Usando opciones de fuentes en negrita en estos encabezados, facilitará que los visitantes salgan a las secciones que desean leer. Recursos para encontrar y usar fuentes de manera más eficiente hasta ahora , debe tener una buena idea sobre el tipo de fuentes que funcionarán mejor. El siguiente paso es identificar esas fuentes y luego usarlas en el diseño de su sitio. Aquí hay algunas herramientas para comenzar: complementar Google Fonts fácilmente
Google actualmente tiene más de 800 fuentes disponibles para su uso. Aunque puede acceder a su sitio web y verificar las opciones de fuentes allí, le sugiero que use el complemento fácil de Google Fonts. Esto le dará la oportunidad de probar diferentes fuentes de Google en su sitio web y le dará una idea de cómo se verán con su diseño.
Detalles
Ardilla de fuente
Si desea tomarse un tiempo en busca de las fuentes adecuadas para su sitio, le recomiendo que comience con Font Squirrel. Puede que no tenga tantas fuentes como algunas de los otros proveedores de fuentes gratuitos, pero sus ofertas parecen ser administradas con más experiencia. Separan sus fuentes en función de los tipos que más importan para los diseñadores (como Serif vs. Sans Serif), así que comience aquí si desea encontrar sus fuentes de manera más eficiente. ¿Estás interesado en Font Squirrel? Detalles

Fontestrucción
Para algunos de ustedes, la visión que tuvo para las fuentes de su sitio puede no alinearse con lo que es fácil de disponible en línea. Además, es posible que prefiera crear una fuente personalizada que nadie más tenga. Si este es el caso, puede usar la herramienta de creación de fuentes de FontStruct Free. ¿Estás interesado en FontStruct?
Detalles

Font Matcherator
Supongamos que tiene una foto o imagen que contiene un texto genial y realmente quiere saber qué fuente se ha utilizado. Aunque hay un software de diseño que puede ayudarlo a identificar esa fuente, use la herramienta Font Matcherator. Simplemente cargue la imagen que contiene el texto y deje que la herramienta encuentre la fuente más adecuada para usted. ¿Está interesado en Font Matcherator?
Detalles

Combinaciones de fuentes
Soy un gran admirador de todo lo que hace el canal. La mayoría de sus herramientas de diseño son gratuitas y han hecho un buen trabajo todas sus bases. Por lo tanto, no es sorprendente que hayan venido con esta herramienta útil para asociar fuentes de “tipografía simple”. Es bueno usar si ha encontrado una fuente que funcione bien para su sitio, pero no está seguro de qué asociarlo. Esto funciona y si solo desea verificar su compatibilidad con fuentes. ¿Está interesado en las combinaciones de fuentes?
Use el complemento de cualquier fuente

Una vez que haya seleccionado las fuentes, el complemento usa cualquier fuente lo ayudará a cargar esas fuentes en el sistema y comenzar a usarlas de inmediato. La opción alternativa es agregar nuevas fuentes a su sitio de WordPress usando CSS. ¿Estás interesado en usar algún complemento para Font?
Detalles
Entonces, la conclusión, ¿cuál es la gran lección para tomar de todo esto? No necesita sentirse intimidado por las miles de fuentes disponibles en línea. Usando las mejores prácticas y las herramientas adecuadas, será mucho más fácil para usted encontrar las fuentes perfectas y usarlas de una manera que impresione a sus visitantes.

Nos dirigimos a usted: cuéntenos en los comentarios a continuación sobre un momento en que una nueva opción de fuentes afectó su sitio (negativo o positivo).
Etiquetas:
diseño

Fuentes