Build Simple Style Sheets for Your Clients and for Yourself

I recently stumbled across a tip that I had learned several years back in a design class but had since completely forgotten. I was reminded of it in a video by a talented web designer, Becca Harpain (here is her site), but this tip doesn’t just apply to web designers. It can also be a huge time-saver for yourself too, whether you are a web designer, a writer, a student, or you need to do regular PowerPoint presentation for your team. What I am talking about is creating a style sheet for yourself, or as Becca calls it, an Elements Page. No matter what you call it, you should have one of these.

Why you should create one

Designers, especially graphics designers, often create an official Style Sheet for their clients. It shows what text and images will look like when applying a client’s design choices. It is what clients typically receive along with the design they ordered. These professional Style Sheets also include a lot of extra references such as font names, color numbers, and notes about the designs, but what I’m talking about doesn’t need to be so detailed – it is more of a visual help.

Even if not as detailed, you should have a page such as this for your own needs. You can simply create it in a word processor or even as a separate slide in your presentation template. On it, you should write down separate lines of text for each style and formatting you typically will use.

The style sheet will not be a part of the website that the public will see, but it is something I can share with whomever I am building the site for. It allows them (and me) to see what it looks like when I apply different style and formatting choices to the text. I mostly work with monotone colors, but if you also work with many different colors, you should also include the colors and/or backgrounds you typically use.

You now have a quick guide to see at a glance what options are available when changing text in your application. If you are a writer or this is for a presentation, you can also print this out and hang it on the side of your monitor for easy reference. Since I manage many sites, it would clutter my monitor up too much to do one for each of the sites, so I have a folder I keep handy with all the style sheets for the sites I manage.

Why this saves time

Sure, I could click around and change these settings as I’m working, but it’s a whole lot quicker to just pull out a sheet with all these settings already applied. At a glance I can see if I need to make a font or design change.

This also comes in handy when you plan to change a template or application-wide style. Instead of applying it to your whole project, apply the change to just this document. For example, you can quickly see what changing a background color or image does to your text. I’ve had times when I made a change that at first seem to cause no issues, only to find out that all my quotes where then washed out. It’s better to find that out from your style sheet than your actual project.

I’m also quite picky when it comes to how fonts work together. Most of us never go into the more intricate settings like spacing between letters, but such global changes can impact readability or create style clashes. This isn’t always obvious from where we make the change in that one font we happen to be working on, but on the Style Sheet it would be visible immediately. Again, better to see that on the Style Sheet than on a final project in front of a larger audience!

Other items to include

How does text wrap around images? How does a font color change affect buttons? How do section breaks line up with different fonts in titles? Those are pesky little details that you also do not want to appear up in the middle of that final big presentation, when it is no longer possible to make that change.

Therefore, I also include on my Style Sheet how images are formatted when they have titles, overlapping text, or attributions in small print. For example, on the website Style Sheet, I included the images above.

If you are a web designer, you will also want to know how buttons are affected by global font and color changes. Sure, that CSS you downloaded looked really nice with the examples on GitHub, but how will it impact all the text, images and elements on your own site?

Again, it’s much better to apply it to your style sheet than the whole site, …just to be sure.

Working with clients

I realize not all of us work with clients. However, if you do, you should have several style sheets on hand. Clients like to visually see what their choices do to their logos, their stationary, their advertisements and their websites. Depending on the type of project and the client, you could bring print-outs or you could show them in real-time on a laptop.

I have actually been painfully irritated by graphic designers who don’t show up prepared to do this. I know that whenever I was on the designer’s side of the table, I came prepared, not just with examples, but also with a laptop where I could make changes on the fly. That font that your client is so excited about using may not necessarily fit the way they think – after all that is why they hired you, right? So bring additional examples of the style sheets.

Conclusion

Yes, it’s one more thing you should create, but trust me on this, it will save you time. If you are just a one-person operation or not a graphic designer, but you just do a lot of typing, then do this for your own reference. Print out a copy of your style sheet and stick it to the side of your monitor. It may only save you a few clicks each time, but over time that does add up.

As a bonus, it will help you keep your work looking the same. Use should try to stick to similar styles for everything that you produce. You may think this is boring, but that’s OK because this isn’t just about you. A consistent look for everything that you produce over time will make you look more professional, and that is something we can all benefit from.