Diseño de posts de frases que no parezcan una frase más

Un buen diseño de posts de frases se reduce a cuatro cosas: una cita recortada a su mejor línea, compuesta en grande con una tipografía con carácter, atribuida limpiamente en su propia línea y colocada sobre un fondo que te pertenece en lugar de un atardecer de banco de imágenes. Si aciertas en eso, un post de frases se lee como una pieza de diseño pensada y no como una casilla más del feed.

Elegir y recortar la cita

Los mejores posts de frases llevan una sola idea que se entiende a la primera lectura. Los pasajes largos se convierten en letra pequeña, y la letra pequeña se pasa de largo. Apunta a una cita de entre 8 y 20 palabras. Si la cita completa es más larga, usa la frase que lleva la idea y pon el resto en el pie del post.

Tipografía para posts de frases

En un post de frases la tipografía es el diseño, así que elige una fuente con personalidad. Una serif con una buena cursiva va bien con citas reflexivas o literarias; una grotesca fuerte, con frases cortas y contundentes; una fuente display puede sostener una o dos palabras sueltas. Serif o sans serif explica qué suele transmitir cada una, y combinar fuentes cuenta cómo añadir una segunda fuente para la atribución.

• Ponla en grande. En un post de 1080 píxeles de ancho, una cita corta puede ir a entre 70 y 110 píxeles.
• Ajusta el interlineado. Las líneas grandes se ven sueltas con un interlineado normal; entre 1,1 y 1,2 las mantiene unidas.
• Corta las líneas por el sentido. Termina cada línea en una pausa natural, no donde la caja de texto decida saltar.
• Usa comillas tipográficas. Las curvas “ y ” en lugar de las rectas ", que parecen tecleadas.
• Cuelga la comilla de apertura. Deja que la comilla de apertura quede justo fuera del margen izquierdo para que las letras queden alineadas.

.quote {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.15;
  text-wrap: balance;
  hanging-punctuation: first;
}

/* Where hanging-punctuation isn't supported, pull the first line back by the width of the mark. */
@supports not (hanging-punctuation: first) {
  .quote { text-indent: -0.42em; }
}

Cómo atribuir una cita con limpieza

La atribución tiene que ser fácil de encontrar y lo bastante discreta para no competir. Pon el nombre en su propia línea, un escalón claramente más pequeño que la cita, con otro peso o en mayúsculas con un poco más de espaciado entre letras (mira espaciado entre letras). No necesitas ninguna puntuación antes del nombre: el salto de línea y el cambio de tamaño ya dicen quién lo dijo.

Fondos para posts de frases

La razón de que la mayoría de los posts de frases se parezcan es el fondo: una montaña al amanecer, una playa, una cafetería desenfocada. Esas imágenes las comparten miles de cuentas y no dicen nada de ti. Un degradado o una textura tranquila con tus colores hace lo contrario. Da aire a las palabras, se reconoce como tuyo y mantiene la mirada del lector en la cita.

Deja la parte más tranquila y uniforme del fondo detrás de las palabras, y comprueba el contraste justo ahí. Texto sobre un degradado explica cómo elegir la tinta según la luminosidad para que la cita se lea en cualquier parte del fondo.

Convertir las frases en una serie reconocible

Un post de frases es un buen momento. Veinte con el mismo diseño se convierten en un formato que la gente reconoce desde el otro lado del feed, y una serie de frases es una de las formas más fáciles de dar ritmo a una cuadrícula, como se cuenta en la estética del feed de Instagram.

1. 1

   Fija el diseño

   La misma tipografía, el mismo rango de tamaños, la misma posición para la cita y el nombre, siempre.

2. 2

   Fija la familia de fondos

   Una sola familia de material o de degradado, con ligeras variaciones de un post a otro.

3. 3

   Ponle un nombre o un número

   Una pequeña etiqueta como La idea del jueves o N.º 12 convierte posts sueltos en una serie.

4. 4

   Guarda un banco de frases

   Reúne en una lista las citas comprobadas con sus fuentes, para que cada post nuevo te lleve minutos.

En Gradiently, una plantilla de frase puede llevar cualquier Mark, y el Mark desplaza su zona más tranquila detrás de las palabras para que la cita se lea sin caja ni sombra. Reservar un Mark hace que ese fondo sea solo tuyo.