{"id":56294,"date":"2020-03-03T23:25:53","date_gmt":"2020-03-03T17:55:53","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=56294"},"modified":"2023-12-28T16:09:13","modified_gmt":"2023-12-28T10:39:13","slug":"ultimate-typography-guide","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/ultimate-typography-guide\/","title":{"rendered":"Gu\u00eda definitiva sobre tipograf\u00eda web"},"content":{"rendered":"
<\/div>\n

Seleccionar la tipograf\u00eda adecuada para su\nsitio web puede hacer que su proyecto sea un \u00e9xito o un fracaso. El tipo de letra adecuado puede\nmejorar su dise\u00f1o. Si se equivoca, puede perder a sus visitantes porque\nvisitantes porque es dif\u00edcil de leer, no es agradable a la vista o da una impresi\u00f3n\nde lo que haces y a qui\u00e9n sirves. <\/p>\n\n\n\n

El dicho \"el buen dise\u00f1o es invisible\" es especialmente cierto cuando se trata de digital. El dise\u00f1ador digital tiene mucho menos control sobre la forma en que el usuario final ve sus creaciones. El tama\u00f1o del dispositivo o la pantalla, la resoluci\u00f3n e incluso la calibraci\u00f3n de la pantalla afectar\u00e1n a las decisiones de dise\u00f1o cuidadosamente seleccionadas.  <\/p>\n\n\n\n

Tanto si eres dise\u00f1ador como desarrollador,\neste art\u00edculo le ayudar\u00e1 a desentra\u00f1ar lo esencial que debe saber para conseguir\ntipograf\u00eda, de modo que pueda ofrecer lo bello y lo pr\u00e1ctico en perfecta\nperfecta armon\u00eda. <\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Conozca su tipo: lo b\u00e1sico<\/a>
  2. Legibilidad, accesibilidad y buenas pr\u00e1cticas<\/a>
  3. C\u00f3mo elegir un tipo de letra<\/a>
  4. D\u00f3nde encontrar fuentes tipogr\u00e1ficas para sitios web<\/a>
  5. C\u00f3mo seleccionar una pareja de fuentes s\u00f3lidas<\/a>
  6. \u00bfEst\u00e1s preparado para el reto?<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    Conozca su tipo: lo b\u00e1sico<\/h2>\n\n\n\n

    Tipo de letra o fuente: \u00bfcu\u00e1l es la diferencia?<\/h3>\n\n\n\n

    Bueno, si estamos siendo t\u00e9cnicamente correctos\n(y t\u00e9cnicamente deber\u00edamos serlo), entonces deber\u00eda decir esto: <\/p>\n\n\n\n

    \"Los tipos de letra y las fuentes no son lo mismo\".<\/em><\/p>\n\n\n\n

    Entiendo por qu\u00e9 puede confundirse, ya que\na menudo se usan indistintamente, pero para aclarar por qu\u00e9 son cosas\npor qu\u00e9 son cosas distintas, esto es lo que hay que saber: <\/p>\n\n\n\n

    Tipo de letra: <\/strong>se refiere al dise\u00f1o general de un tipo. Incluye todos los estilos de ese tipo. Por ejemplo, la Helv\u00e9tica, en su totalidad, se clasifica como tipo de letra. <\/p>\n\n\n\n

    Fuente:<\/strong> es un estilo (o archivo) dentro de un tipo de letra. Por ejemplo, Helvetica\nItalic, o Helvetica Textbook Bold, son ambas fuentes. Son fuentes pertenecientes a\na la familia tipogr\u00e1fica Helvetica. <\/p>\n\n\n\n

    A medida que pasa el tiempo y los t\u00e9rminos se\nse utilizan indistintamente, por lo que no es necesario complicarse con la\nterminolog\u00eda. <\/p>\n\n\n\n

    Lectura recomendada: Historia visual de la tipograf\u00eda<\/a> <\/p>\n\n\n\n

    \"Visual<\/figure>\n\n\n\n

    Tipos de tipos<\/h3>\n\n\n\n

    Los tipos de letra pueden dividirse en 5\nprincipales. He aqu\u00ed un breve resumen: <\/p>\n\n\n\n

    Serif <\/h4>\n\n\n\n

    Una serifa es una peque\u00f1a forma o trazo que se coloca al principio o al final de un car\u00e1cter o letra. Hay tipos de letra con gracias de distintos tipos: Old Style, Traditional, Neoclassical y Slab. Pueden utilizarse en t\u00edtulos y cuerpo de texto. Las fuentes con gracias se consideran el tipo de letra m\u00e1s f\u00e1cil de leer. <\/p>\n\n\n\n

    Sans-serif<\/h4>\n\n\n\n

    Los tipos de letra sin gracias son m\u00e1s sencillos, minimalistas y a menudo se consideran una alternativa m\u00e1s moderna a las gracias. Suelen tener menos variaci\u00f3n en la anchura de trazo que los tipos con gracias. Al igual que los tipos con gracias, tambi\u00e9n pueden utilizarse para t\u00edtulos y textos.<\/p>\n\n\n\n

    Entre las variantes de la familia Sans-Serif\nincluyen la grotesca, la cuadrada, la geom\u00e9trica y la human\u00edstica.<\/p>\n\n\n\n

    Guiones<\/h4>\n\n\n\n

    Los tipos de letra son: manuscrita, cursiva, caligr\u00e1fica, formal y negra. Suelen reservarse para t\u00edtulos y contenido decorativo. <\/p>\n\n\n\n

    Expositor\/Decorativo<\/h4>\n\n\n\n

    Como su nombre indica, los tipos Display\nest\u00e1n pensados para un tama\u00f1o de letra grande, por lo que s\u00f3lo se recomiendan\ns\u00f3lo se recomiendan para t\u00edtulos. Ideales si busca\nalgo \u00fanico y quiz\u00e1 un poco novedoso o atrevido.<\/p>\n\n\n\n

    Monospace<\/h4>\n\n\n\n

    Los tipos de letra monoespaciados, que suelen reservarse para aplicaciones en las que es necesario imprimir c\u00f3digo, no son proporcionales: cada letra ocupa el mismo espacio.<\/p>\n\n\n\n

    \"Visual<\/figure>\n\n\n\n

    Legibilidad, accesibilidad y buenas pr\u00e1cticas<\/h2>\n\n\n\n

    Una buena selecci\u00f3n tipogr\u00e1fica es esencial para una buena experiencia de usuario. As\u00ed que, antes de profundizar m\u00e1s, veamos algunos aspectos esenciales que deben tenerse en cuenta antes de empezar a buscar el tipo perfecto.<\/p>\n\n\n\n

    1. Reduzca al m\u00ednimo el n\u00famero de fuentes utilizadas.<\/h3>\n\n\n\n

    Hay muchas formas de crear jerarqu\u00eda y establecer un dise\u00f1o \u00fanico sin necesidad de utilizar un tipo de letra distinto para cada elemento. De hecho, a menudo se consigue m\u00e1s claridad con menos. Un solo tipo de letra puede tener 10 estilos de fuente diferentes, lo que facilita la creaci\u00f3n de resultados sorprendentes con un solo tipo de letra. <\/p>\n\n\n\n

    2. Piensa en el contraste. <\/h3>\n\n\n\n

    Aunque un tipo de letra gris p\u00e1lido y suave puede quedar muy sutil en sketch o photoshop (sobre todo en tu nuevo y reluciente iMac de 27 pulgadas), \u00bfqu\u00e9 ocurre si el usuario intenta leerlo en el exterior? \u00bfO en el autob\u00fas con el sol brillando sobre su hombro? \u00bfY si no est\u00e1 usando la \u00faltima pantalla retina y tiene un monitor viejo que ni siquiera hace que Toy Story 3 se vea bien? \u00bfY si el usuario tiene m\u00e1s de 40 a\u00f1os y necesita gafas? \u00bfY si simplemente tiene mala vista? <\/p>\n\n\n\n

    La claridad es el rey. No dejes que lo bonito se interponga. Esto es muy f\u00e1cil de solucionar. Herramientas como contrastchecker.com<\/a> puede ayudarle a asegurarse de que su dise\u00f1o no prima la forma sobre la funci\u00f3n, comprobando que su combinaci\u00f3n de colores cumple los requisitos m\u00ednimos de accesibilidad en cuanto a contraste. Si quieres que la gente lea tu contenido, p\u00f3nselo f\u00e1cil. <\/p>\n\n\n\n

    3. Recuerda el espacio negativo\/espacio en blanco. <\/h3>\n\n\n\n

    El espacio negativo no s\u00f3lo ayuda a establecer jerarqu\u00edas y a llamar la atenci\u00f3n sobre elementos y contenidos espec\u00edficos, sino que tambi\u00e9n facilita enormemente la lectura de su sitio web. <\/p>\n\n\n\n

    Menos es siempre m\u00e1s. No es necesario llenar todos los rincones de la pantalla para transmitir su mensaje. Un gran muro de texto abrumar\u00e1 f\u00e1cilmente a tus visitantes, as\u00ed que utiliza bien los saltos de l\u00ednea, el espaciado entre p\u00e1rrafos y los espacios en blanco para una legibilidad \u00f3ptima. <\/p>\n\n\n\n

    4. Si confundes, pierdes. <\/h3>\n\n\n\n

    Por muy tentador que sea hacer algo extravagante e ingenioso con tu texto, no lo olvides: \"Lo principal es que lo principal siga siendo lo principal\". - Steven Covey. Lo bonito tiene su lugar, pero nunca cuando se trata de explicar algo en un sitio web. Lo sencillo triunfa. <\/p>\n\n\n\n

    5. Longitud de la l\u00ednea. <\/h3>\n\n\n\n

    Esta es una de mis man\u00edas. Si alguna vez has visitado un sitio web en el que el texto se extend\u00eda desde el lado izquierdo del navegador hasta el derecho, estoy seguro de que compartes mi frustraci\u00f3n. El texto que ocupa todo el ancho de una pantalla grande es incre\u00edblemente dif\u00edcil de leer. Hay una raz\u00f3n por la que los peri\u00f3dicos utilizan columnas, \u00a1y es \u00e9sta! <\/p>\n\n\n\n

    Hay muchas formas de calcular exactamente el n\u00famero \u00f3ptimo de caracteres por l\u00ednea, pero como regla general, si te mantienes entre 45 y 75 caracteres, no te equivocar\u00e1s. Yo suelo trabajar con un ancho m\u00e1ximo de 650px para el texto de los p\u00e1rrafos. <\/p>\n\n\n\n

    M\u00e1s informaci\u00f3n: El tama\u00f1o importa: Equilibrio entre la longitud de l\u00ednea y el tama\u00f1o de letra<\/a><\/p>\n\n\n\n

    C\u00f3mo elegir un tipo de letra<\/h2>\n\n\n\n

    Con los conceptos b\u00e1sicos en mente, podemos pasar a la parte divertida: elegir el tipo de letra adecuado para su dise\u00f1o.\nparte divertida: elegir el tipo de letra adecuado para su dise\u00f1o. Hay literalmente\nmillones de fuentes para descargar. \u00bfC\u00f3mo encontrar las adecuadas para\nsu proyecto.<\/p>\n\n\n\n

    Empecemos por lo que ya sabe sobre el cliente de sus clientes (su p\u00fablico objetivo): <\/p>\n\n\n\n