Typography

Fonts, text.

Two Fonts

In good design and practice you’ll want only two fonts for your website. One type of font looks lazy and three can look tacky. Any more can start to make your website look very unprofessional. You’ll want a title font, this will go over all Intros and Headers. This will be the important key word text that other websites will pickup. It’s fine to have a fancy font if it suits you. The body font is everything else, it should be clean and easy to read as shown on this site.

Font Options

The fonts I’m listing here are the recommended ones. These will load fast and work with all browsers. Outside of these and you start to run into weird problems.

Note: Ignore the size of the fonts, they were adjusted to look similar.

Abel

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Amatic

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Arimo

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Arvo

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Bevan

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Bitter

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Black Ops

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Boogaloo

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Bree Serif

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Calligraffitti

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Cardo

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Cantata One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Cherry Cream Soda

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Chewy

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Comfortaa

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Coming Soon

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Covered By Your Grace

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Crafty Girls

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Crete Round

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Crimson Text

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Cuprum

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Dancing Script

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Dosis

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Droid Sans

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Droid Serif

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Francois One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Fredoka One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

The Girl Next Door

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Gloria Hallelujah

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Happy Monkey

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Indie Flower

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Josefin Slab

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Judson

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Kreon

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Lato

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Lato Light

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Leckerli One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Lobster

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Lobster Two

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Lora

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Luckiest guy

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Merriweather

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Metamorphous

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Montserrat

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Noticia Text

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Nova Square

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Nunito

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Old Standard TT

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Open Sans

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Open Sans Condensed

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Open Sans Light

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Oswald

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Pacifico

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Passion One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Patrick Hand

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Permanent Marker

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Play

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Playfair Display

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Poiret One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

PT Sans

The quick brown fox jumped over the lazy dog.

Bold. Italic.

PT Sans Narrow

The quick brown fox jumped over the lazy dog.

Bold. Italic.

PT Serif

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Raleway

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Raleway Light

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Rock Salt

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Rokkitt

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Sanchez

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Schoolbell

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Shadows Into Light

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Source Sans Pro

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Source Sans Pro Light

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Special Elite

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Square One

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Tangerine

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Ubuntu

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Unkempt

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Vollkorn

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Walter Turncoat

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Yanone Kaffeesatz

The quick brown fox jumped over the lazy dog.

Bold. Italic.

Yes, that’s a lot of options.

Paragraph Options

Fonts are only a part of the styles.

Like a document text can be aligned left.

Aligned right.

Then Centered.

However, text won’t look the same on every screen. If you’re looking to pad your text to make your website look more important or bigger. You can increase the space between your text. Combined with a justified text it can create a neat effect that works well on every screen.

Serifs are tags attached to the typeface to make it easier to read. Sans Serif means to be with out the tags. You usually see it as just ‘sans’, which will be a smoother face. If you have a text heavy site, like wikipedia, Serifs work well. Otherwise Sans looks more modern.