Mostrando entradas con la etiqueta Maquetación. Mostrar todas las entradas
Mostrando entradas con la etiqueta Maquetación. Mostrar todas las entradas
27 abril, 2017

Las mejores infografías sobre tipografía, comentadas

¿Existe alguna ley o norma que nos pueda guiar a la hora de usar tipografías? ¿Cuál es mejor emplear según el tipo de trabajo, y cómo combinarlas? En esta entrada aportaremos una gran cantidad de información y consejos prácticos al respecto, y además de forma gráfica, para una rápida comprensión. Concretamente, recopilaré aquí todas las infografías sobre el uso correcto de tipografías que vaya encontrando, siempre y cuando aporten cosas de interés y utilidad real, naturalmente.

Además de ponerlas iremos comentando su contenido también, pues en muchos casos veo infografías sobre este tema con puntos -como mínimo- discutibles. No obstante, la verdad es que en líneas generales estos esquemas contienen “normas” o “leyes” bastante válidas, resultando por tanto de gran ayuda como guía para principiantes. Esto no extraña pues la inmensa mayoría se basan a su vez en otras anteriores (por mi parte intentaré poner aquí las originales, y luego las demás inspiradas en ellas si aportan algo nuevo).

Pongo entre comillas las palabras “leyes” y “normas”, pues como se sabe el campo del diseño es altamente subjetivo, al igual que ocurre con el resto de disciplinas creativas y artísticas en general. Así pues, es complicado hablar de “leyes absolutas”. No obstante, como digo estas infografías siempre serán buenas consejeras, enumerando pautas que haremos bien en seguir. Aunque no podamos elevarlas a la categoría de Ley Universal al estilo de las ciencias.

Lo vamos a ir comentado todo punto por punto, de todas formas. Sin más, vamos con las infos:

Los 10 mandamientos sobre tipografía de Evan Brown.

Acertadísima infografía, de las mejores que he visto y copiada hasta la saciedad, que nos servirá muy bien de guía general para un correcto uso de fuentes tipográficas (cuál usar, cómo combinarlas, etc).

Obra del diseñador Evan Brown de DesignMantic.com (fuente). Es un profesional bastante activo en las redes sociales, recomiendo seguirle. Ha realizado incluso una traducción al español de la infografía, que pongo a continuación (clic en la imagen para ampliarla):

Los 10 mandamientos de la tipografia, por Evan Brown

Comentarios: Muy poco que objetar a estos mandamientos por mi parte. Combinar una tipografía con remate con otra sin él es algo que en efecto funciona muy bien. Si son fuentes parecidas por el contrario no. Así pues todo correcto. Usar solo dos tipografías –e incluso una sola si es buena y tiene diversos grosores- también es algo que queda bien. Es recomendable trabajar así según mi experiencia (mucha mezcla de fuentes genera confusión).

En este sentido y de cara al diseño web, el sitio Steptoandson.co.uk aporta 10 combinaciones de fuentes serif-sans serif, en la siguiente infografía (fuente):

10 combinaciones deslumbrantes de fuentes web

Tienen buena pinta estas combinaciones (aunque por supuesto pueden hacerse muchísimas más).

En definitiva, en términos generales recomiendo seguir los 10 mandamientos, que sumo a lo ya dicho por mí en otros artículos (aconsejo leerlos también para obtener más teoría y orientaciones en este campo):

En el primero de estos enlaces (“Consejos para dar formato óptimo al texto general”) pueden encontrarse más pautas recomendables, por ejemplo sobre la longitud ideal que debe tener una línea (66), consejos para dar un interlineado o interletraje correctos, etc.

Respecto a los mandamientos de la tabla de arriba, por mi parte aportaría que también da buen resultado combinar mayúsculas y minúsculas de una misma tipografía, si ésta es de buena calidad y dispone de muchas variantes y grosores (por cierto, las Narrow o Condensed –letras estrechas- van bien en mayúscula para subtítulos, epígrafes, localizadores y palabras sueltas).

Usar la mayúscula en alguna variante de una tipografía puede dar buen resultado: ejemplo

¿Es tan mala Comic Sans? Cuándo usarla.

