Clayton JohnsonClayton Johnson   -   January 12, 2018

In a later article, I’ll go through how to make typography much more interesting than what we’re doing here–but just for reference, this tutorial covers the main steps any typography design should abide by.

Although I’m going to be making this PSD design in Photoshop, I understand everyone doesn’t have (a.k.a. can’t afford!) Photoshop or the other Adobe software. Keep in mind that while the specifics may change, you can probably alter this tutorial to work in a variety of graphics programs.


So just like with every design process, let’s start by researching and finding inspiration. For interesting typography design we’re going to need some interesting fonts, an insight to what typography really is, and it’d be helpful to read some techniques and articles as well.

Resources & Articles

Free Fonts:

Choosing a Central Font

Because there are so many styles of fonts, there can be many different themes for a typography-based design. We’re going to choose a font we find interesting in one of the free font sites above, and use it around our design. I usually use because there is a great variety of choices and they are well categorized. You can also go through your own list of available computer fonts.

It is not always necessary to find a custom made, artsy font for these types of designs. A lot of the time designers will use a basic web font like Verdana, and still make an amazing design with just color, size, and proximity of the text.

After going through a list of my available fonts, I chose ‘Scrypticali Normal’. I got this font off of a few weeks ago.

Now we can actually get started on our design.

Headline & Tagline

1. Open a new Photoshop document that is 1100px by 1100px.

2. I’ve decided to do a dark background with lighter text. Since we’re mainly using typography in this design, we can use this technique to make things more interesting. We can make adjustments later, but for now set the foreground color to #333333, and then use the Paint Bucket Tool to fill the entire document with this dark gray.

3. Switch to the Text Tool by pressing ‘T’ on your keyboard. We’re going to find the font we chose above, our central font. In this case, ‘Scrypticali Normal’ with a 150pt size and color of plain white. For this tutorial I’m going to type ‘Webitect’, but you can use whatever text you want. Right now it doesn’t matter where the text is placed because we’re going to do some alterations with it before we decide where to put it.


As you can see, the ‘W’ seems separated from the rest of the name, ‘ebitect’. This is actually an illusion, because as you can see, the first ‘e’ is technically the correct distance away from the right edge of the ‘W’.

To fix this we’re going to manually kern the text. This means we’re going to bring the last part of the word closer to the ‘W’ manually.

4. First choose the final color and size you’d like the text to be. We’ll need to rasterize the text, so we won’t be able to alter it as a text element anymore. I like the plain white against the dark gray, so I’m going to keep it as is.

5. Right click the text layer and then choose ‘Rasterize Type’. In this case, the text layer would be called ‘Webitect’. This will make the layer a rasterized layer, opposed to a text layer, and will give us more functionality for kerning. Using the Polygonal Lasso Tool (Press ‘L’ on the keyboard), create a selection around ‘ebitect’.

6. With the area still selected, switch to the Move Tool (Press ‘V’ on the keyboard). This will form a tighter selection around the text. Use the left arrow key on your keyboard to move the selection over so it sits nicely next the ‘W’.


Click on the image to see the full size.

Now you can press Ctrl D to deselect. The headline should now look better in terms of proximity.

Next we’re going to add a tagline. This should be smaller than the headline, but still big enough, and within close enough proximity to the headline that the visitor’s eyes will be lead to it next.

7. In a new Text layer, write out your tagline. It should be short and simple, or a small paragraph. Make sure it describes your site, you, or whatever it needs to describe. For Webitect it will be ‘Resources for web designers and developers. Articles, tutorials, tips, trends & more.’

8. We’ll need to adjust the font and text size. Let’s change the font first, since the text size varies depending on the font. To add some contrast and interest, let’s do a font that is opposite of our current font, but still compliments it.

I’ve chosen ‘Trechubet MS’. It contrasts because it is a sans-serif font opposed to the serif script font we used for the header, but is still smooth enough to compliment the curves of the header font.

Next choose the text size. You’ll have to try different things to see what looks best. For this tutorial, I’ve chosen 36pt.


In order to finalize our header and tagline text, we’re going to align and space it out appropriately. We’ll want our tagline to line up with the width of our headline, and also bring the tagline closer. Also, we’re going to make the tagline text a shade darker, so the visitor’s eye goes directly to the headline first, and is then lead to the tagline.

9. Let’s deal with the color first. For now I’m going to stick with the grays, so let’s just make it a bit darker. I’ve changed the text color to #cccccc. I’ve also italisized it for a bit more contrast.

10. Using the Ruler Tool (Press Ctrl R if it is not showing) drag two vertical rulers to the edges of the headline.


Click on the image to see the full size.

11. Drag the tagline to line up with the headline. Move it so that it is in an appropriate proximity to the header, and adjust the lines and kerning of the tagline to be the same width of the headline.

Below you can see the ‘Character’ panel where you can adjust the kerning, leading, etc. of the tagline text. Other alterations will require manual movement.


Click on the image to see the full size. Note the Character details are different for each line in the tagline. Each is set separately to align appropriately with the margins.

Now if you remove the rulers (Ctrl H), you’ll notice the alignment of the header and tagline look a bit funny. This is because the ‘W’ is creating a strange illusion again, and our brains tell us the left edge of ‘Webitect’ is further in on the ‘W’. This is all apart of the design process when working with typography. To fix this, let’s redo step 10 and 11 to make it look better.


