\n Aqu\u00ed estamos discutiendo solo el enlace de UX y tipograf\u00eda, sin mencionar el papel de la tipograf\u00eda en la formaci\u00f3n de la personalidad visual del sitio web, la definici\u00f3n de su marca y la captura de la atenci\u00f3n del lector. Consulte este art\u00edculo<\/a> para obtener m\u00e1s informaci\u00f3n.\n<\/p>\n \n La elecci\u00f3n de la tipograf\u00eda para el sitio web de esta iglesia no solo impulsa la UX en el sitio web, sino que tambi\u00e9n ayuda a dar forma a la identidad visual de la marca).\n<\/p>\n \n \u00bfC\u00f3mo impulsar UX en su sitio web mediante la optimizaci\u00f3n de la tipograf\u00eda?\n<\/p>\n \n Hay varias formas de impulsar la UX en tu sitio web mediante la optimizaci\u00f3n de la tipograf\u00eda. Como la UX y la tipograf\u00eda est\u00e1n estrechamente conectadas, al optimizar la tipograf\u00eda, tambi\u00e9n optimiza la legibilidad de su texto y, por lo tanto, se suma a la UX general en su sitio web. Veamos cu\u00e1les son las reglas para optimizar la tipograf\u00eda:\n<\/p>\n \n Si desea que su sitio web se vea coherente y profesional, use hasta tres fuentes (no m\u00e1s). Diferentes fuentes en un sitio web chocan y distraen al usuario de leer el texto. El empleo de varias fuentes de apariencia similar lo ayuda a crear coherencia de UX en todas las p\u00e1ginas de su sitio web y evita que los usuarios adopten cambios de estilo frecuentes.\n<\/p>\n \n Esto es exactamente lo que debe evitar en su sitio web.\n<\/p>\n \n A menudo, el empleo de una sola fuente es suficiente. Si a\u00fan siente que necesita un par de fuentes, elija las fuentes que tienen el mismo ancho de car\u00e1cter. En este caso, las fuentes no diferir\u00e1n demasiado entre s\u00ed y no distraer\u00e1n al lector.\n<\/p>\n \n Este sitio web en remodelaci\u00f3n utiliza la fuente no convencional Six Caps para impulsar la identidad visual del sitio web. Esta fuente se combina con Roboto Condensed para tener dos fuentes, cuyos anchos de car\u00e1cter coinciden.\n<\/p>\n \n Otra gran idea sobre la combinaci\u00f3n de un par de fuentes es unir las fuentes que imitan la escritura a mano con las normales. La tipograf\u00eda manuscrita agrega un toque personal al dise\u00f1o general de su sitio web y desarrolla el car\u00e1cter visual de su sitio web.\n<\/p>\n \n Este sitio web tiene una sensaci\u00f3n suave y femenina con la fuente de escritura a mano Caveat.\n<\/p>\n \n Las serifas son las l\u00edneas peque\u00f1as al final de los trazos de las letras. En la tipograf\u00eda impresa, las serifas ayudan a las personas a reconocer las letras impresas de manera m\u00e1s r\u00e1pida y eficiente. Sin embargo, en la pantalla, especialmente en una que no es Retina, las serifas no est\u00e1n tan bien delineadas como en el papel, lo que dificulta parcialmente la lectura.\n<\/p>\n \n Adem\u00e1s de garantizar una mejor legibilidad, las fuentes sans serif hablan de una manera m\u00e1s audaz y minimalista.\n<\/p>\n \n Aqu\u00ed, no estoy argumentando que deber\u00edas abandonar por completo las fuentes serif. Un mejor consejo ser\u00eda tener m\u00e1s cuidado con ellos y usar los que son limpios y precisos.\n<\/p>\n \n Por ejemplo, este sitio web de fotograf\u00eda creativa utiliza la fuente Open Sans sans serif que ayuda al sitio web a hacer una declaraci\u00f3n audaz, elegante y decisiva.\n<\/p>\n \n El espacio en Internet es ilimitado. Es por eso que no hay necesidad de guardarlo y optar por tama\u00f1os de fuente peque\u00f1os que imponen fatiga visual adicional a los usuarios. Los lectores con problemas de visi\u00f3n pueden experimentar dificultades para leer textos peque\u00f1os, mientras que incluso los lectores con buena vista experimentan fatiga y tienen que tomar descansos para llegar al final de, digamos, un texto de 10 puntos.\n<\/p>\n \n Si no quiere que sus usuarios tengan problemas para leer el texto que presenta o acercarlo, opte por tama\u00f1os de fuente de 16 puntos o m\u00e1s. Dichos tama\u00f1os de fuente minimizan la fatiga visual y ayudan a los usuarios a lograr su objetivo en su sitio web sin agotamiento visual.\n<\/p>\n \n El sitio web de Malcolmy utiliza tipograf\u00eda legible de 16 puntos para sus p\u00e1ginas de inicio y blog.\n<\/p>\n \n En su sitio web, no debe llenar todo el espacio disponible con su texto. Al tener en cuenta una longitud de l\u00ednea \u00f3ptima, se apega a altos est\u00e1ndares de experiencia de lectura. Si las l\u00edneas son demasiado cortas, los ojos del lector tienen que ir y venir al leer el texto, lo que impone una fatiga visual adicional. Si las l\u00edneas son demasiado largas, es demasiado dif\u00edcil concentrarse en la palabra exacta que est\u00e1 leyendo y demasiado f\u00e1cil perderse.\n<\/p>\n \n Para evitar ambas situaciones adversas, ap\u00e9guese a 60 caracteres por l\u00ednea (para pantallas de tabletas\/PC).\n<\/p>\n \n Esta imagen ilustra que los textos con l\u00edneas demasiado cortas o demasiado largas son m\u00e1s dif\u00edciles de leer que los textos que se adhieren a la longitud de la l\u00ednea \u00abmedia dorada\u00bb de ~ 60 puntos.\n<\/p>\n \n La longitud de l\u00ednea \u00f3ptima para dispositivos m\u00f3viles (por ejemplo, tel\u00e9fonos inteligentes) es m\u00e1s corta. Para que el texto sea legible en pantallas peque\u00f1as, la l\u00ednea debe incluir entre 30 y 40 caracteres.\n<\/p>\n \n Como sabes, el tama\u00f1o de letra de los encabezados suele ser mayor que el del cuerpo del texto. Los encabezados tambi\u00e9n difieren en tama\u00f1o, desde el m\u00e1s peque\u00f1o hasta el m\u00e1s grande. En su sitio web, tendr\u00e1 que elegir diferentes tama\u00f1os de fuente para varios elementos (por ejemplo, botones, subt\u00edtulos, elementos de navegaci\u00f3n, etc.), as\u00ed como diferentes pesos de fuente para enfatizar.\n<\/p>\n \n Para garantizar la distinci\u00f3n de los elementos de su sitio web, elija una fuente que venga en varios tama\u00f1os y pesos. Si elige una de las fuentes est\u00e1ndar, por ejemplo, el tipo de letra Roboto de Google Fonts, ver\u00e1 todas las variaciones que tiene. Algunas fuentes vienen en m\u00e1s de 10 variaciones, otras solo tienen un par. Elija una fuente que tenga un amplio conjunto de variaciones para garantizar una representaci\u00f3n de contenido diversa en su sitio.\n<\/p>\n \n Diferentes estilos de fuente de la fuente Roboto Google.\n<\/p>\n \n Los tiempos de los sitios web multicolores y gritones han pasado. Ahora, la legibilidad y el contraste son las fuerzas dominantes que determinan las opciones de color. En primer lugar, su contenido debe ser legible, y la combinaci\u00f3n que durante muchos a\u00f1os se pens\u00f3 como la mejor es texto negro sobre fondo blanco. Esta combinaci\u00f3n asegura el m\u00e1ximo contraste y se remonta a los tiempos de la tipograf\u00eda cl\u00e1sica.\n<\/p>\n \n Sin embargo, recientemente, a menudo se argumenta que el color negro impone m\u00e1s fatiga visual que el gris oscuro. Los tonos de gris oscuro tambi\u00e9n contrastan bien con el fondo blanco, pero son un poco menos densos y brindan una experiencia de lectura m\u00e1s c\u00f3moda.\n<\/p>\n \n Estos son los tonos de gris que superan al negro para garantizar una experiencia de lectura c\u00f3moda.\n<\/p>\n \n Una p\u00e1gina de sitio web que utiliza gris oscuro como color de texto del control deslizante.\n<\/p>\n \n Al elegir el color, aseg\u00farese de probarlo en diferentes dispositivos y en diferentes entornos. El texto que es bueno para leer en un entorno de oficina t\u00edpico puede ser dif\u00edcil de distinguir en un tel\u00e9fono inteligente, especialmente cuando se usa al aire libre. Es dif\u00edcil tener en cuenta todos los factores, pero su objetivo debe ser tener en cuenta la mayor\u00eda de los entornos y brindar una experiencia de navegaci\u00f3n c\u00f3moda a diferentes grupos de usuarios.\n<\/p>\n \n Minimizar la altura de la l\u00ednea para que quepa m\u00e1s contenido no es una buena pr\u00e1ctica. Si las l\u00edneas est\u00e1n demasiado cerca una de la otra, es m\u00e1s probable que un lector salte a la l\u00ednea anterior o posterior y se quede atascado. El espacio entre l\u00edneas (interlineado) debe ser un 30% mayor que la altura de los caracteres utilizados. Tal gu\u00eda asegura la mejor legibilidad del contenido y su clara percepci\u00f3n visual.\n<\/p>\n\n 1: Minimice la cantidad de fuentes utilizadas
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: Elija fuentes Sans Serif para mejorar la legibilidad
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Tenga en cuenta el tama\u00f1o de fuente decente
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Observe la longitud de l\u00ednea \u00f3ptima
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: Elija tipos de letra que funcionen bien en diferentes tama\u00f1os
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: Haga elecciones de color inteligentes
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: No experimente con la altura de l\u00ednea
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n