En cuanto a las fuentes que dice que no deben usarse nunca (Comic Sans, Papyrus, Curlz, Viner, Kristen y la otra eslava), también estoy bastante de acuerdo, aunque con matices. Desde luego conviene evitarlas, es algo en lo que la totalidad de los profesionales estamos de acuerdo. Ello es debido sobre todo a que se han usado demasiado ya durante años y años, y por tanto están totalmente “quemadas”. Además de ello, dado que vienen instaladas por defecto en los equipos, muchos aficionados han abusado de su uso -con infame gusto- en páginas web personales, blogs, cartelería y folletos de mala calidad, etc. Así pues hoy en día estas letras se asocian con lo kitsch (cursi, trillado, de mal gusto).

No obstante, como antes comenté el diseño es una disciplina básicamente creativa y artística, y por tanto no hay dogmas absolutos. Siempre hay excepciones. De entrada, -como bien sabía Andy Warhol-, lo kitsch puede convertirse en pop en un momento dado, de forma que estas tipografías son susceptibles de usos artísticos experimentales.

Pero no solo eso. En mi opinión, existen determinados trabajos en los que pueden funcionar bien, precisamente porque son el tipo de letra que espera encontrar el público. Por ejemplo en temáticas infantiles sin demasiadas exigencias, como las fichas para niños en guarderías, escuelas infantiles, etc.

De hecho, hace poco yo mismo hice 2 plantillas gratuitas para orla de guardería, como favor, y no dudé en usar Comic Sans para los textos. ¿Por qué? Precisamente porque esta letra viene en todos los equipos, y, dado que es una plantilla que usaran personas no profesionales del diseño, ello les facilitará mucho el uso. Así pues razones prácticas. Además de eso, el aspecto que tiene es adecuado para estos centros. Recordemos que el 99,9% de las personas no tiene la menor idea de tipografía, de forma que no sentirá el menor “choque” al ver Comic Sans (ni siquiera se darán cuenta). En cuanto a los profesionales, pues siempre pueden coger la plantilla y cambiar el tipo de letra por uno menos trillado (de tipo handwritten quedará muy bien, actualmente la verdad es que hay letras realmente bonitas).

Una vez dicho todo esto, por lo demás coincido 100% en que lo mejor es NO usar Comic Sans. Además, por lo visto consume un poco más de tinta al imprimirse.

La tabla periódica de tipografías (o 100 mejores fuentes de la historia).

La Tabla Periódica de las Tipografías

Realizada por Squidspot (traducida por Rodrigo Picazo).

Como puede verse, esta famosa infografía imita a la tabla periódica de los elementos químicos, sólo que con tipos de letra. En ella las fuentes también están agrupadas por familias, y contiene mucha información (diseñador, año de diseño –algunas veces hace siglos-, etc).

Pero quedémonos con que básicamente se trata de una lista de 100 tipografías, consideradas por respetados expertos como las mejores de la Historia.

En la propia tabla se explica cómo la hicieron, y las fuentes consultadas para ello. Concretamente, el ranking fue el resultado de comparar, combinar y ordenar las listas y artículos de prestigiosos sitios de internet, tales como:

Así pues, es obvio que este ranking es muy bueno, así como que la tabla contiene una gran cantidad de información de interés. Como única pega, comentar que la selección sigue un criterio de tipo histórico, y por tanto las letras más recientes de altísima calidad no aparecen. Pero por lo demás esta infografía es magistral.

Los 10 consejos para realizar un proyecto tipográfico de Silo Creativo.

Tipografía: 10 consejos para realizar un proyecto tipográfico

(Fuente) Como puede verse, esta info es parecida a la primera que pusimos –de la que obviamente bebe-, aunque también aporta algunas buenas claves propias. Por cierto, recomiendo bastante seguir este blog profesional, pues sus autores son diseñadores realmente buenos (les sigo hace tiempo y lo puedo atestiguar).

Aquí vemos por vez primera algunos consejos que también son mencionados a menudo por los mejores teóricos del diseño editorial (por ejemplo la recomendación de usar fuentes serif para el formato impreso y sin él para el digital/web, consultar: “Consejos para dar formato óptimo al texto general”).

Los 3 consejos para formateo de textos de Designaglow.

La siguiente infografía aporta buenas pautas en la misma temática del link anterior. Está en inglés (fuente), pero en líneas generales creo que se entiende bien:

