no. 3

Start The Visual Design Process By Defining The Typography First

Start The Visual Design Process By Defining The Typography First

My favorite part of the design process is the visual design aspect. It’s like a reward for all the hard work. Before I get to my favorite moment I spend hours on researching, planning, sketching (well, sketching is fun too…) and wireframing. So now it’s time to visualize all the ideas and add a nice cover to all that magic that is planned behind it.

In some projects you may have to meet the already specified brand style guidelines. That’s good if the company already has a well-defined brand. But that’s bad when that brand includes the “Comic Sans” font that should be used for all headings.

I had to deal with some of that in previous jobs and those projects are definitely not in my portfolio. If someone tells you what fonts you should use for their website, it’s kind of limiting and can kill your creativity.

However, I’d like to talk here about the projects where you can decide about the entire website style. You can probably do that for some clients that only have a logo and some defined basic colors, if you design a website for yourself, or if you design the website template (like a WordPress theme).

What is the best way to begin the visual design process?

If I have a possibility to create a completely new website style, I usually start the design process by defining the typography. I know, it may sound weird and you probably expected to plan the spacing first, do the layout next, and then fill it out with some content, etc.

The reason why I start with the typography first is that I don’t want the layout to influence how the typography should look. Sometimes you may start designing the layout and then you realize that you can’t use big headings or you need smaller font sizes in some particular places.

I think the typography should influence the entire website style.

So choose your typography wisely and spend some time on deciding the text sizes, line heights and font styles. It will repeat over and over again throughout the rest of the project.

Of course, it may not be perfect the first time, and you’ll need to make some corrections later, but it’s a good place to start.

Let typography be the foundation element of your design.

While researching this article, I stumbled upon the Digital Telepathy blog post “Designer Quick Tip: Identify the Foundation Elements of a Great Design”.

I like the idea of finding the element that can be the foundation for the entire web design. It means that you should start by identifying a design element that you really like and then build the rest of the project around it.

Sometimes I find really nice fonts on some other websites, or I notice the poster in the theater, or I appreciate the signage in the mall or department store (Target has some good ones). I usually try to save those moments by taking a quick photo or sketching it in my notepad.

When I start the visual design of the new website, I can bring those ideas back and use them to plan the typography styles.

Let the typography be the foundation element of your design.

How to create and use typography styles?

I start by creating simple styles with one or two headings and short paragraphs. Then, I try to include some other content elements like quotes, lists, links, etc. This gives me a quick brand style guideline that I can base the entire website design on.

After I save it, I start designing the website layout, whitespace, and color scheme for the same project. I keep my typography styles open all the time on another screen for reference. It helps me to keep a consistent-looking design and manage the balance.

The content is my main focus. Since I know what it’s going to look like, I have a better idea how to design the navigation, breadcrumbs, and widgets in the sidebar in order to keep it all well balanced.

It’s like building the engine first and then the body of the car. The content is the engine of most websites.

Practice, practice, practice

Start practicing this method today. You don’t even need to have any specific project in mind. Just open your Photoshop (or other design software of your choice) and come up with your own typography styles inspired by some other designs you saw or some notes you took.

Design a few sample headings, paragraphs, lists, etc. You can also define the text color or background. Then, try to imagine how the entire design of that website could look. It’s really fun and makes the entire visual design process much easier.

I have many styles saved that are waiting for the right project. I’m going to choose my 3 favorite typography styles that I haven’t used for any project yet and publish them in my next blog post. So stay tuned because that might be the foundation element for your next website design.

Feel free to share your thoughts and typography styles that you’ve created by posting a comment below.

Written by Rafal Tomal.

Get Free Design Resources
and Email Updates

Enter your email address and get my
Free Photoshop Wireframe Kit and Web Style Guide PSD templates:

Free content. Unsubscribe at any time. No spam.


  1. Great post Rafal! I’m glad to see that I’m not the only one who appreciates the signage in Target.

  2. Hey, Rafal. Great stuff here.

    I’ll admit that for the longest, Georgia was all I needed in life. :P

    Just recently, I decided to put Font Squirrel to use and start playing around a little bit. Right now on my main site, I’m using a combo of “Helvetica Neue” and “Bebas” and I absolutely love it.

    I know that’s nothing spectacular but it opened my eyes to how big of a role typography plays in design. I hope to dig deeper in the near future.

    • Thanks Sean!
      I use Google Web Fonts for all projects because are free and everyone has an easy access to them. I also have some my favorite fonts and I’m going to show a few nice combinations in my next post.

  3. Great article, congrats!

    Excellent idea to approach the visual aspect of design. I will definitely try this. Thank you for the insight.


  1. [...] Tomal, the lead designer over at Copyblogger Media, wrote a great article about designing your site around great typography combinations. I’ll admit that I haven’t always done that. I was more into bells and [...]

  2. [...] Rafal Tomal, the Lead Designer for Copyblogger Media, makes a case that choosing the typography should be the first step in the visual design process. [...]

  3. [...] you read my previous blog post, you know why I always start the visual design process with defining the typography first. In this step, I create a simple guideline of colors, typography and general visual design [...]

  4. [...] I learned that all the aesthetic details are not that important like the core of the design, which is a good layout and typography. [...]

  5. [...] a previous post I talked about why should you Start The Visual Design Process By Defining The Typography First. I promised to share some styles that I’ve created for myself but haven’t used [...]

  6. […] a while ago. If you read my blog regularly you’ve already seen my previous post “Start The Visual Design Process By Defining The Typography First,” where I explain why I believe that typography is the foundation of any great […]

  7. […] of my first posts in this blog was “Start The Visual Design Process By Defining The Typography First”. It’s been a part of my designing process for a long time and it still […]

  8. […] for people like me that are just learning.  I recently read a post by one of my favorite designers Rafal Tomal in which he believes that a visual design should start with the typography. It really makes complete […]

  9. […] I learned that all the aesthetic details are not that important like the core of the design, which is a good layout and typography. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>