Website development guide

Tips and Tricks resources for designing a stunning website.

TIPS FOR DESIGNING A REMARKABLE WEBSITES

Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.

That’s why we researched the best WordPress fonts that pair better when designing websites according to science! We also give you some WordPress font examples from some beautifully-designed sites, so you can pick and choose what fits your site’s brand.

But first… why should you even care?

This is a Fonts Style

The most important purpose of web typography is to make it easy for users to read the text information being presented. Different typefaces are more or less legible, making typeface selection or paramount importance. Other purposes include brand reinforcement, increased engagement, and improved user experience.

Web typography is, simply put, the way fonts are used in website designs. Typography on the web has evolved from only including a handful of “web safe” fonts to allowing designers to use virtually any properly-licensed font in their web designs.

Web typography is used to make it easy for users to read text information being presented. Different typefaces are more or less legible, making typeface selection or paramount importance. Other uses include brand reinforcement, increased engagement, and improved user experience.

  • The font you choose might seem totally unimportant at first glance. As long as it’s legible, who cares what font type you use, right?
  • Typeface actually matters. Different font types have different levels of readability, different personality and style, and convey very different messages to your readers.
  • Each font has its own personality and feeling, so choose one that most represents your brand.

  • By using Whatfont (Google Chrome extension) you can see what other sites use.

  • We’ll get more into what message certain fonts present in the next two sections, but it boils down to this: People will judge your site’s feel and trustworthiness based on your font choice. So, choose well

  • While it’s not an exact science, there is a psychology behind your font choice. Different typefaces put people into different moods.
  • There are already different studies that have been done around this, like the infographic made by Ted Hunt for CrazyEgg. (please see the infographic as a reference)

  • If you can’t decide what fonts to use, don’t worry – I totally understand. Choosing the right font combination can be stressful. That’s why I made this section – to give you WordPress fonts examples from beautifully designed sites.
  • In other words, to remove the guesswork, so you can make your site look amazing as quickly as possible.
  • Think of this as a sort of WordPress font list. I’ll give you one example of each font family. Let’s get right to it!

Premium Banner

Premium Banner gives you a wide range of styles and options that you will definitely fall in love with

As you can see, there are five major categories of font types:

  1. Serif (The traditional typeface – not good for reading on the web, better for headings than body copy)
  2. Sans Serif (A clean, modern font – high readability, great for body copy, the most popular choice for WordPress sites)
  3. Modern (A progressive, stylish font – good readability, can be used for body text or headings)
  4. Display (The personality choice – alright readability, better for headers than as the main font)
  5. Script (The fancy font – lowest readability, please don’t use this in your body, and use sparingly for headings, better for logos)

TIP NO. 1

CHOOSE 1 FONT

Each font has its own personality and feeling, so choose one that most represents your brand. By using Whatfont (Google Chrome extension) you can see what other sites use.

Montseratt

Lato

Open Sans

Roboto

Raleway

Simple, Clean and Modern. Most websites use this typeface.

HOW TO USE?

If you are starting out, you can’t go wrong with one of the above fonts. Use font size & font weight to differientate.

Playfair Display

Merriweather

Pt Serif

Crimson Text

Crimson Pro

Traditional, Elegant & Handcrafted Look. Also good for long reading, such as blogs.

HOW TO USE?

Use it for Headings or Logo’s Body Text/Main Navigation use a San Serif

OTHER FREE SANS SERIF AND SERIF TO USE

Top 15 Most Rare Sans Serif fonts

  1. Acumin
  2. Glacial Indifference
  3. Poppins
  4. HK Grotesk
  5. Space Grotesk
  6. D-Din
  7. Renner
  8. Alegreya Sans
  9. Cabin
  10. Barlow Condensed
  11. Source Sans Pro
  12. Gothic A1
  13. Basier Mono
  14. Heebo
  15. Quicksand

Top 15 Most Rare Serif fonts

  1. Inknut Antiqua
  2. EB Garamond
  3. Adobe Garamond
  4. Source Serif
  5. Adobe Caslon
  6. Reforma
  7. Young Serif
  8. Butler
  9. Libre Baskerville
  10. Quattrocento
  11. Crimson Text
  12. Cormorant
  13. PT Serif
  14. Caudex
  15. Spectral

TIP NO. 2

Body Font Size

I would suggest to keep your body font size between 14 px – 18 px for paragraphs

12 px

Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.

16 px

Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.

18 px

Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.

TIP NO. 3

Line Length

Use 45-90 characters per line for an easy read. (especially if you have a lot of texts)

NOT RECOMMENDED (BAD)

CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.

RECOMMENDED (GOOD)

CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.

CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.

TIP NO. 4

Text Hierarchy

Define hierarchy by reducing the font size, font weight, or color.