90% of design is typography

Lo traduzco brevemente por si acaso. Básicamente, los consejos son 3: usar el kerning/tracking (en busca de mayor legibilidad o un acabado más artístico), cuidar el interlineado para que “se lea como un libro”, y por último el ya mencionado varias veces de no excedernos en el número de tipografías.

Qué tipografía usar según el tipo de trabajo (infografía en inglés).

So you need a typeface

Esta otra infografía puede ser útil antes de empezar un proyecto (sobre todo para principiantes). Es una creación de Julian Jansen (fuente).

Las tipografías del esquema han sido seleccionadas de la lista de las 100 mejores de FontShop (la “tabla periódica” que vimos antes también la usa). Así pues puede verse la importancia que tiene dicho listado en el mundo del diseño.

La traduciré un poco: se empieza por el centro, comenzando por ver si el trabajo es un logo, una invitación, una infografía, un libro o un periódico. Después se van haciendo preguntas a las que responderemos “sí” o “no”, hasta llegar a la tipografía ideal -según el autor- para el trabajo.

He echado un vistazo a unos cuantos “caminos” del esquema, y creo que hay mejores alternativas, pero como punto de partida en plan genérico no está mal (las fuentes handwritten que propone para las invitaciones considero que son mejorables, aunque ya dije en su momento que la famosa lista de FontShop no recoge las tipografías más actuales, consultar aquí en La Grafiteca para ver más).

Cuando usar serif, sans serif o alguna familia de fuentes específica.

En el tema de qué familia de fuentes usar entran en juego dos factores principalmente: legibilidad y psicología. En el primero ya hemos comentado que los expertos recomiendan –en líneas generales- las letras con remate para texto impreso, y las de palo seco -sin serif- para el entorno web y digital (más info en el artículo varias veces citado).

En cuanto al segundo aspecto, el psicológico, tiene en cuenta la sensación que nos producen los diversos tipos de letra, y por tanto para qué finalidades conviene más usar cada uno de ellos. Esto interesa para logos, encabezados, títulos, publicidad, etc.

Ya lo hemos comentado muchas veces en anteriores artículos. En pocas palabras, las fuentes con remate aportan seriedad y aspecto clásico, las sin remate son por el contrario más modernas y limpias (de tipo profesional neutro), y las fuentes script o handwritten –que imitan la escritura a mano- son buenas para invitaciones, tarjetas de felicitación, etc (entre otros fines, pues por ejemplo son muy usadas en publicidad dado que aportan una sensación de inocencia y pureza).

He visto muchas infografías que hablan de esto, y básicamente coinciden todas (no extraña pues es de puro sentido común):

Psicología de la tipografía.

(Fuente)

Psicología de la tipografía

The Psychology Behind Type Choices

(Fuente: ver en la propia info)

The Psychology Behind Type Choices

La anatomía tipográfica (partes de las letras).

Siempre viene bien conocer el nombre de los diversos trazos que conforman los caracteres escritos. Esta infografía de Paredro.com (fuente) es bastante completa, y además en español:

La anatomía tipográfica

No obstante no están absolutamente todos los conceptos, pues no encuentro la altura X de las letras y algunos más. Pero por lo demás muy buena referencia.

Las fuentes web originales más seguras.

The Original Web-Safe Fonts

Las fuentes seguras son aquellas que podemos usar con tranquilidad, sabiendo que se mostrarán de forma muy parecida en cualquier navegador o dispositivo. Esto se debe a que vienen por defecto en los sistemas operativos, sin tener que instalar nada.

Así pues, en todo proyecto de diseño web son una opción interesante. Suponen la máxima compatibilidad posible. En esta infografía, de origen incierto pues no está firmada (fuente probable), hay una lista con las más comunes –y por tanto más seguras- de todas.

Leer más...

06 abril, 2017

Consejos para dar formato óptimo al texto general

Hacía tiempo que queríamos realizar una entrada con consejos generales de maquetación para textos largos. En artículos anteriores ya habíamos visto algunas pautas tipográficas para el diseño de logotipos, así como también recomendaciones de cara a titulares y encabezados (ver enlaces anteriores). Por tanto sentía que faltaba por analizar el denominado texto base, también llamado “texto general”. En definitiva, la parte restante y mayoritaria de todo texto, presente siempre en cualquier trabajo de diseño editorial. En esta entrada vamos a centrarnos en ello por fin, y en profundidad.

