Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/seo-ultimate/modules/class.su-module.php on line 1195

Warning: session_start(): Cannot start session when headers already sent in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/simple-ajax-contact-form/sacf.php on line 299
Web Design | Simon Lockyer
best websites of the world


Tag Archives: Web Design

Great google web font combinations – Part 2

A few months ago I wrote a blog post showing 10 good combinations of google web fonts. The feedback and views of the blog post were outstanding so I have decided to write a part 2 showing some other great google web font combinations. I hope you enjoy it and do let me know if you have any suggestions!

Dosis & Ubuntu


Bitter & Source Sans Pro


Bree Serif & Open Sans


Playfair Display & Muli


Sansita One & Kameron


Nixie One & Ledger


Molengo & Lekton


Sintony & Libre Baskerville


Monda & offside


AbeeZee & Grand Hotel




CSS em Units Explained

Most web designers and web developers have relied for years on pixel values. I for one didn’t really know allot about using em values. This article will hopefully try to explain what em units are and how you could use them in your projects.

What exactly is an em value?

Formal definition from of the unit

“Equal to the computed value of the ‘font-size’ property of the element on which it is used.”

So if we have set the font size of an h1 element to 20px and then we used the following code:

	font-size: 20px;
	line-height: 1.2em;

this would set the line height to 20% bigger than the font size set. So it would be 24px high.

But what if you don’t set the size of your font? Generally in your CSS tree you will have set font size’s at some point, I don’t really see how you cant! But if no font size has been set the size on an em unit will result to 16px.

The only way you can learn is by doing! So lets try one more.

Say we have a div with a font size set to 20px how would you go about setting the width and the height of the div to be the same as 100px? Well 100 / 20 = 5 so you would set the height and the width of the div to be 5em like so:

.div {  
    font-size: 20px;  
    width: 5em;  
    height: 5em;  

A little tip – comments

Recently I have completed some work in collaboration with some other web designers and developers. To be polite the codes comments were particularly light. Its not really that necessary to comment CSS code quite as much as if you were writing in PHP or C# however in the case of using em it is really helpful. For the example above I like to comment like the example below. This really helps after a while to get your head round em units and you will be grateful when you go back to look at your CSS file in a few months time!

.div {  
    font-size: 20px;  
    width: 5em; /* 100px / 20px = 5em */
    height: 5em; /* 100px / 20px = 5em */

Round up

I found it quite hard to get into the habit of using em units after using pixels for such a long time. However the new releases of the popular css frameworks, Foundation.Zurb and Bootstrap include the use of em units.

While current trends in web design make use of responsive layouts I believe the use of pixels and percentages are necessary for setting container sizes etc. However the use of em units become useful when setting sizes in relation to fonts.



Great Google Web Font Combinations

Google Web Fonts started out with a handful of fonts on offer to the public, these days there are over 600 to choose from. This large resource comes in handy when designing websites allowing a designer to include a new custom font with the copy and paste of a small snippet of code.

Whilst the large resource is hugely beneficial, sifting through over 600 fonts to find combinations that work can be time consuming and quite hard work. I have written this article on which fonts I think work well together and that I have used in past and current projects.

Lobster & Cabin


Arvo & PT Sans


Droid Serif & Droid Sans


Volkorn & Ubuntu


Oswald & Lora


Merriweather & News Cycle


Sanchez & Quicksand


Avro & Open Sans


Varela Round & Muli


Droid Sans & Raleway


Lobster 2 & Droid Sans


I hope this is somewhat helpful. Thanks for reading!



How To Gather Web Design Inspiration & Ideas

As a web designer and developer I find myself constantly needing some kind of inspiration, whether it’s for a new web page design or a new image slider that needs to be built. There is a fine line between using a website as inspiration and ‘stealing’ the ideas.  When I first started in the enormous industry of web design and development I purchased the book “The Web Designer’s Idea Book”. This put forward the idea that a good designer would take elements from existing work merge them together to create an entirely new design. Now sometimes, as I’m sure most designer have, I have a moment where I can just see everything in my mind of how it should work and look and that’s great, but sometimes I get a bit of a mental block and need some help. The following article lists some great websites and books that I have used and recommend to gain inspiration, and remember don’t steal!

Inspiration Websites

I could list hundreds of websites that I have used to gather inspiration; my bookmarks tab is full in chrome!

My favorite place to look for inspiration is on awards websites. This is because it lists a huge amount of websites that people have voted for and that have won awards. The general standard of design and usability of the websites listed is very high which provides a high standard to work too.


I use this website when I need some fast inspiration, its great to browse hundreds of web designs in a few minuets.


The Best Designs provides a well-categorized list of websites. For example if you the look and feel you are going for is “dark” you can filter the results they have by that category, which stops you from sifting through hundreds of irrelevant entries.


Awwwards is my favorite chosen website to work with when it comes to inspiration. There filter system for looking through entries works perfectly allowing a user to find relevant designs with ease. You can sort the entries by, Keywords, Tags, Colour etc… This website is a must for your web inspiration bookmarks tab!

A few others worth checking out:





As I’m sure you are aware ThemeForest is a website that designer can sell templates and themes for websites. Some of the designers on this website really are top class showing some great designs especially responsive web ones, which have really helped me in the past to get a feel off where elements will go when a page is responding.

Inspiration Books

I know that everything is available on the web for no cost, however I am still a fan of being able to pick up a book and look at print material to gain inspiration. I use 2 books regularly: The Web Designers idea book Vol 1 and 2. These are available from amazon and are cheap for what you get! I believe Vol 3 is coming out this year too.

Round Up

There are thousands of beautifully designed websites out there these days. Research into existing websites and gathering inspiration is key to the development of a website. However always keep in the back of your mind of how the website will work. Its all well and good to have an amazing web design but if the website doesn’t work and let a user achieve there goal it is pointless. Try to cross the design and usability.

Thanks for reading and any comment would be appreciated!



Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048