by Adam Preiser updated May 23, 2017

How To Choose Fonts And Colors For Your WordPress Website


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Choose Fonts And Colors For Your WordPress Website

So before you start customizing your website
and making it yours you need to do a bit of

prep work now would give you a quick crash
course on choosing fonts and colors for your

website that you’re going to use when you’re
making your website look the way that you

wanted to look now I go over these topics
in much more depth in the courses available

on my website I just want to give you a quick
crash course of some resources that you can

use to identify fonts and colors that Juergen
and need to customize your website make it

look how you wanted to look so for software
going to talk about fonts and here’s a website

I like to go to it’s called a font
and you can come here and see different fonts

and how they look together now typically on
your website you’re going to want to fonts

or maybe three depending on how you’re going
to design your site but you typically have

one font that your headline and you would
use this for the different headlines throughout

your site and you typically find it in your
menu and then you would also have a font for

the body of your website and then sometimes
you might have 1/3 sub headline font in this

time sometimes you see it’s a cursive font
and it really kind of draws your eyes to it

so the way fonts work with websites is that
Google has something called Google fonts and

it’s pretty much integrated into all aspects
of WordPress and your to be able to choose

these Google fonts with a drop-down menu so
this website actually shows you some really

good font pairs so it’s already done that
pairing for you it’s kind like when you go

to a fancy steak restaurant and they’ll pair
the wine to the meat that you’re ordering

this is essentially what it’s doing but for
fonts soon come down here and then you would

just scroll down and see the name of the font
you like so here’s a headline and then here’s

the body so the headline is the cabin font
in the body font right here is the old standard

of font and you can just scroll down and they
have font pair after font bear in fact I actually

recently use this website to find a font pair
that I liked for one of my other websites

I really like this newly found right there
that’s nice it’s amazing you want to come

down here and you want to pick out two fonts
whatever you like and you don’t have to stick

with their pair if you like this headline
but you like this body style right here you’re

would want to choose moodily and this font
right here and that would be the font that

you choose now typically when you’re on the
page builder your in to be able to choose different

thicknesses for the font as well to make it
stand out a little bit more so this is just

a little quick crash course to fonts now the
next thing you need is colors and here’s a

website that I like to go to to find colors
now if Yorty have a logo design typically

you can extract the colors or from that logo
and go with those colors through the design

of your website but you can also use this
website it’s called now there’s

20’s and its CEO OL and you can come
here and find lots of really neat colors and

find the ones that you want to use on your
website and kind of similar you’re going to

typically have two colors but sometimes you
might go with three colors so you usually

have your primary color and that’s going to
cover about 60% of your website and then you

would have your accent color and that’s going
to cover about 30% of your website or 40 now

if you did want to go with that third color
I like to call it the pop color it’s going

to be different from the other two colors
and when someone’s on your website you want

to use that color to where you want their
eyes to gravitate to so this could be like

a a button nor a phone number or something
like that or some form of a call to action

and that’s the use of that pop color you don’t
have to but you can use that if you want so

you would just come to this website right
here and I like to click on the explore option

right there and when you do that it’s gonna
show you a variety of of color palettes now

what we’re after is every single color has
something called a hex code and it’s the #and

six characters after that can be letters or
numbers and when you get those hex codes that’s

what you’re going to copy and paste throughout
your WordPress website to get that exact per

size color it is these hex codes so for instance
if I’m here and I like this color palette

right there I would click on view and it’s
can open up a new tab and it’s going to generate

my colors, just click on this X right here
and you see there are the hex codes right

there so I can just highlight this hex code
and then when I paste this into WordPress

it’s going to generate this exact per size
color so you want to get these hex codes now

you’re also gonna have for a lot of things
you do in a page builder you have a color

picker work or you can have this dialing you
can choose your color that way but it’s very

hard to find a color you want it’s really
good to come to websites like this that have

such a variety of colors schemes that are
already put together for you that you can

really just discover what you like and that’s
a lot of the problem with building your own

website is just discovering what you want
and so this is a great tool for that so these

have been two great ways to one find fonts
into fine colors you’re gonna want them because

when you restart building a website you’re
gonna want those color codes in your gonna

want those names of those fonts that you want
to use in your website

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.