Before

Create an Amazing Headline

Design an “app like” mobile responsive website.

After

Create an Amazing Headline

Design an “app like” mobile responsive website.

Design

A better user experience for you

You can add a top heading like the one above.

DESIGN

A better user experience for you

Reduced font weight, add colour & increase letter spacing.

Marketing

Develop an effective search engine strategy

You can desaturate & capitalize the text like this.

MARKETING

Develop an effective search engine strategy

You can desaturate & capitalise the text like this.

TIP NO. 5

Limit to 1 accent color only

Keep it simple and choose only one color, but use shades of the same color.

The following is a monochromatic color scheme and is an easy way for web designers and web developers to use in ensuring that the website will always looks good!

Pick a colour here: https://www.materialui.co/colors

Alternatively, pick an image you like from unsplash and upload it to adobe for a color palette.

TIP NO. 6

Use Neutral Colours

Can be used to separate content, header, footer & anywhere you don’t know which color to use.

#FFFFFF

#FFFFFF

#f6f6f6

#cccccc

#999999

#4d4d4d

#222222

TIP NO. 7

Button Styles & Colours

Quick Tip

Try keep your button style consistent. Choose between square or rounded. Normally rounded makes your website a little more friendlier. Square gives it a more designer and professional feel.

Step 1

Pick your main colour

Step 2

Go to 0to255.com

Step 3

Put in your #hexcode and pick colour e.g. #333333

Step 4

Choose a colour that is -/+ 2 shades the original e.g. #222222

Apply main colour to background and the darker/lighter as hover.

Or hover it with one of your accent colours.

TIP NO. 8

Picking the Right Image

Using the right image can make or break a website.

Step 1

Choose an image to support your text. 

Step 2

Does the image reflect the style of your website? i.e. Minimal? Expensive? Happy?

Step 3

How to create a 3D Book Cover. See guidelines  here.

Step 4

Is your image large enough? see size guidelines below. If not, improve quality here.

 

TIP NO. 9

How to Add Text Over Images

Always ensure your text is readable by using several techniques shown below.

It is the climbing of the mountain that makes the view from the top so breathtaking

It is the climbing of the mountain that makes the view from the top so breathtaking

Normal image with text overlay

Added background overlay (50%) color to make the text visible

MAKE YOUR LIFE EXTRAORDINARY

MAKE YOUR LIFE EXTRAORDINARY

Normal image with text overlay

Added background color to make the text visible

Note

Not every image is perfect so it need some adjusting. You can add text background, blur the background, or even put a solid gradiant color to a text to make it more visible.

TIP NO. 10

product images

All uploaded sizes should be around be 800 x 800 px

keep the images proportional

key takeaways

must-have resources key tools

Fotor.com – Simple image cropping tool

Canva – Ultimate design tool for beginners (Photoshop Replacement)

Remove.bg – Remove backgrounds on images easily

Adobe XD – Amazing Free Prototyping Software

Images – Unsplash & Adobe Stock

How to shorten that url – tiny url

My Favourite: You can use a chrome extension called Full Screen Capture to screenshot entire webpages for inspiration.

Use it to also screenshot your own webpage to see if everything is consistent.

TIP NO. 11

HOW TO CREATE GRADIENT TEXT IN ELEMENTOR PRO

All uploaded sizes should be around be 800 x 800 px

Custom CSS for Heading Text

Custom CSS for Paragraph Text

selector .elementor-heading-title{
    background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
    background-clip: text;
    -webkit-background-clip: text;
}
selector .elementor-text-editor{
    background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
    background-clip: text;
    -webkit-background-clip: text;
}

How to Generate a CSS Color Gradient

https://mycolor.space/gradient3

Please  click here for the tutorial, click on the following link: (Credit to Jim Fahad Digital)…  

TIP NO. 12

Alignment, Spacing & Separation

1. Try to align things where possible.

2. Ensure spacing is even. And using white space can make your website appear more simple and clean.

3. Use neutral colors, background images, and divider lines to separate content.

TIP NO. 13

Keep your website simple and consistent all throughout

There are many tools, plugins, themes with all sorts of features but 80% of the time we don’t need to use them.

Just focus on the basic elements such as the text, images, and colors.

Follow the guidelines above and you should have a great website.

Don’t need to be fancy, focus on readability, and also on creating useful content.

You Can Use Image Triggers Instead of Using Buttons!

product-1.jpg
product-2.jpg
product-3.jpg

Our Services

we love what we do.

icons8-idea-100.png

Creative thinking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

icons8-omnichannel-100.png

Sales Strategy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

icons8-solve-100.png

Problem solving

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Beautiful and best way to make your User Interface meaningful

Chat with us...
1
Hello! How can I help you today?