Make a CV or résumé PDF from HTML (free template)

Writing your CV in HTML gives you full control over the design and makes updates easy. Converting it with a real browser engine produces a PDF with selectable, searchable text, which matters when recruiters and applicant tracking systems read it.

The template

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alex Morgan – CV</title>
<style>
  body { font-family: Georgia, "Times New Roman", serif; font-size: 10.5pt; line-height: 1.4; color: #1d1d1b; margin: 0; }
  h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24pt; margin: 0; letter-spacing: -0.5px; }
  .role { font-family: Arial, Helvetica, sans-serif; color: #054d28; margin: 2px 0 6px; font-size: 11.5pt; }
  .contact { font-size: 9.5pt; color: #555; }
  h2 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-transform: uppercase; letter-spacing: 1px;
       color: #054d28; border-bottom: 1px solid #c9d6c0; padding-bottom: 3px; margin: 16px 0 8px; break-after: avoid; }
  .job { margin-bottom: 10px; break-inside: avoid; }
  .job-head { display: flex; justify-content: space-between; gap: 12px; }
  .job-head strong { font-family: Arial, Helvetica, sans-serif; }
  .dates { color: #555; white-space: nowrap; }
  ul { margin: 4px 0 0; padding-left: 16px; }
  li { margin: 2px 0; }
  .skills { columns: 2; column-gap: 24px; }
</style>
</head>
<body>
  <h1>Alex Morgan</h1>
  <div class="role">Product Designer</div>
  <div class="contact">London · [email protected] · +44 7700 900000 · alexmorgan.example</div>

  <h2>Profile</h2>
  <p>Product designer with seven years’ experience shipping web and mobile products for fintech and retail teams.</p>

  <h2>Experience</h2>
  <div class="job">
    <div class="job-head"><strong>Senior Product Designer, Example Bank</strong><span class="dates">2022 – present</span></div>
    <ul><li>Led the redesign of the mobile onboarding flow.</li><li>Built and maintained the team’s design system.</li></ul>
  </div>
  <div class="job">
    <div class="job-head"><strong>Product Designer, Example Retail</strong><span class="dates">2019 – 2022</span></div>
    <ul><li>Designed checkout improvements across web and app.</li><li>Ran usability testing with customers each sprint.</li></ul>
  </div>

  <h2>Skills</h2>
  <ul class="skills"><li>User research</li><li>Prototyping</li><li>Design systems</li><li>Accessibility</li><li>HTML and CSS</li><li>Workshop facilitation</li></ul>

  <h2>Education</h2>
  <div class="job"><div class="job-head"><strong>BA Graphic Design, Example University</strong><span class="dates">2015 – 2018</span></div></div>
</body>
</html>

Convert it

1. Paste the template into the converter’s HTML Code tab and replace the example details with yours.
2. Choose A4 for the UK, Europe and most countries, or Letter for the US and Canada.
3. Margins of 12–15 mm look balanced on a CV; open More settings to change them.
4. Convert, check the preview, and download.

Fitting it on one page

• Reduce the body size in small steps (10.5pt → 10pt) rather than shrinking headings.
• Tighten line-height to 1.3 and section margins before cutting content.
• Lower the page margins a little.
• Use the two-column skills list, and keep bullets to one line where possible.

If it runs to two pages, break-inside: avoid on each job keeps a role together rather than splitting it across pages.

Tips for a professional result

• Keep text as text. Don’t put your name or headings in images; text is what recruiters search and copy.
• Fonts: Arial, Helvetica and Times New Roman are replaced on the converter by metric-compatible Liberation fonts, so line breaks stay the same. Georgia isn’t installed and falls back to a Times-like serif (see which fonts end up in your PDF). For a web font, link it from a public URL or embed it; see fonts and images in HTML to PDF.
• Links: regular <a href> links stay clickable in the PDF.
• Photo: if you include one, embed a resized JPEG as a data URL so it can’t fail to load and keeps the file small.
• File name: downloads are named document.pdf; rename the file to something like Alex-Morgan-CV.pdf before sending.