No es algo precisamente de poca importancia… En obras como libros y manuales, el cuerpo del texto propiamente dicho puede llegar a constituir la práctica totalidad del contenido, siendo por tanto fundamental el dominio a nivel técnico de su adecuado formateo. Esto implica definir características como el ancho de línea, el espacio entre líneas (interlineado), el espacio entre caracteres (y entre palabras), el tipo de letra más adecuado, etc. El objetivo no será meramente que el texto luzca atractivo, sino algo mucho más importante: que sea cómodamente legible.

Así pues, si nos planteamos la pregunta: “¿Cuál es el mejor formato posible para textos largos, como por ejemplo los presentes en libros, manuales, revistas y artículos, así como en páginas web?”, la respuesta será inmediata: el más legible posible. Esto implica que dicha lectura sea fácil, natural y cómoda.

Como veremos, esto puede ser diferente en un libro impreso respecto al entorno web o digital, pero en el fondo las pautas de maquetación a seguir son parecidas. Todo trabajo de diseño editorial que se precie deberá incluir siempre una norma de estilo (o CSS) concreta para el texto base. Es decir, para los párrafos del cuerpo del texto. Al menos si quiere ser medianamente profesional (así como mínimamente legible).

Índice.
  1. ¿Cuántos caracteres debería haber por renglón?
  2. ¿Qué cuerpo o tamaño de letra es mejor usar para el cuerpo del texto?
  3. ¿Letras con remate o sin el?
  4. ¿Qué variante de la tipografía es mejor para el texto general?
  5. Tracking y kerning, ¿qué son y cuáles nos convienen más?
  6. ¿Y el interlineado?¿Cuánto deberíamos poner?
  7. Justificación del texto y espacio entre palabras.
  8. Uso correcto de las mayúsculas y versalitas (o small caps).
  9. Leads o párrafos introductorios.
  10. ¿Cuáles son las mejores fuentes para el texto general?
Introducción. Los consejos de los expertos, comentados.

Para hacer esta guía contaremos con la ayuda de otros profesionales, como Typewolf y Mariana Eguaras. Detrás del apodo está el norteamericano Jeremiah Shoaf, excelente tipógrafo que ha reunido todo su saber en un completo libro electrónico del que hablaremos después. Mariana Eguaras, por su parte, es una gran especialista de origen argentino actualmente residente en España. Citaremos también algunos fragmentos de su blog profesional.

Volviendo al libro de Jeremiah, alias Typewolf, es extraordinariamente interesante, pues está estructurado en forma de lista de 100 puntos o claves a seguir, de cara a formatear correctamente un texto. Así pues es un manual muy bien organizado, titulado “Flawless Typography Checklist” (“Lista de comprobación de tipografía sin defectos”). Durante un tiempo dicho libro tuvo una free preview o vista previa gratuita (actualmente offline), en la que el autor nos mostraba algunos de los puntos de la lista. Comentaremos aquí algunos de dichos puntos.

Incluiré así mismo las consideraciones de Mariana al respecto de diferentes temas, pues sin duda también son valiosas. Recomiendo en este sentido consultar su artículo “Qué tipografía usar para libros impresos y digitales”. No tiene desperdicio.

Finalmente, en cuanto a la experiencia profesional del autor de estas líneas, sirva para acreditarla otro de mis sitios: Maquetador Online. Como puede verse en él cuento con muchos años ya de trayectoria en este campo (más o menos los mismos que Jeremiah, en realidad).

Bien, sin más, vamos a adentrarnos en los diferentes puntos –o consejos- a seguir.

¿Cuántos caracteres debería haber por renglón? El ancho de línea debe tener entre 45 y 75 caracteres (66 el ideal) incluyendo espacios. Por legibilidad.

Typewolf: Mantener la longitud de la línea entre los 45 y los 75 caracteres (66 es ideal)

Leer más...

15 marzo, 2017

Plantilla InDesign gratuita de revista A4 horizontal

