Plantilla de currículum HTML y CSS para imprimir: contenido seleccionable, diseño de una columna y estilos específicos para papel.
Un currículum que conserva el texto
Esta plantilla currículum HTML utiliza una columna y contenido seleccionable para facilitar lectura, actualización e impresión. No convierte la experiencia en una imagen ni depende de barras gráficas para describir competencias. La versión de pantalla incluye un botón que abre el diálogo de impresión del navegador. Desde allí puedes imprimir o guardar un PDF cuando el sistema lo permita. El archivo final debe revisarse porque el resultado depende también de las opciones de impresión utilizadas.
Sustituir instrucciones por información concreta
Empieza por nombre, contacto y perfil. Elimina cualquier instrucción de la maqueta antes de compartirla. En el resumen profesional explica tu especialidad y el tipo de trabajo que buscas con palabras verificables. Evita presentar como experiencia laboral una práctica sin aclararlo. Para cada puesto, relaciona responsabilidades y resultados con tu contribución. Si utilizas una cifra, comprueba su origen y el contexto: un porcentaje sin referencia no ayuda a evaluar lo que hiciste.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.
Así se ve esta plantilla · Diseño de muestra interactivo
La vista previa está aislada del artículo. Copia el código de debajo para personalizarla.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ana Mora — Currículum editorial</title>
<style>
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:#e7e0d6;color:#392d39}.cv-toolbar{width:min(1000px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px auto;font-size:.75rem;color:#756675}.cv-toolbar button{border:0;background:#392d39;color:#fffaf3;padding:12px 18px;border-radius:30px;font-size:.75rem}.resume{width:min(1000px,calc(100% - 32px));margin:0 auto 50px;background:#fffaf3;padding:60px;box-shadow:0 20px 65px #392d3915}.resume-head{display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:2px solid #392d39;padding-bottom:40px}.resume-head h1{font:clamp(4rem,8vw,6.7rem)/.86 Georgia;letter-spacing:-.075em;margin:25px 0}.resume-head em{font-weight:400;color:#806080}.job-title{font-size:1rem;margin:0}.resume .eyebrow{font-size:.55rem;color:#806080}.monogram{position:relative;display:grid;place-items:center;width:160px;height:180px;border-radius:90px 90px 10px 10px;background:#e8d4b4;color:#392d39;font:4rem Georgia;transform:rotate(6deg)}.monogram span{position:absolute;bottom:-25px;right:-10px;color:#806080;font-size:4rem}.resume-layout{display:grid;grid-template-columns:210px 1fr;gap:55px;margin-top:45px}.resume aside{border-right:1px solid #392d3925;padding-right:30px}.resume aside section{margin-bottom:35px}.resume aside h2{font-size:.8rem;letter-spacing:-.01em;margin-bottom:15px}.resume aside p{font-size:.72rem;color:#7b707a;overflow-wrap:anywhere}.skills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}.skills li{font-size:.62rem;border:1px solid #392d3930;border-radius:20px;padding:5px 9px}.side-note{background:#eee4d7;padding:20px;border-radius:2px}.side-note span{font-size:2.5rem;color:#806080;line-height:1}.side-note p{font-family:Georgia;font-size:1rem!important;color:#392d39!important;line-height:1.2;margin:20px 0 0}.resume-content>section{margin-bottom:38px}.resume-content h2{font:2rem/1.1 Georgia;letter-spacing:-.045em}.resume-content p,.resume-content li{font-size:.8rem;color:#7b707a}.experience{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #392d3920}.experience>div{display:flex;justify-content:space-between;gap:15px;align-items:start}.experience h3{font-size:.95rem;margin:0}.experience span{font-size:.6rem;white-space:nowrap;color:#806080}.experience .organization{font-size:.67rem;margin:8px 0 12px}.experience ul{padding-left:17px;margin-bottom:0}.resume-content section>h3{font-size:.95rem}.resume footer{font-size:.55rem;color:#7b707a;border-top:1px solid #392d3925;padding:20px 0 0}@page{size:A4;margin:13mm}@media print{body{background:white}.cv-toolbar{display:none}.resume{width:auto;margin:0;padding:0;box-shadow:none}.resume-head{padding-bottom:22px}.resume-head h1{font-size:55pt}.resume-layout{grid-template-columns:160px 1fr;gap:28px;margin-top:25px}.resume aside{padding-right:20px}.resume-content>section{margin-bottom:24px}.resume-content h2{font-size:20pt}.resume-content p,.resume-content li{font-size:9pt}.resume aside p{font-size:8pt}.monogram{width:110px;height:130px;font-size:35pt}.experience{break-inside:avoid}h2,h3{break-after:avoid}.resume-head,.resume-content>section{animation:none}.resume footer{font-size:7pt}}@media(max-width:650px){.resume{padding:30px}.resume-head{align-items:start}.monogram{width:90px;height:110px;font-size:2.5rem}.monogram span{font-size:2.5rem}.resume-layout{grid-template-columns:1fr;gap:10px}.resume aside{border-right:0;border-bottom:1px solid #392d3925;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:15px}.side-note{display:none}.experience>div{display:block}.experience span{display:block;margin-top:8px}.cv-toolbar>span{max-width:120px}}
</style>
</head>
<body>
<div class="cv-toolbar"><span>Una trayectoria, bien contada.</span><button type="button" id="print">Imprimir / Guardar PDF ↗</button></div>
<main class="resume reveal"><header class="resume-head"><div><p class="eyebrow">Currículum · Ejemplo editable</p><h1>Ana<br><em>Mora.</em></h1><p class="job-title">Diseñadora de producto digital</p></div><div class="monogram" aria-hidden="true">am<span>✳</span></div></header><div class="resume-layout"><aside><section><h2>Contacto</h2><p>Ciudad, país<br>Tu correo profesional<br>Teléfono opcional</p><p>Añade la URL real de tu portfolio.</p></section><section><h2>Especialidades</h2><ul class="skills"><li>Diseño de interfaces</li><li>Sistemas visuales</li><li>Prototipos</li><li>HTML & CSS</li><li>Accesibilidad</li></ul></section><section><h2>Idiomas</h2><p>Indica cada idioma y describe tu nivel de forma honesta.</p></section><section class="side-note"><span>→</span><p>El buen diseño hace que las cosas se entiendan.</p></section></aside><div class="resume-content"><section><p class="eyebrow">01 / PERFIL</p><h2>Diseñar con intención.<br>Resolver con claridad.</h2><p>Resume aquí tu experiencia, especialidad y el tipo de problema que sabes resolver. Sustituye este ejemplo por información verificable sobre tu trayectoria.</p></section><section><p class="eyebrow">02 / EXPERIENCIA</p><article class="experience"><div><h3>Tu puesto más reciente</h3><span>2024 — Actualidad</span></div><p class="organization">Organización · Ubicación o modalidad</p><ul><li>Explica una responsabilidad relevante para la oportunidad que buscas.</li><li>Describe un resultado comprobable y tu contribución concreta.</li></ul></article><article class="experience"><div><h3>Experiencia anterior</h3><span>2022 — 2024</span></div><p class="organization">Organización · Ejemplo de fechas</p><ul><li>Añade alcance, herramientas o tareas que aporten contexto.</li><li>Evita métricas inventadas y descripciones genéricas.</li></ul></article></section><section><p class="eyebrow">03 / FORMACIÓN</p><h3>Titulación o programa</h3><p>Centro · Fechas reales · Especialización relevante.</p></section><section><p class="eyebrow">04 / PROYECTOS</p><h3>Un proyecto que demuestre tu criterio</h3><p>Describe contexto, decisión y resultado. Añade un enlace real cuando puedas compartirlo.</p></section></div></div><footer>Currículum de demostración · Reemplaza nombre, fechas y contenido antes de compartirlo.</footer></main>
<script>
document.querySelector('#print').addEventListener('click',()=>window.print());
</script>
</body>
</html>
Adaptar el contenido al puesto
La plantilla no necesita contener toda tu trayectoria con el mismo nivel de detalle. Selecciona la experiencia más relevante para la oportunidad y mantén fechas y cargos coherentes. Puedes añadir una sección de proyectos si estás empezando o si un trabajo personal demuestra una habilidad importante. Explica alcance, herramientas y resultado sin copiar descripciones genéricas de ofertas. El objetivo es que una persona encuentre evidencias relacionadas con lo que necesita contratar.
Por qué se evita una columna lateral fija
Una distribución de una columna reduce decisiones de orden y facilita que el texto continúe de forma natural al imprimir. También funciona mejor cuando aumentas el tamaño de fuente o añades una descripción larga. No garantiza compatibilidad con todos los sistemas de selección ni una lectura automática perfecta. Por eso conviene revisar el PDF, seleccionar su texto y comprobar el orden en que se copia. Si una plataforma pide un formato concreto, sigue sus requisitos.
Qué hacen los estilos de impresión
La regla media print retira el botón, simplifica colores y elimina el contenedor decorativo. La configuración de página propone A4 y márgenes, aunque el navegador y la impresora pueden aplicar sus propios ajustes. Los encabezados intentan mantenerse unidos al contenido siguiente y cada experiencia evita cortes cuando sea posible. No son garantías absolutas de paginación. Si un bloque es más alto que una página, tendrás que resumirlo o permitir que se distribuya de forma razonable.
Guardar PDF y revisar el resultado
Abre la vista previa, elige destino y comprueba tamaño de papel, escala y márgenes. Revisa si el navegador añade cabeceras con URL o fecha y decide si deben desactivarse. Después abre el PDF generado y verifica que no se corten líneas, que los enlaces funcionen y que el texto siga siendo seleccionable. No envíes la primera exportación sin mirarla. Un currículum que se ve correcto en pantalla puede dejar una página final casi vacía al imprimirse.
Datos personales con un propósito
Incluye la información necesaria para que puedan contactarte y valorar tu candidatura. No añadas automáticamente dirección completa, identificadores o datos privados porque aparezcan en una plantilla antigua. El teléfono es opcional en el ejemplo para que decidas cómo quieres recibir contacto. Si publicas el currículum en una web, recuerda que sus datos pueden quedar accesibles a cualquiera. Puedes mantener una versión pública más breve y otra específica para procesos donde necesites información adicional.
Mantenimiento y comprobación final
Guarda el HTML como fuente editable y exporta un PDF nuevo cuando cambie la experiencia. Revisa fechas, ortografía, enlaces y el nombre del archivo. Pide a otra persona que identifique tu perfil y tus dos aportaciones principales en una lectura rápida. Si no puede, simplifica el contenido antes de reducir la fuente para que quepa todo. La utilidad del documento depende de la claridad de sus evidencias, no de ocupar cada centímetro de papel.
Vincular proyectos con evidencias concretas
Si incluyes un portfolio o repositorio, selecciona destinos que representen el trabajo descrito. Un enlace a una página vacía puede debilitar una candidatura más que su ausencia. Comprueba permisos y disponibilidad desde una ventana donde no tengas tu sesión iniciada. Si el proyecto fue confidencial, describe responsabilidades sin exponer información del cliente. No incluyas archivos internos como muestra por comodidad. Puedes presentar una explicación pública autorizada o un proyecto de práctica claramente identificado para demostrar una habilidad sin comprometer material ajeno.
Fechas y periodos sin ambigüedad
Utiliza un formato coherente y comprensible para inicio y fin. Si una experiencia continúa, indícalo con una palabra clara. No necesitas justificar cada intervalo dentro del documento, pero sí evitar rangos que se contradigan entre secciones. Si cambias de orientación profesional, un apartado de proyectos o formación puede explicar qué estás haciendo ahora. Mantén el foco en información útil para evaluar la candidatura. La plantilla admite varios bloques, aunque conviene decidir su orden según relevancia y no por la cantidad de espacio que ocupan.
Diseñar para papel sin olvidar la lectura digital
Un PDF puede consultarse en pantalla, imprimirse o procesarse mediante herramientas de selección. Usa enlaces reconocibles y no dependas de un código QR como única vía de acceso a tu trabajo. Comprueba contraste también en una impresión en escala de grises. Una línea azul muy clara puede desaparecer aunque se vea bien en tu monitor. Si incorporas iconos, acompáñalos de texto y evita que sustituyan datos esenciales. El diseño debe seguir siendo útil cuando pierde color o cambia la forma de interacción.
Una exportación con nombre reconocible
Utiliza un nombre de archivo que identifique la versión que quieres enviar, sin dejar nombres como final definitivo nuevo. Conserva una copia editable y revisa que el PDF adjunto corresponde al contenido actualizado. Si adaptas el documento a varias candidaturas, comprueba especialmente perfil y enlaces para no enviar una referencia equivocada. No necesitas añadir fecha visible a cada página si no aporta información, pero sí un método personal para distinguir versiones. La última comprobación debe incluir tanto el contenido del currículum como el archivo real que recibirá la persona que lo consulte.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Ajustar la tipografía en CSS y Enlazar un PDF descargable.
