Better slide format

A few examples of common mistakes when preparing presentation slides.

I have been doing presentations for a while, and I have seen hundreds of them. Here are easy mistakes to avoid when preparing slides.

Font is too small

The number one problem I see (or rather "can't see") is the font size that is way to small.

Font is tiny

Even worse, every slide with small text usually has a LOT of unused space!

Font is too small

solution - go through each slide and double the font size. Right now. On every slide. It is impossible to make the font too large. Use that white space!

Font is easy to read

Content too low

If you leave the top part of the slide empty, it naturally pushes the content down, until it becomes it is too low.

Bad slide format

This does not always cause problems for people in the audience - sometimes the projector screen is mounted high, so no harm. Yet often the screen hangs low, and the people in the back rows cannot see the bottom third because of the people in front of them.

solution - use the top part of the slide.

Good slide format

The above slide from the Ben Hall's presentation hits all the right notes:

  • the content is high, nothing important is at the bottom
  • the font is large and easy to see from far away
  • there is a clear link to more information
  • leave the bottom of the slide for things that are less important: twitter handle, presentation title, your bank password.

Make links obvious

For a long time, I assumed that people understood that a text in different color below main text was obviously a link to supporting material. And then I was proven wrong. Turns out, no one knew that each slide in my presentations was a jumping point to more material.

Link is not obvious

Now I switched my strategy and make the links very explicit. Links should start with http: or https:, and fit into a single line (makes selecting them on mobile much simpler).

Link is obvious

solution - make the link really obvious by using the full URL.

Slide numbers

Long presentations are awesome (more content), yet make it tough to share just particular insight. My audience members sometimes ask me to show slide numbers so they can easily link to a particular slide. Yet my favorite shows a different slide number from URL hash fragment.

Slide number mismatch

I have not found a good solution to this, except for having good external URLs to share, not the slides themselves. I also sometimes tweet particular slides that I think the audience will find useful by themselves.

Tweeted slide

Personal links

I usually put my contact information at the first and last slides. I also put my twitter handle @bahmutov in a faint font at the bottom of most of my slides where it does not interfere with the content. This allows the audience members who become interested during the talk (which I am sure is approaching 100% of people by the its end) to look me up.

First and last slides

Make slides stand by themselves

The live audience for your presentation will be much smaller than the number of people looking at the slides online. A few hundred people attending or watching the talk video for me is dwarfed by thousands of views the slides are getting. It is imperative to provide a little context to each slide to make them stand by themselves, without the speaker's narrative.

A little context text goes a long way

Luckily, just like the example above shows, a little additional text goes a long way in providing a little bit of context to enable anyone reading the PDF of the slides to understand your main idea. No need to write paragraphs of text on each slide (do not do it!), just an extra title or caption.

Text gets lost in background

If you use a background image, make sure to add a shadow to the text so it stands out. For example, the text at the top of the image has no shadow and is hard to read. The bottom text has custom CSS class applied with text shadow.

Text shadow (bottom)

The CSS could be

.text-outline {
text-shadow: 0 0 3px black, 0 0 5px black, 0 0 10px black;

Tip: you can also set black background color and lower the background image's opacity to better separate the foreground text from the image.

For individual images and code boxes, I suggest adding a shadow on all sides

.shadow {
box-shadow: 0 0 10px #000;

Image shadow

More information

You can find more information on how to deliver good presentations in this presentation (see at