No More Blurry Logo! Nicer Results from TCPDF

A white, rounded square logo with an abstract S-shaped design on a gradient blue and purple background.

TCPDF is a free PDF generator that dynamically turns the contents of a web page into a PDF. Like most PDF generators out there, it haNo More Blurry Logo! Nicer Results from TCPDFs its quirks and limitations. Converting an HTML page to the PDF format is a complex operation that isn’t going to yield results that  directly match those of a PDF designed by hand.

In this case, we had a client that wanted to make the generated PDFs match more closely to an existing PDF design. When I first looked at the generated version, there were some glaring flaws. Most noticeably, the logo appeared very blurry and the font being rendered was hard to read.

With a few fairly simple updates to the TCPDF template, it now looks remarkably better:

Sharper Logo

For the header image/ logo, always use a large (at least 2x) image, otherwise it’s going to look all pixelated and blurry. Another site also mentioned setting the image aspect ratio in the TCPDF config to 1.53 ( define (‘PDF_IMAGE_SCALE_RATIO’, 1.53); ). I tried this first, and it did not have the effect that using a larger image did, though I’ve left that option as well.

Better Font Rendering

The default Helvetica rendered terribly for me, so I would avoid using it. The letter forms were too thin and seemed very inconsistent/light. There are a few other default font choices to choose from or you can  generate new fonts using a TTF. TCPDF has these functions built into a command line; if you don’t want to deal with that, the same functionality is available in some online tools. I took the free font “Ubuntu” from Font Squirrel and uploaded them to generate the necessary files. Some notes on the conversion and naming:

  1. Files need to be named “fontname”, “fontnamei” italic, “fontnameb” bold, “fontnamebi” bold italic.
  2. I noticed that the regular weight looked too bold, so I used Ubuntu Book (Light) for the regular, and Ubuntu Medium for the bold.
  3. You need both the PHP and .Z files. They should be placed in the fonts folder.

Change Default Font Size

The default font size was much too large for the body text. In this case, I set the font size to 9. This can be done with SetFont. Example:

// set font
$pdf->SetFont('ubuntu', '', 9);
// not quite black
$pdf->SetTextColor(25, 25, 25);

Only Show Header on First PDF Page

You can have the header only show on the first page of the PDF with this:

public function Header() {
   if( $this->page == 1 ){
     // CODE HERE
   }
}

Note About Element Top and Bottom Margins

Changing the spacing between elements can be a pain at first. I had to figure it out through trial and error when adding a blue line under the H1s. If you are having trouble, try modifying by:

  1. Altering the true/false parameter in WriteHTML that deals with space / line breaks
  2. Removing or adding BRs (line breaks) to the written HTML
  3. Positioning of logo/graphics in the header area; it may have a set cell height and is positioned within that

How to Add a Line Separator

I added the blue line under the header with the following code. Basically, SetLineStyle is setting the style that is rendered when the HR (horizontal rule) element is used:

$color_line = array(39, 67, 141);
$pdf->SetLineStyle(array('width'=>0.36,'cap' =>'square','join'=>'miter',
   'dash'=>0,'color'=>$color_line));
$pdf->writeHTML('<br /><hr />', true, 0, true, 0);

The final result can be viewed on the legal service pages and attorney bios at ArcherLaw.com.

Blog Decorative Background

Join the Sales and Marketing News, receive our last insights, tips and best practices.

Our 7 Guarantees

Keeping 2,000+ Clients Happy Since 2001.

1
You Will Love Your Design We design to please you and your clients
2
Same-Day Support 24-hour turnaround edits during business hours
3
Free Education We provide knowledge to help you expand
4
No Hidden Charges We quote flat-rate projects
5
Own Your Site No strings attached
6
We Create Results SEO, PPC, content + design = clients
7
We Make Life Easier One agency for web, branding and marketing