# Diseño de posts de frases que no parezcan una frase más [Canonical HTML page](https://gradiently.design/es/guide/quote-post-design) Los posts de frases son fáciles de hacer y fáciles de ignorar. La diferencia entre unos y otros está sobre todo en la tipografía, y en un fondo que nadie más usa. ## The short version - Un post de frases funciona cuando la cita es corta, está bien atribuida y va en grande con una tipografía con algo de carácter. - Las comillas tipográficas, con la de apertura colgada fuera del texto, hacen que una cita parezca compuesta por un diseñador y no tecleada. - La atribución va en su propia línea y en un cuerpo menor; un salto de línea y un cambio de tamaño la separan sin ninguna puntuación extra. - Las fotos de archivo de atardeceres y montañas son la razón de que la mayoría de los posts de frases se parezcan, mientras que un degradado o una textura tranquila y propia los hace reconocibles. - Las frases publicadas como serie, con un mismo diseño fijo, se convierten en un formato reconocible que la gente aprende a buscar. 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. ### Demasiado - Tres frases de contexto antes de llegar al grano - Un párrafo encogido para que quepa en el cuadrado - Una frase sin verificar atribuida a un nombre famoso - Tus propias palabras firmadas con el nombre de otra persona ### Lo justo - La única frase que expresa la idea - Pocas palabras, para poder ponerlas en grande - Una cita que has comprobado en su fuente - Tus propias palabras, firmadas por ti, o sin firma > **Compruébala antes de publicar** Las citas están entre lo que más se atribuye mal en internet. Si no encuentras una frase en el libro, la charla o la entrevista original, no la publiques con ese nombre. ¿Vas a citar a un cliente o a un compañero? Pregúntale primero. ## 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](https://gradiently.design/es/guide/serif-vs-sans-serif) explica qué suele transmitir cada una, y [combinar fuentes](https://gradiently.design/es/guide/font-pairing) 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. ```css .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; } } ``` Puntuación colgada en la web. El soporte de `hanging-punctuation` en los navegadores es limitado, así que consulta [caniuse](https://caniuse.com/css-hanging-punctuation) y mantén la sangría negativa como alternativa. En una herramienta de diseño, basta con mover la comilla un poco a la izquierda. Un post vertical de frases con una cita corta en una serif grande y una atribución pequeña Vertical: la cita grande y centrada, la atribución pequeña debajo. Una versión cuadrada del mismo post de frases sobre el mismo fondo Cuadrado: la misma cita en menos líneas, para que pueda seguir igual de grande. ## 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](https://gradiently.design/es/guide/letter-spacing)). 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. | Parte | Tratamiento | Ejemplo | | --- | --- | --- | | Cita | Grande, redonda o cursiva | “Crea lo que te gustaría que existiera.” | | Nombre | Pequeño, peso medio o mayúsculas | El nombre completo de quien lo dijo | | Fuente | Aún más pequeña y más ligera | Cuaderno del estudio, 2026 | Tres escalones de tamaño y peso, para que la vista lea primero la cita, luego quién la dijo y después dónde. ## 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. - Papel y tinta: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)` - Lectura nocturna: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)` - Alba suave: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)` - Marrón a la luz de las velas: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)` Cuatro fondos tranquilos para frases. Cada uno mantiene una zona uniforme y serena en el centro, donde van las palabras. Combina los dos claros con una tinta casi negra y los dos oscuros con un blanco roto cálido. 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](https://gradiently.design/es/guide/text-on-gradient) 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](https://gradiently.design/es/guide/instagram-grid-aesthetic). 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. **Fija la familia de fondos** Una sola familia de material o de degradado, con ligeras variaciones de un post a otro. 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. **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. ## FAQ ### ¿Qué fuente es mejor para posts de frases? Una serif con una buena cursiva va bien con citas reflexivas, y una sans serif fuerte con frases cortas y contundentes. Elige una con carácter y ponla en grande. ### ¿Qué longitud debe tener una frase para redes sociales? Lo ideal son entre 8 y 20 palabras. Las citas más largas obligan a usar letra pequeña; pasa el resto al pie del post. ### ¿Cómo atribuyo una cita en un post? Pon el nombre en su propia línea, claramente más pequeño que la cita, y la fuente aún más pequeña. Basta con un salto de línea y un cambio de tamaño; no hace falta ninguna puntuación extra. ### ¿Por qué mis posts de frases parecen genéricos? Normalmente por el fondo. Miles de cuentas usan las mismas fotos de paisajes; un degradado o una textura tranquila con tus colores hace que tus frases sean reconocibles.