Someone hands you a PDF (a brochure, a brand guide, a printed report) and asks for a website or email that "looks like this". You need its fonts, the size of the body text and headings, the exact colors and the spacing. You can guess them by eye, or you can read them straight from the file.
PDF to CSS reads every piece of text in the PDF together with its font, size, weight and color, plus the colors of filled boxes and bars, and writes it all as a stylesheet you can paste into a project. It runs in your browser, the PDF isn't uploaded, and it works offline once the page has loaded.
Step by step
- Open PDF to CSS and drop your PDF on the page, or click Upload PDF file.
- Pick the Units: px, rem or pt (see below for which to use).
- If only some pages have the design you want, type them in Pages, for example 1-4. Leave it empty to read the whole file.
- Click Get CSS. You'll see the text colors and fill colors as swatches, and each text style shown in its own font, size and color, with the full stylesheet underneath.
- Under More options, untick anything you don't need: the text style classes, the color palette, or the page size and margins. The stylesheet updates straight away.
- Click Copy CSS to paste it into your project, or Continue to download to save a .css file.
What you get
Variables
The stylesheet starts with a :root block of CSS variables:
- Fonts, most used first. --font-body is the font with the most text in the document, and the others follow as --font-2, --font-3 and so on.
- Body text size and line height. The size is the one with the most characters. The line height is measured from the distance between the lines of normal paragraphs.
- Text colors, most used first, starting with --color-text.
- Fill colors of boxes, bars, table shading and colored backgrounds, largest area first.
- Page size and margins, measured from where the text starts and ends on the page.
Base styles
A body rule uses those variables, and h1, h2 and h3 get the styles the PDF used for its headings at each level. A .page rule describes a box the size of the PDF page with its margins, which is handy for print stylesheets or a web version of a document.
One class per text style
Every combination of font, size, weight, slant and color becomes a class, numbered from the most used: .text-style-1, .text-style-2 and so on. A comment next to each class says how many characters use it and shows an example of the text, so you can tell the body text from a caption or a pull quote. The classes point to the variables wherever they can, so changing --color-text or --font-body updates everything that uses it.
Which unit to choose
- px matches what you see on screen. One PDF point is 1.333 pixels, so 12 pt body text becomes 16 px.
- rem divides those pixels by 16, the usual browser default, so 16 px becomes 1rem. Sizes then follow the reader's own font settings, which is better for accessibility.
- pt keeps the PDF's own numbers. Use it for print stylesheets.
Things to know
Font files aren't included. The stylesheet uses the font names from the PDF, each followed by common fallbacks. Many PDF fonts are commercial, and PDFs usually carry only the letters they use, so the fonts can't simply be copied out. If the exact font matters, get it from the type foundry or a font service and load it with @font-face. Until then the fallback keeps things readable.
Colors are what the PDF draws. A PDF made for print sometimes stores colors in CMYK. They're converted to the RGB values a screen shows, which can be slightly different from the brand values in a style guide. If you have the official hex codes, use those.
Scans have no text. A scanned PDF is a picture, so there are no fonts or text colors to read. Run OCR PDF first. OCR adds invisible text, so for scans the stylesheet can only report sizes, not the original fonts or colors.
Want the whole page, not just the styles?
PDF to HTML converts the PDF into a complete web page, with the text, pictures and a stylesheet, either looking exactly like the PDF or as a clean, phone-friendly page.
Also useful: PDF to HTML · OCR PDF
