Shopify Blog Posts - 4 Steps to more professional Typography

Nice typography is one of the simplest ways to to get a website looking professional. In this article I will take a very ordinary looking website, and make it look better using ONLY typography!

Here is my demo site for this article, so feel free to flick through while reading the comments below.

Step 1 - Use only a few, well contrasted heading styles

Shopify (and websites in general) allow you to use up to 6 heading styles (h1 through to h6). My suggestion would be to:

1. Use only 2 or MAYBE 3 header styles
2. Make sure the ones you use are STRONGLY constrasted so that you can tell them apart!

Contrast was an issue on my demo site, so I have tweaked my 2 header styles (h1 and h2) so that they are VERY different - h2 is MUCH smaller, all caps and has a very large letter spacing now.

See the result of step 1 here.

Step 2 - Use quotations, make them look good!

MOST articles use external resources, but sadly only a few bother to mention that they have. This is a shame, but quoting references actually makes you look a whole lot more professional!

For this step I have very simply highlighted my references by tweaking the typography and giving it a light background - see the results here.

Step 3 - Add some flair

What I mean by flair is a few "nice little details" - this can be anything from some custom icons from fontawesome to a typographical trick or 2. I've gone with a simple drop cap for my demo, you can see it here.

Step 4 - Final, a DASH of colour

I suggest while starting out, a few splashes of a SINGLE colour is the way to go - this is what I have done by adding some orange to my drop cap and my quotations. 

The CSS

In case you're interested, here's the code I used for the demo: