{"id":38969,"date":"2017-07-12T07:05:34","date_gmt":"2017-07-12T07:05:34","guid":{"rendered":"https:\/\/wp.lvh.me\/blog\/2017\/07\/12\/como-aplicar-las-tipografias-de-forma-creativa-sin-arruinar-tu-reputacion-online\/"},"modified":"2022-05-08T15:22:00","modified_gmt":"2022-05-08T15:22:00","slug":"como-aplicar-las-tipografias-de-forma-creativa-sin-arruinar-tu-reputacion-online","status":"publish","type":"post","link":"https:\/\/wpstaging.mailrelay.com\/es\/blog\/2017\/07\/12\/como-aplicar-las-tipografias-de-forma-creativa-sin-arruinar-tu-reputacion-online\/","title":{"rendered":"\u00bfC\u00f3mo aplicar las tipograf\u00edas de forma creativa sin arruinar tu reputaci\u00f3n online?"},"content":{"rendered":"

\"tipografias\"<\/p>\n

A menudo se habla de la imagen corporativa<\/a> y de c\u00f3mo \u00e9sta se debe aplicar de manera coherente y uniforme entre todos los canales de marketing que utiliza cada negocio.<\/p>\n

<\/p>\n

Entre los elementos que conforman la identidad de una marca, est\u00e1n las tipograf\u00edas, por lo que saber c\u00f3mo aplicarlas es b\u00e1sico en este campo.<\/p>\n

Aplicar bien las tipograf\u00edas no consiste s\u00f3lo en elegir cu\u00e1l representa a la marca y en saber c\u00f3mo utilizarla para cada elemento (logotipo, textos para web, correspondencia en papel, etc.), \u00a1todo lo contrario!, hay que saber qu\u00e9 es lo que mejor funciona mejor en cada medio y cu\u00e1les son sus limitaciones.<\/p>\n

\u201cSaber seleccionar las tipograf\u00edas adecuadas es muy importante cuando se busca legibilidad y representatividad, especialmente en el mundo online, donde se premia a la creatividad en su justa medida.\u201d<\/strong><\/p>\n

Las tipograf\u00edas son uno de los elementos diferenciadores de las marcas, eso est\u00e1 claro, pero abusar de la creatividad en este aspecto y olvidarse de la legibilidad termina perjudicando gravemente a la experiencia de usuario y, por tanto, la reputaci\u00f3n online<\/a>.<\/p>\n

En muchas ocasiones, si no se aplica correctamente el estilo tipogr\u00e1fico seg\u00fan el soporte o medio en cuesti\u00f3n, el mensaje termina por perderse, generando con ello una mala impresi\u00f3n en el usuario (m\u00e1s adelante te contar\u00e9 mi caso particular con el tema del e mail marketing<\/a>).<\/p>\n

Piensa que, por muy creativo y diferente que sea el estilo de tu marca, el consumo de contenidos a trav\u00e9s de dispositivos digitales, es necesario que el texto se lea bien, que el fondo no moleste y que el tama\u00f1o de letra sea el adecuado.<\/p>\n

Por ello, en este post quiero que abarques conmigo cuestiones relacionadas con el correcto uso de las tipograf\u00edas. Concretamente:<\/p>\n\n

\"\u00a1Env\u00eda<\/a><\/p>\n

\u00bfC\u00f3mo funciona la tipograf\u00eda en el mundo online y qu\u00e9 influencia<\/a> tiene sobre la percepci\u00f3n de los usuarios?<\/h2>\n

Hay quienes dicen que el uso correcto de las tipograf\u00edas es todo un arte de la articulaci\u00f3n de una marca (o brand articulation); cada dise\u00f1o tipogr\u00e1fico transmite unos conceptos diferentes pero, adem\u00e1s, utilizarlas en uno u otro canal puede aportar muchos matices.<\/p>\n

A priori, parece banal dedicarle tiempo a este aspecto que puede parecer tan peque\u00f1o en el desarrollo de una identidad corporativa. Sin embargo, este elemento es el que va a fomentar la lectura de tus contenidos, as\u00ed que… \u00a1es s\u00faper importante!<\/strong><\/p>\n

Conocer todas las tipograf\u00edas que existen y sus significados es imposible (adem\u00e1s surgen nuevas constantemente), pero s\u00ed se pueden conocer las clasificaciones que hay al respecto y qu\u00e9 rasgos generales comparten:<\/p>\n

[su_list icon=\u00bbicon: check-square\u00bb icon_color=\u00bb#38aaf8″]<\/p>\n

    \n
  1. Serif<\/strong>: Son las tipograf\u00edas con adornos. Tienen una gran influencia en la caligraf\u00eda antigua hecha a mano, y surgieron con la creaci\u00f3n de la imprenta. Pueden tener m\u00e1s o menos adornos en funci\u00f3n de la \u00e9poca de su creaci\u00f3n, pero siempre son trazos complicados y muy trabajados.<\/li>\n
  2. Sans Serif<\/strong>: Propias de la revoluci\u00f3n industrial, son mucho m\u00e1s sencillas que las anteriores. No tienen \u201cserifas<\/em>\u201d es decir, remates en sus extremos. La m\u00e1s com\u00fan es la tipograf\u00eda Arial. Son las m\u00e1s utilizadas en los canales online gracias a su alta legibilidad en pantalla.<\/li>\n
  3. Manuscritas<\/strong>: Esta tipograf\u00eda, tambi\u00e9n conocida como script, es la m\u00e1s semejante a la caligraf\u00eda a mano. Son de tipo cursiva y de legibilidad media. Suelen utilizarse m\u00e1s para el encabezado de textos o t\u00edtulos que para un cuerpo textual completo.<\/li>\n
  4. De exhibici\u00f3n<\/strong>: Son las que m\u00e1s carga emocional transmiten. Representan \u00e9pocas, movimientos culturales, sentimientos, incluso caracter\u00edsticas de la personalidad de sus dise\u00f1adores. Algunas se dise\u00f1an para fines concretos, como la tipograf\u00eda de Star Wars, y terminan asoci\u00e1ndose r\u00e1pidamente a esa marca que hay detr\u00e1s de su dise\u00f1o.<\/li>\n<\/ol>\n

    [\/su_list]<\/p>\n

    Adem\u00e1s del tipo de tipograf\u00eda elegido, hay otros elementos visuales que forman parte de la maquetaci\u00f3n de un texto e influyen en c\u00f3mo \u00e9sta representa a la marca. Vamos a verlos en el siguiente apartado.<\/p>\n

    \"tipografias\"<\/p>\n

    \u25ba\u00a0Elementos diferenciadores que personalizan a tu marca<\/h3>\n

    Cuando se genera un contenido online, se piensa en el propio mensaje y en el dise\u00f1o. Y el dise\u00f1o no hace s\u00f3lo referencia a los colores o las im\u00e1genes utilizadas, tambi\u00e9n entra en juego la maquetaci\u00f3n del texto.<\/p>\n

    \u201cAplicar elementos diferenciadores en la maquetaci\u00f3n de los textos, marca la diferencia entre una marca y su competencia.\u201d<\/strong><\/p>\n

    Vamos a ver qu\u00e9 elementos debes tener claros y c\u00f3mo afectan al mensaje que quieres transmitir:<\/p>\n

    [su_list icon=\u00bbicon: check-square\u00bb icon_color=\u00bb#38aaf8″]<\/p>\n

      \n
    1. Formas<\/strong>: Los diferentes tipos de letra pueden ser m\u00e1s redondeados, alargados, cuadrados, etc. Estas formas tan diferentes evocan diferentes sensaciones. Por ejemplo, las letras muy redondeadas con volutas en las serifas tienden a recordar \u00e9pocas hist\u00f3ricas, y las que son m\u00e1s cuadradas se relacionan con los 80 y las nuevas tecnolog\u00edas de la \u00e9poca.<\/li>\n
    2. Combinaciones<\/strong>: A la hora de maquetar, se pueden utilizar diferentes tipograf\u00edas en un mismo mensaje. Se pueden utilizar tipograf\u00edas m\u00e1s trabajadas para los t\u00edtulos o mensajes destacados, y otras m\u00e1s sencillas para el cuerpo textual. De esta manera, la maquetaci\u00f3n parecer\u00e1 m\u00e1s ordenada y visual.<\/li>\n
    3. Contrastes<\/strong>: En l\u00ednea al punto anterior, si se van a combinar diferentes tipograf\u00edas, hay que buscar que \u00e9stas contrasten, para que quede claro que no es un error provocado por la semejanza entre ambas tipograf\u00edas. Lo que no es recomendable es aplicar m\u00e1s de dos tipograf\u00edas para un mismo medio.<\/li>\n
    4. Tama\u00f1o<\/strong>: En funci\u00f3n del tipo de soporte, el tama\u00f1o adecuado var\u00eda. En el entorno digital no es recomendable utilizar menos de un 10 o un 12, dependiendo de las tipograf\u00edas, ya que se perder\u00eda legibilidad. A partir de este tama\u00f1o, se pueden utilizar letras m\u00e1s grandes para destacados, t\u00edtulos, etc., pero siempre pensando en que se va a leer en una pantalla y no se puede abusar de los textos grandes, ya que no ser\u00e1n c\u00f3modos.<\/li>\n
    5. Sangr\u00edas<\/strong>: Al maquetar textos para canales online, las sangr\u00edas a menudo son menos utilizadas que en los medios offline. La maquetaci\u00f3n suele hacerse en cajas o tablas y las sangr\u00edas pierden relevancia, aunque en un texto largo siempre son \u00fatiles y se pueden incluir.<\/li>\n
    6. Interlineado<\/strong>: En online el interlineado m\u00ednimo es en torno a 1,15. Menos de eso hace que las letras se junten (los palos bajos de una l\u00ednea con los palos altos de la de abajo) y sea el texto sea muy dif\u00edcil de leer.<\/li>\n
    7. Negritas<\/strong>: Utilizadas para remarcar mensajes importantes, textos destacados o encabezados. En online a veces es recomendable utilizarlas en lugar de mezclar diferentes tipograf\u00edas. Depender\u00e1 del canal y de la longitud del mensaje y de los textos a remarcar.<\/li>\n
    8. May\u00fasculas<\/strong>: A parte de su uso correcto seg\u00fan las normas ortogr\u00e1ficas, las may\u00fasculas pueden dar mucho juego al maquetar contenidos online. Hay que tener en cuenta que en los canales digitales el uso de may\u00fasculas se entiende como un grito o una exaltaci\u00f3n, por lo que no hay que utilizarlas sin sentido.<\/li>\n<\/ol>\n

      [\/su_list]<\/p>\n

      Un buen uso de estos elementos, facilita que la maquetaci\u00f3n resulte en textos legibles y entendibles, que aporten valor a\u00f1adido a la marca y su reputaci\u00f3n online<\/a>.<\/p>\n

      \u25ba Errores de legibilidad web<\/h3>\n

      Es bastante habitual confundir conceptos de legibilidad online y offline. Hay que tener siempre presente que no es lo mismo leer un peri\u00f3dico, una carta o una lona, que leer a trav\u00e9s de una pantalla.<\/p>\n

      Adem\u00e1s, hoy en d\u00eda los contenidos deben ser responsive para poder consumirse a trav\u00e9s del ordenador, de la tablet o del m\u00f3vil. Por lo tanto, es necesario pensar en la legibilidad en pantallas peque\u00f1as.<\/p>\n

      Es com\u00fan, al olvidarse de ese aspecto, cometer alguno de estos errores:<\/p>\n

      [su_list icon=\u00bbicon: check-square\u00bb icon_color=\u00bb#38aaf8″]<\/p>\n

        \n
      1. Falta de jerarqu\u00eda<\/strong>: Al maquetar un contenido es muy necesaria la jerarqu\u00eda, no s\u00f3lo visualmente, sino indic\u00e1ndola a trav\u00e9s de los H1, H2, H3\u2026 De esta manera, esa jerarqu\u00eda se adapta a las necesidades de cada pantalla.<\/li>\n
      2. Contraste bajo<\/strong>: A veces, por seguir la l\u00ednea crom\u00e1tica de una identidad visual, se utilizan colores muy dif\u00edciles de leer que a penas contrastan entre ellos. Para facilitar la legibilidad, es necesario utilizar una letra que contraste mucho con el fondo (a ser posible, negro o colores oscuros sobre blanco o colores muy claros).<\/li>\n
      3. Mala selecci\u00f3n de tama\u00f1o<\/strong>: Al elegir un tama\u00f1o de letras, se puede hacer de manera relativa (que ocupe cierto espacio dentro de todo el dise\u00f1o) o de manera absoluta (que mida ciertos p\u00edxeles en concreto). En los medios online, es m\u00e1s adecuado utilizar los tama\u00f1os relativos que se adaptan a los diferentes dispositivos. Ten en cuenta que no es lo mismo leer en una pantalla grande de un ordenador, que en un m\u00f3vil de pantalla peque\u00f1a.<\/li>\n
      4. Demasiada longitud en los p\u00e1rrafos<\/strong>: Otro de los errores m\u00e1s comunes es redactar pensando en offline y hacer p\u00e1rrafos muy grandes. En online, la vista se cansa m\u00e1s r\u00e1pido y necesita \u201cdescansos<\/em>\u201d entre p\u00e1rrafos. Se trata de jugar con los espacios en blanco que permiten una lectura relajada y c\u00f3moda.<\/li>\n
      5. Renglones demasiado largos<\/strong>: En l\u00ednea con el punto anterior, los renglones no deben ser de mucho caracteres. Por un lado, agobiar\u00e1n en la lectura sin son muy extensos. Por otro, en pantallas grandes van a obligar al lector a estar constantemente girando la cabeza para ir de principio a fin, cosa que no suele gustar.<\/li>\n
      6. Exceso de enlaces<\/strong>: Este error no est\u00e1 relacionado con la herencia de la maquetaci\u00f3n offline, sino que es propio del entorno digital. A veces, tratamos de incluir tantas fuentes en un p\u00e1rrafo que acabamos llen\u00e1ndolo de enlaces. Esto dificulta mucho su lectura y molesta en la navegaci\u00f3n online, ya que al desplazarse por la pantalla es f\u00e1cil pinchar en un enlace por error.<\/li>\n<\/ol>\n

        [\/su_list]<\/p>\n

        \"tipografias\"<\/p>\n

        Tipograf\u00edas en email marketing: Usos y limitaciones<\/h2>\n

        Una vez que se tienen claros los par\u00e1metros que hay que seguir para utilizar diferentes tipograf\u00edas en los medios digitales, ya se puede empezar a trabajar en los diversos canales.<\/p>\n

        \u201cNo todos los canales online funcionan de la misma manera a la hora de maquetar y compartir contenidos.\u201d<\/strong><\/p>\n

        Por ejemplo, en las redes sociales no se tienen opciones de maquetaci\u00f3n m\u00e1s all\u00e1 de la utilizaci\u00f3n de diferentes p\u00e1rrafos. Sin embargo, al crear newsletters<\/a>\u00a0las opciones van mucho m\u00e1s all\u00e1, pero tambi\u00e9n las limitaciones.<\/p>\n

        En un email se pueden incluir negritas, diferentes tama\u00f1os de letra, subrayados e incluso tachados. Sin embargo, el uso de diferentes tipos de fuentes est\u00e1 muy limitado.<\/p>\n

        Jos\u00e9 Argudo<\/strong> me ha ayudado a investigar sobre este aspecto, as\u00ed como de qu\u00e9 manera cargan y se visualizan las tipograf\u00edas en distintos clientes de correo electr\u00f3nico.<\/p>\n

        Seg\u00fan las \u00faltimas actualizaciones de estos gestores, los \u00fanicos que cargan bien pr\u00e1cticamente cualquier tipograf\u00eda son:<\/p>\n

        [su_list icon=\u00bbicon: check-square\u00bb icon_color=\u00bb#38aaf8″]<\/p>\n

          \n
        1. AOL Mail<\/li>\n
        2. Aplicaci\u00f3n nativa de Android mail (no Gmail)<\/li>\n
        3. Apple Mail<\/li>\n
        4. iOS Mail<\/li>\n
        5. Outlook 2000<\/li>\n
        6. Aplicaci\u00f3n m\u00f3vil de Outlook<\/li>\n<\/ol>\n

          [\/su_list]<\/p>\n

          Por este motivo, a la hora de hacer email marketing es m\u00e1s recomendable utilizar tipograf\u00edas b\u00e1sicas disponibles en cualquier ordenador o dispositivo m\u00f3vil, como Arial, Times New Roman, Tahoma, Calibri, Cambria, etc<\/strong><\/em>.<\/p>\n

          Por otro lado, una vez que se tenga seleccionada la tipograf\u00eda, tambi\u00e9n hay que tener en cuenta el color que se utiliza para la misma.<\/p>\n

          Por ejemplo, yo en el blog utilizo un gris concreto que me gusta mucho y se lee bien en web. Sin embargo, varios suscriptores de mi newsletter me han comentado que este mismo color no se pueden leer bien los emails en dispositivo m\u00f3vil.<\/p>\n

          Antes de terminar, me gustar\u00eda incluir un v\u00eddeo sobre c\u00f3mo crear una newsletter:<\/p>\n