En esta entrada vamos a analizar una plantilla 100% gratuita bastante interesante. La ofrece el diseñador editorial de origen peruano Erick Ragas, excelente profesional de la maquetación y autor de la web StockIndesign.com, desde hace años especializada en este tipo de recursos.

Conozco bien dicho sitio, pues he colaborado con Erick en alguna ocasión en el pasado. Concretamente, realicé una plantilla gratuita de periódico (formato InDesign) para que la ofreciera en su web (fue una forma de dar difusión a mi trabajo). Lo cuento todo en el artículo del enlace anterior.

  • *Nota: para ver directamente la plantilla que hice para StockIndesign, dirigirse a la siguiente ubicación: “Old Style Newspaper Template”. Desde allí puede descargarse también.

Volviendo al recurso que nos ocupa aquí, puedo decir que cuenta con la buena calidad habitual en este diseñador. A nivel técnico, he probado el archivo y tiene un funcionamiento completamente correcto.

Se trata de una plantilla de revista o magazine de nada menos que 30 páginas tamaño A4 (y Carta americana) horizontal, en formato InDesign, como siempre en esta web. Erick la creó con una versión muy avanzada del programa, pero ha tenido el buen criterio de incluir un archivo .IDML para CS4 o superior, junto al .INDD convencional. Así pues, se requiere mínimo la versión CS4 de InDesign para poder usar esta plantilla.

Como puede verse en las imágenes de muestra, es bastante sencilla y genérica, pero con un diseño elegante y limpio que resulta adecuado para publicaciones incluso con altas exigencias en cuanto a diseño.

Portada de la plantilla gratuita de revista

Puede funcionar de hecho muy bien para revistas de moda, un poco al estilo de aquella otra que vimos en el artículo “Plantilla gratuita de revista de moda o lookbook” (de consulta obligada por cierto para personas que estén buscando recursos de este tipo).

Dos páginas interiores de la plantilla de revista (imágenes no incluidas)

Con ligeras modificaciones, podría servir incluso para catálogos de firmas de ropa y similares.

Las 30 páginas de la plantilla de revista

Como puede verse, el gran protagonismo que se concede a las fotografías consigue un efecto muy visual, apropiado para revistas relacionadas con todo tipo de creatividades: diseño de interiores, arquitectura, arte en general o incluso la moda antes mencionada. Las tipografías usadas (también gratuitas) aportan ese matiz elegante necesario. Están muy bien elegidas. Son las siguientes:

Hay por tanto que descargarlas todas e instalarlas previamente. Por lo demás es una plantilla muy limpia y versátil, con mucho aire y espacio blanco, que hará que quede bien prácticamente cualquier cosa que pongamos en ella. Las imágenes que vemos en la muestra no están incluidas, por cierto.

Únicamente le encuentro un fallo: Erick tendría que haber añadido un par de páginas más. Digo esto pues tiene 30, y para imprimir la revista en una imprenta nos pedirán siempre múltiplos de 4 páginas (cada pliego de papel tiene siempre este número, dos páginas por delante y dos por detrás).

No es un gran problema, pues podemos solucionarlo dejando en blanco la cara interior de la portada y la contraportada. Si vamos a hacer una publicación digital formato PDF, lógicamente no habrá ningún problema de este tipo en absoluto (lo de los pliegos es solo para imprimir).

Captura de pantalla trabajando con la plantilla

Sea como sea, como puede verse en la imagen anterior (una captura de pantalla que he realizado trabajando con la plantilla), el archivo funciona perfectamente. Así pues, solo queda colocar el enlace a la web de descarga… y felicitar a Erick Ragas una vez más por su trabajo.

Para descargar la plantilla, dirigirse a:

FREE Minimal Magazine Landscape | StockIndesign.com

  • A4 297 x 210 mm + 5 mm sangrado.
  • US Letter 11 x 8.5 inches (pulgadas) + bleeds 0.196 inches.

Se requiere registro para descargar la plantilla (elegir la opción gratuita, no habremos de hacer ningún abono). El botón de descarga está abajo del todo, tras las imágenes de muestra y la descripción (en el momento de redactar este artículo era de color verde). Allí pueden verse también vídeos y previsualizaciones diversas. En cuanto a la licencia de uso, si abrimos una cuenta gratuita solo podremos realizar usos personales (ver más detalles).

Leer más...