Diseño de texto para memes
Obtenga posiciones listas para dibujar un meme clásico de texto arriba y abajo: en una imagen de 1200 por 800, ambos textos comparten una letra de 133 píxeles, líneas de 153 y un margen de 32, sin que ninguna caja se salga. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Ancho
- 1 200
- Altura
- 800
- Texto superior
- WHEN THE TESTS PASS
- Texto inferior
- ON THE FIRST TRY
- Tamaño de fuente
- 133
- Altura de línea
- 153
- Margen
- 32
El generador de diseño de texto para memes convierte la anchura y la altura de una imagen, junto con dos subtítulos, en instrucciones prácticas de dibujo. Selecciona un único tamaño de fuente legible, distribuye cada texto en líneas y devuelve cuadros delimitadores en píxeles junto a los bordes superior e inferior. El cálculo es determinista: la misma entrada siempre genera las mismas coordenadas. Use el resultado con Canvas, SVG, una biblioteca de imágenes o un servicio de renderizado para obtener una tipografía uniforme sin ajustar tamaños mediante prueba y error.
Indique el lienzo y los dos textos
Introduzca la anchura y la altura de la imagen en píxeles y, después, los textos que deben aparecer arriba y abajo. Ambos son obligatorios, ya que esta herramienta equilibra una composición de meme con dos zonas de texto completas. Se eliminan los espacios al principio y al final, y los espacios repetidos se normalizan antes de medir.
Por ello, un texto vacío genera un error de entrada en lugar de un cuadro engañoso sin tamaño. Las dimensiones deben ser números enteros entre 64 y 10,000 píxeles, y cada texto puede contener hasta 500 caracteres. Estos límites mantienen un cálculo previsible tanto en la página interactiva como en procesos automatizados.
El margen depende del lado más corto, por lo que conserva una separación visual semejante en imágenes verticales, horizontales y cuadradas. Si va a redimensionar la imagen, calcule el diseño con sus dimensiones finales.
Comprenda el ajuste y la división en líneas
La calculadora elige un tamaño de fuente entero que comparten ambos textos. Empieza con un valor derivado de las dimensiones de la imagen y prueba tamaños cada vez menores hasta que los bloques superior e inferior caben. Cada bloque puede ocupar como máximo el cuarenta y dos por ciento de la altura útil, de modo que queda separación incluso cuando ambos usan varias líneas.
Siempre que es posible, las palabras permanecen completas. Si una palabra supera la anchura disponible, se divide en fragmentos para impedir que el cuadro salga de la imagen. Las estimaciones usan un perfil interno estable de letras gruesas y condensadas: los caracteres estrechos ocupan menos y las mayúsculas anchas, más.
Se trata de una estimación analítica, no de una medición del navegador. Para acercarse al resultado, use una fuente condensada y gruesa parecida a Impact, respete el interlineado devuelto y centre cada línea.
Renderice la geometría devuelta
El resultado incluye el tamaño de fuente elegido, el interlineado, el margen exterior y objetos separados para las zonas superior e inferior. Cada objeto contiene las líneas resultantes y sus coordenadas x e y, anchura y altura en píxeles. El cuadro superior comienza en el margen calculado.
El inferior termina a la misma distancia del borde de abajo, por lo que su posición se mantiene aunque cambie el número de líneas. Dibuje cada línea desde la coordenada y del cuadro, avanzando según el interlineado, y céntrela respecto a toda la imagen. El contorno, la sombra, el uso de mayúsculas y el color quedan fuera de esta capacidad porque afectan al aspecto, no al espacio reservado.
En automatizaciones, guarde la geometría con los textos para reproducir la composición sin repetir ajustes manuales.
Qué puede hacer con ella
Crear un generador de memes
Calcule una geometría uniforme antes de dibujar texto sobre las plantillas de imagen elegidas por sus usuarios.
Preparar instrucciones para Canvas o SVG
Convierta dos textos en líneas y cuadros de píxeles que una interfaz pueda consumir directamente.
Automatizar imágenes para redes sociales
Cree diseños repetibles para lotes de imágenes con texto sin probar manualmente una serie de tamaños.
Preguntas frecuentes
¿Cuánto cuesta el cálculo?
El mismo cálculo determinista también puede ejecutarse en el navegador.
¿Por qué deben contener texto ambos subtítulos?
Esta capacidad calcula un diseño equilibrado con dos textos. Un texto superior o inferior vacío, o compuesto solo por espacios, se rechaza como entrada no válida.
¿El resultado modifica mi imagen?
No. Solo devuelve datos de fuente y geometría. Úselos con el procesador de imágenes, Canvas o SVG que prefiera.
¿Qué fuente debo usar al renderizar?
Una fuente gruesa y condensada con métricas similares a Impact será la que mejor coincida con las estimaciones internas.
¿Puede una palabra larga salir de la imagen?
No. Si una palabra supera el área útil, se divide en fragmentos para que todos los cuadros respeten los márgenes horizontales.
¿Por qué comparten tamaño los textos superior e inferior?
El tamaño común aporta un peso visual uniforme. El menor tamaño que necesite cualquiera de los dos se aplica a ambos.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/meme-text-layout \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}'const res = await fetch("https://api.kit.forhosting.com/image/meme-text-layout", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 1200,
"height": 800,
"top_caption": "WHEN THE TESTS PASS",
"bottom_caption": "ON THE FIRST TRY"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/meme-text-layout",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 1200,
"height": 800,
"top_caption": "WHEN THE TESTS PASS",
"bottom_caption": "ON THE FIRST TRY"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/meme-text-layout", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/meme-text-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"width": 1200,
"height": 800,
"top_caption": "WHEN THE TESTS PASS",
"bottom_caption": "ON THE FIRST TRY"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.meme_text_layout",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_width | 10000 |
max_height | 10000 |
max_chars | 500 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Renderice la geometría devuelta
Si su API gráfica posiciona el texto por la línea base, añada antes el ascendente de la fuente elegida.