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. Two fonts is the sweet spot. Anymore 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 pick up. 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 just examples. There are thousands of fonts to choose from Keep in mind that some fonts are not designed for websites, this can affect the way the site loads and renders. It’s highly recommended to use a web font.
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 without 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.