Press ‘Ctrl H’ to hide the rulers.

12. In the layers palette, use the Ctrl key to select both the tagline and header layers. Right click and choose ‘Merge Layers’. Then, rightclick this new layer and rename it to something better to refer to it by.

The Grid

We can finally start creating the grid to abide by. The first step is to create a very basic grid based off of the header and tagline.


Click on the image to see the full size.

1. Choose the top and left margins for the header and tagline title with the use of the Ruler Tool. I’ve done a 100px margin on the left and right, and a 50px top margin.

2. Switch to the Move Tool (‘V’ on the keyboard) and align the headline and tagline layer in the top left, set by the margins. Next add some rulers to the right and bottom of this layer.

This will set up basic guidelines for the rest of the elements on the page to align correctly with our main typography feature: the headline and tagline layer.

Alignment, Spacing, and Proximity

Next we’ll want to set up margins around the header and tagline, so we have a set guideline of where other elements should go.

Because our design is only going to contain typography, we want enough distance between all the text so it doesn’t blend together too much. With that being said, let’s make a 40px margin. Dramatic and creative spacing (while still keeping proximity and flow in mind) can add a lot of aesthetic appeal to a simple design such as this one.

1. Using the ruler to guide you, create a 40px margin to the right of the headline and tagline and a 40px margin below.

Preview with 40px margins

Dummy Text, a big part of typography design

Next is the dummy text. Because our design is only going to have typography, it will need extra consideration. We’ll work on the headers first <h1>.

1. Create a new text layer (Type ‘T’ on the keyboard to invoke the Text tool). Type something simple, like ‘Header One’.

2. Zoom into the full width of the document to pay better attention to the text itself. We’re going to pick the font and size of the text to be used as headers.

Depending on the type of site, you’ll want to determine if you’ll be using a web safe font or not. If your design is going to be something like a portfolio where you’ll be able to create the headers once and leave them unaltered, than you can use any font, and create images for them later. If you’ll be using this layout for a blog where the headers will change constantly, you’ll want a web-safe font to work with as we’ll be doing the final typography in CSS.

3. I’m going to choose a sans-serif font since our largest text element in a script font. This will add appealing contrast. Be sure to experiment with font, size, and color when determining a header text.

I’ve chosen Arial 30pt Bold, with a light blue color: #9ed0ff.

4. With the new header layer selected, press ‘Ctrl J’ on the keyboard to duplicate the layer. Change this text layer to something like ‘Header Two’. Put it somewhere below the first header layer so we have a few different example titles to work with.

Header text with margins

Headers without margins

The first screenshot is our PSD with the headers, and the second is the same without the rulers in the way. Our next step is to add some more dummy content.

5. Create a new text layer (‘T’) and create some dummy text with the Lorem Ipsum generator. Chose another text combination, with a web-safe font for sure this time.

6. To the right of the text choices at the top, you’ll see a dropdown box to style your text. It will have options such as None, Sharp, Crisp, Strong, Smooth, etc. Be sure this is set to none because that’s what the text will look like naturally in a browser.

7. Choose a web-safe font for your general content. We’ll go with another sans-serif for legibility and repitition.

I’ve chosen Trechubet MS 14pt Regular with a gray color: #bbbbbb.

Dummy Content Text

Click on the screenshot to view the full size.

8. The next step is to reposition the headers and content text appropriately. Although we’ve aligned the the top of the first header with the top of ‘Webitect’, it doesn’t seem that way because the t’s are shorter than the tallest letter, the ‘b’. So we’ll align the top of the text to the top of the t’s.

9. Line up the content text below it so it’s a reasonable distance away from the header. It should be close enough in proximity for the viewer to realize it’s the subtext of the header, but distant enough to be a separate entity, and mimic the margins throughout the rest of the design.

The spacing I’ve chosen is about the same as between the headline and tagline in the layout.

10. Copy the content layer (Ctrl J) and do the same under the second header. Move those two within an appropriate proximity below the first header and content text.

11. Create a few more headers and text layers to make it look like live content.

Layout with More content


We’ll do the navigation next, to the left of the content and under the headline and tagline.

1. To make things interesting, and have the navigation be a primary focus, we’ll make it large text. We’ll use the same font as the headers for repetition, and a similar, but darker blue.

I’ve used 60pt Bold Arial, with a 100pt line height.

Large Navigation

When creating the live version of a layout like this, you may want to create in image of the navigation, and create an image map because large web text can get a bit scratchy.


Like many of the other details, we’re going to create an alternative solution for the footer to add interest.

1. At the bottom edge of the navigation, create another 40px margin.

2. Using the ruler guidelines, fill in the last rectangle below the navigation with a lighter color in a new layer. I’ve just used the rectangular marquee and fill tool, but you can use the rectangle tool as well. I’ve used a medium gray: #cccccc.


3. Add some final text to the footer. I’ve just added my about text from Webitect.

Final Result

Our final result is below. This is a very simple, yet very effective design. Three main elements are seen first: Website title and motto, navigation, and about. The content is easy to find and read as well.


Click on the screenshot for a the full-size view.

In a future article, I’ll be going over more techniques to make typography more interesting, and more of an art-like element.