# Cartas digitales: pantallas que venden en cafés y bares [Canonical HTML page](https://gradiently.design/es/guide/menu-board-design) Una pantalla de carta se lee desde el final de la cola, en pocos segundos, por alguien que decide cuánto gastar. Eso cambia casi todas las decisiones de diseño. Así se crea una que se lee, vende y sigue pareciéndose a tu local. ## The short version - La mayoría de las cartas digitales son televisores normales, así que diseña a 1920×1080 para una pantalla horizontal o 1080×1920 si va colgada en vertical. - El texto de una carta debe valorarse desde donde están los clientes de verdad, normalmente el final de la cola, no desde el editor de la pantalla. - Los fondos oscuros con texto claro encajan con las pantallas de carta porque reducen el deslumbramiento y hacen que las palabras sean lo más brillante a la vista. - El movimiento en una carta debe quedarse en segundo plano; los precios y los nombres de los productos deben estar quietos. - Repartir una carta larga en varias pantallas, o rotarla despacio, se lee mejor que reducir todo para meterlo en una. Una **carta digital** es un menú diseñado para una pantalla, normalmente un televisor estándar a 1920×1080, que se lee a varios metros de distancia por gente que decide rápido. Diséñala como un cartel y no como una carta impresa: menos productos por pantalla, letra más grande, un fondo oscuro y tranquilo, precios alineados en una columna y movimiento solo detrás de las palabras. La pantalla vende mejor cuando el cliente puede encontrar su bebida y su precio antes de llegar a la caja. Pantalla horizontal de carta de cafetería titulada Café con una lista corta de bebidas y precios Una categoría por pantalla a 1920×1080. El título es lo más grande; los precios están alineados. ## Tamaños de una carta digital Casi todas las pantallas de carta son un televisor o un monitor comercial con el mismo panel 16:9. Diseña a la resolución nativa de la pantalla para que nada se escale, lo que mantiene nítido el texto pequeño. Una pantalla 4K mostrará con claridad un diseño de 1920×1080 al doble de tamaño, aunque diseñar a 3840×2160 da una letra más fina si tu pantalla y tu reproductor lo admiten. - Pantalla horizontal 1920×1080: 1920 × 1080 - Pantalla vertical 1080×1920: 1080 × 1920 - Tres pantallas en fila 5760×1080: 5760 × 1080 El formato horizontal encaja con la pared sobre un mostrador; el vertical, con un pilar o un escaparate. Una fila de tres se diseña como un único lienzo ancho y se divide en tres archivos. Si cuelgas una pantalla en vertical, comprueba que la pantalla o el reproductor puedan girar su salida. Si no pueden, exporta el diseño vertical y gira el archivo un cuarto de vuelta antes de cargarlo. ## Cómo hacer legible una pantalla de carta desde la cola No hay un mínimo universal, porque depende del tamaño de la pantalla y de la distancia. La prueba fiable es física: pon el diseño en la pantalla real, ve al final de la cola y léelo. Si entrecierras los ojos, es demasiado pequeño o está demasiado cargado. Como punto de partida para un diseño de 1920×1080 en una pantalla de mostrador típica: | Elemento | Tamaño inicial en 1080 px de alto | Notas | | --- | --- | --- | | Título de categoría | 96 a 140 px | Uno por pantalla, o dos como máximo | | Nombre del producto | 56 a 72 px | Mayúscula inicial y minúsculas se lee más rápido que todo en mayúsculas | | Precio | Igual que el nombre del producto | Alineado a la derecha en una columna, sin símbolo de moneda si es evidente | | Descripción | 32 a 40 px | Una línea corta o ninguna | | Etiquetas de alérgenos o dieta | 28 a 32 px | Usa letras como V o SG, explicadas una vez en pantalla | Puntos de partida para probar en tu propia pantalla, no reglas. En pantallas más grandes y con colas más cortas se puede ir a menos. - **De ocho a doce productos por pantalla** es más que suficiente. Con más, nadie encuentra nada. - **Elige una tipografía con números claros.** Los precios se leen más que los nombres. [Fuentes para redes sociales](https://gradiently.design/es/guide/fonts-for-social-media) enumera tipografías que se mantienen claras a distancia. - **Deja un margen amplio.** Algunos televisores recortan un poco los bordes; mantén el texto al menos a 60 px de cada lado. - **Agrupa, no encajones.** El espacio entre categorías hace más que las líneas y los marcos. ## Colores y fondos para pantallas de carta Una pantalla es una fuente de luz. Un fondo blanco a pleno brillo resplandece por toda la sala, deslava las palabras y cansa la vista. Un fondo profundo y apagado con texto claro hace de la carta lo más brillante de la pared, que es donde quieres la atención. [Diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) trata el mismo principio para las apps. - Tostadero: espresso, esquina cálida: `radial-gradient(circle at 85% 15%, #7a3b1d 0%, #2a140b 45%, #120906 85%)` - Bar: verde botella, luz tenue: `radial-gradient(circle at 15% 85%, #1f5f55 0%, #0e2b27 45%, #071311 85%)` - Noche: de tinta a ciruela: `linear-gradient(160deg, #1b1830 0%, #2d2350 55%, #4a2a52 100%)` Fondos oscuros con una zona cálida alejada de los precios. Cada uno puede copiarse en un diseño de pantalla o en una carta web. - Fondo espresso: #120906 - Tueste: #7a3b1d - Texto leche: #f3e7d8 - Acento crema: #e9a23b - Etiqueta salvia: #a7b8a0 Una paleta completa para carta: fondo, un tono medio, blanco roto cálido para el texto, un acento para las especialidades y un color discreto para las etiquetas de dieta. Usa el acento para una sola cosa, normalmente la especialidad o el producto que más quieres vender. Si todo está resaltado, nada lo está. Comprueba el contraste con las partes más oscuras y más claras del fondo, no solo con el centro; [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica cómo. ## Movimiento en una carta digital El movimiento es lo que las pantallas pueden hacer y el papel no, y atrae a quienes levantan la vista del móvil. Mantenlo en segundo plano: una deriva lenta de color, luz que se desplaza por la superficie, una especialidad que aparece una vez por ciclo. Los nombres y los precios nunca deben moverse, porque la gente los lee durante varios segundos. ### Evita - Precios que se desplazan o deslizan - Cortes rápidos entre pantallas cada pocos segundos - Etiquetas de «Especial» parpadeantes - Un vídeo tan cargado que el texto tiene que ir en una caja ### Haz - Un fondo en bucle lento bajo palabras quietas - Pantallas que se mantienen 15 segundos o más si rotan - Una especialidad que entra animada y luego descansa - Un bucle que une sin un salto visible Un fondo con movimiento suave también tiene una ventaja práctica: una imagen totalmente estática durante doce horas al día puede dejar una leve sombra en algunas pantallas, sobre todo en paneles OLED. Exporta el bucle como MP4, que casi todos los televisores y reproductores de cartelería aceptan desde una memoria USB o una app. [Vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video) muestra cómo hacer invisible la unión y [fondos de degradado animado](https://gradiently.design/es/guide/animated-gradient-background) tiene ideas para el movimiento en sí. ## Cómo montar una carta digital desde cero hasta la pantalla 1. **Escribe primero la carta** Redúcela a lo que vende. Agrúpala en categorías de ocho a doce productos, una categoría por pantalla. 2. **Elige el diseño una vez** Título arriba a la izquierda, productos en una columna, precios alineados a la derecha. Usa el mismo diseño en todas las pantallas para que la gente lo aprenda. 3. **Diseña al tamaño de la pantalla** 1920×1080 o 1080×1920, con un margen de 60 px y un fondo oscuro. 4. **Prueba desde la cola** Ponla en la pantalla real, con el brillo real, y léela desde donde están los clientes. 5. **Exporta y carga** PNG para pantallas fijas, MP4 para las que tienen movimiento. Nombra los archivos por pantalla y fecha para que se cargue el correcto. ## Mantener precios y especialidades al día La gracia de una pantalla es que puede cambiar. Guarda un diseño maestro por pantalla y cambia solo las palabras, de modo que una subida de precio o una bebida de temporada nueva lleve minutos y el aspecto nunca se desvíe. Las cartas de desayuno y de noche pueden ser dos versiones de un mismo diseño, que se cambian con un temporizador si tu reproductor admite programación. Las cartas impresas, las tarjetas de mesa y el escaparate deben usar las mismas fuentes y el mismo fondo; [diseño de cartas de restaurante](https://gradiently.design/es/guide/restaurant-menu-design) trata la parte impresa. Pantalla horizontal de carta titulada Desayuno, servido hasta las 11,30, con dos platos y precios La versión de mañana de la carta. Pantalla horizontal de carta titulada Hora del spritz desde las 17:00 con tres bebidas y precios El mismo diseño por la tarde, con otro fondo. El Studio de Gradiently tiene plantillas de carta que visten tu propio Mark, así que el fondo es único de tu local y deja sitio a las palabras por sí solo. Con Pro puedes exportar cartas en movimiento como MP4 hasta 4K y guardar los precios en una hoja de cálculo: la [creación en bloque](https://gradiently.design/es/guide/bulk-create-from-spreadsheet) rellena con ella el texto y las tablas de cada pantalla, lo que encaja con un grupo que lleva la misma carta en varios locales. ## FAQ ### ¿Qué tamaño debe tener una carta digital? Diseña a 1920×1080 para un televisor horizontal, o a 1080×1920 para una pantalla colgada en vertical. Usa 3840×2160 solo si tu pantalla y tu reproductor admiten archivos 4K. ### ¿De qué tamaño debe ser el texto en una pantalla de carta? Depende del tamaño de la pantalla y de la distancia, así que prueba desde el final de la cola. En un diseño de 1080 píxeles de alto, unos 56 a 72 píxeles para los nombres de producto son un punto de partida sensato. ### ¿Una carta digital debe tener fondo oscuro o claro? Normalmente funciona mejor el oscuro. Reduce el deslumbramiento en la sala y hace que el texto claro sea lo más brillante de la pantalla. ### ¿Qué formato de archivo usan las pantallas de carta? PNG o JPG para cartas fijas y MP4 para las que tienen movimiento. Casi todos los televisores inteligentes y reproductores de cartelería reproducen MP4 desde una memoria USB o una app. ### ¿Debe animarse una carta digital? Un movimiento suave de fondo ayuda a llamar la atención, pero mantén quietos los nombres y los precios para que la gente pueda leerlos.