• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

Start The Visual Design Process By Defining The Typography First

posted on June 8, 2012

TweetFacebookLinkedInPin

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.

TweetFacebookLinkedInPin
Previous article: Design the Email Newsletter Sign-Up Box That Works
Next article: 3 Examples Of CSS Typography To Use For Your Blog

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

About Author

I'm Rafal Tomal, I help designers and businesses create simple and beautiful websites that work.

More about me...

Reader Interactions

Comments

  1. Jared Williams says

    June 8, 2012 at 4:24 pm

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

    Reply
    • Rafal Tomal says

      June 8, 2012 at 10:41 pm

      Thanks Jared!
      Yes, we can learn a lot from the Target brand.

      Reply
  2. Sean Davis says

    June 11, 2012 at 3:23 pm

    Hey, Rafal. Great stuff here.

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

    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.

    Reply
    • Rafal Tomal says

      June 11, 2012 at 3:27 pm

      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.

      Reply
  3. Marlon says

    June 27, 2012 at 2:31 pm

    Great article, congrats!

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

    Reply
    • Rafal Tomal says

      June 27, 2012 at 4:30 pm

      Thanks for your comment!

      You can start here: http://rafaltomal.com/3-examples-of-css-typography-to-use-for-your-blog/

      Reply
  4. Taposy Rabeya says

    July 7, 2015 at 11:52 pm

    Very nice, self explanatory post, 100% useful, this is certainly an example post to be referenced!

    Reply
  5. Salim Ahmed says

    October 31, 2016 at 3:02 pm

    Educational post and i like your method. I think that it’s help me professional work.

    Reply

Trackbacks

  1. Customize Thesis Theme says:
    June 13, 2012 at 9:53 pm

    […] 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 […]

    Reply
  2. 7 Business Decisions to Make Before You Start a Blog says:
    July 3, 2012 at 2:00 pm

    […] 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. […]

    Reply
  3. Making of: BillErickson.net Redesign — Rafal Tomal says:
    September 7, 2012 at 4:02 pm

    […] 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 […]

    Reply
  4. What it Takes to Be a Successful Freelance Web Designer (Interview with Rafal Tomal) says:
    September 20, 2012 at 7:55 am

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

    Reply
  5. 3 Examples Of CSS Typography To Use For Your Blog — Rafal Tomal says:
    October 24, 2012 at 11:03 pm

    […] 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 […]

    Reply
  6. Introducing typespiration.com — Rafal Tomal says:
    October 10, 2013 at 4:55 am

    […] 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 […]

    Reply
  7. Free Web Style Guide PSD Template — Rafal Tomal says:
    November 19, 2013 at 9:07 am

    […] 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 […]

    Reply
  8. Why is Typography so Important? says:
    February 28, 2014 at 7:12 am

    […] 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 […]

    Reply
  9. What it Takes to Be a Successful Freelance Web Designer (Interview with Rafal Tomal) - Bidsketch says:
    June 14, 2014 at 3:36 pm

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

    Reply
  10. Making of: ChrisDucker.com Redesign says:
    January 18, 2018 at 8:58 pm

    […] you may already know, I usually start my visual design by designing the typography first. I believe typography is the most important element of every website and that’s why I want it to […]

    Reply
  11. Introducing typespiration.com says:
    January 18, 2018 at 10:38 pm

    […] 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 […]

    Reply
  12. 3 Examples Of CSS Typography To Use For Your Blog says:
    January 18, 2018 at 10:42 pm

    […] 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 […]

    Reply
  13. Free Web Style Guide PSD Template says:
    January 18, 2018 at 11:03 pm

    […] 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 […]

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!