Best Google Fonts Combination For Your Next Website Or Mobile App
UI UX Design / 19-February-2020 / minute read

Best Google Fonts Combination For Your Next Website Or Mobile App

For understanding the meaning of typography let me break down the word- Typos+Graphy= Typos ->forms and Graphy ->Writing, which means forms of writing something.

Author

For understanding the meaning of typography let me break down the word- Typos+Graphy= Typos ->forms and Graphy ->Writing, which means forms of writing something.

Content Index:


What is a Typography-Types of typefaces

Typography exists everywhere we look. Whether it's a book, website, mobile’s object or everyday life- Street sign, product packaging, etc.

In another way Simply a style or appearance of the text is called typography.

Typography is the technique and art of working with text where you design, arrange the type accordingly. It’s more than making the words more legible. 

Types of typefaces

Serif typefaces 

Ever noticed those little pointy things (the thick and thin ones) that stand out at the end of some of the strokes that form a letter? Yup! Those little buggers are called Serifs.

Sans serif typefaces

On the other hand, are typefaces without the Serifs?

Script typefaces

Script typefaces imitate handwriting or calligraphy. They typically used for logos or invitations.

Ornamental typefaces

Ornamental (also known as a novelty or sometimes display) typefaces are used exclusively for decorative purposes and are not suitable for body text. They have the most distinctive designs of all fonts, and may even incorporate pictures of objects, animals, etc. into the character designs. They usually have very specific characteristics (e.g., evoking the Wild West, Christmas, horror films, etc.)

Monospaced typefaces

A monospaced font also called a fixed-pitch or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

Symbol typefaces

Typefaces consist of symbols (such as decorative bullets, clock faces, railroad timetable symbols, CD-index ) rather than normal text characters


Why Good Typography = Good UX?

In a study by MIT psychologist, Kevin Larson he tested how the type choice, layout, and line spacing could affect the emotions of readers. He split them into groups and had them read the same document but with different designs. 

good and bad typography design

Also, check-  Common Typography Mistakes That Designers Should Avoid

Here is a few typography tips:

1. Limit your typefaces. (max 3)

  • 1 Type for headings
  • 1 Type for body
  • 1 Type for CTAs (buttons)

2. Consider applying an F-pattern

think360

3. consider always Z-pattern for page design.

think360

4. Respect the reading line length

think360

5. Use Vertical Rhythm and avoid “gray pages” - Learn More

Grids are not only helpful on the horizontal axis, but
also on the vertical axis.

6. Don’t confuse your reader

think360

Must read - 8 Rules for Perfect Typography in UI


Google Font Combinations-

1. Mostly Used Combination

Lora & Merriweather

think360

Heading: Lora

Body: Merriweather

Proza Libre & Open Sans 

think360

Heading: Proza Libre

Body: Open Sans

Libre Baskerville & Source Sans Pro 

think360

Heading: Libre Baskerville

Body: Source Sans Pro

Rubik & Karla

think360

Heading: Rubik

Body: Karla


Asap & Asap

think360

Heading: Asap

Body: Asap


Work Sans & Work Sans 

think360

Heading: Work Sans

Body: Work Sans


Used on Red Elegant

Domine & Roboto

think360

Heading: Domine

Body: Roboto

Fira Sans & Merriweather 

think360

Heading: Fira Sans

Body: Merriweather

Karla & Karla

think360 studio

Heading: Karla

Body: Karla

Nunito & Nunito

think360 studio

Heading: Nunito

Body: Nunito

Space Mono & Space Mono 

think360 studio

Heading: Space Mono

Body: Space Mono


Poppins & PT Serif 

think360 studio

Heading: Poppins

Body: PT Serif

Muli & Muli

think360 studio

Heading: Muli

Body: Muli

BioRhyme & Space Mono 

think360 studio

Heading: BioRhyme

Body: Space Mono

Saira & Saira

think360 studio

Heading: Saira

Body: Saira

IBM Plex Sans & IBM Plex Serif 

think360 studio

Heading: IBM Plex Sans

Body: IBM Flex Serif

2. Sans-Serif/Serif

Alegreya Sans & Alegreya 

think360 studio

Heading: Alegreya Sans

Body: Alegreya

Archivo Narrow & Merriweather 

think360 studio

Heading: Archivo Narrow

Body: Merriweather

Cabin & Old Standard TT 

think360 studio

Heading: Cabin

Body: Old Standard TT


Fjalla One & Average 

think360 studio

Heading: Fjalla One

Body: Average

Istok Web & Lora

think360 studio

Heading: Istok Web

Body: Lora

Lato & Merriweather 

think360 studio

Heading: Lato

Body: Merriweather

Libre Franklin & Libre Baskerville 

think360 studio

Heading: Libre Franklin

Body: Libre Baskerville

Merriweather Sans & Merriweather 

think360 studio

Heading: Merriweather Sans

Body: Merriweather

Montserrat & Cardo  

think360 studio

Heading: Montserrat

Body: Cardo

Montserrat & Crimson Text 

think360 studio

Heading: Montserrat

Body: Crimson Text

Montserrat & Domine 

think360 studio

Heading: Montserrat

Body: Domine

Montserrat & Neuton 

think360 studio

Heading: Montserrat

Body: Neuton

Nunito & Alegreya 

think360 studio

Heading: Nunito

Body: Alegreya

Nunito & Lora

think360 studio

Heading: Nunito

Body: Lora

Open Sans & Gentium Book Basic 

think360 studio

Heading: Open Sans

Body: Gentium Book Basic

Open Sans & Libre Baskerville 

think360 studio

Heading: Open Sans

Body: Libre Baskerville

Open Sans & Lora 

think360 studio

Heading: Open Sans

Body: Lora

Oswald & Merriweather 

think360 studio

Heading: Oswald

Body: Merriweather

Oswald & Old Standard TT 

think360 studio

Heading: Oswald

Body: Old Standard TT

Oswald & Quattrocento 

think360 studio

Heading: Oswald

Body: Quattrocento

PT Sans & PT Serif 

think360 studio

Heading: PT Sans

Body: PT Serif

Quicksand & EB Garamond 

think360 studio

Heading: Quicksand

Body: EB Garamond

Raleway & Merriweather 

think360 studio

Heading: Raleway

Body: Merriweather

Source Sans Pro & Source Serif Pro 

think360 studio

Heading: Source Sans Pro

Body: Source Serif Pro

Ubuntu & Lora

think360 studio

Heading: Ubuntu

Body: Lora

Work Sans & Taviraj 

think360 studio

Heading: Work Sans

Body: Taviraj

3. Serif/Sans-Serif

BioRhyme & Cabin 

think360 studio

Heading: BioRhyme

Body: Cabin

Cormorant Garamond & Proza Libre 

think360 studio

Heading: Cormorant Garamond

Body: Proza Libre

Alegreya & Open Sans 

think360 studio

Heading: Alegreya

Body: Open Sans

Alegreya & Source Sans Pro 

think360 studio

Heading: Alegreya

Body: Source Sans Pro

Bitter & Raleway

think360 studio

Heading: Bitter

Body: Raleway

Bree Serif & Open Sans 

think360 studio

Heading: Bree Serif

Body: Open Sans

Cantata One & Imprima 

think360 studio

Heading: Cantata One

Body: Imprima

Cardo & Josefin Sans 

think360 studio

Heading: Cardo

Body: Josefin Sans

Crete Round & AbeeZee 

think360 studio

Heading: Crete Round

Body: AbeeZee

Josefin Slab & Josefin Sans

think360 studio

Heading: Josefin Slab

Body: Josefin Sans

Kreon & Ubuntu 

think360 studio

Heading: Kreon

Body: Ubuntu

Libre Baskerville & Montserrat 

think360 studio

Heading: Libre Baskerville

Body: Montserrat

Libre Baskerville & Open Sans 

think360 studio

Heading: Libre Baskerville

Body: Open Sans

Lora & Source Sans Pro 

think360 studio

Heading: Lora

Body: Source Sans Pro

Lustria & Lato

think360 studio

Heading: Lustria

Body: Lato

Merriweather & Open Sans 

think360 studio

Heading: Merriweather

Body: Open Sans

Merriweather & Source Sans Pro 

think360 studio

Heading: Merriweather

Body: Source Sans Pro

Old Standard TT & Questrial  

think360 studio

Heading: Old Standard TT

Body: Questrial

Ovo & Muli

think360 studio

Heading: Ovo

Body: Muli

Playfair Display & Open Sans 

think360 studio

Heading: Playfair Display

Body: Open Sans

PT Serif & Open Sans 

think360 studio

Heading: PT Serif

Body: Open Sans

Quattrocento & Quattrocento Sans 

think360 studio

Heading: Quattrocento

Body: Quattrocento Sans

Roboto Slab & Open Sans 

think360 studio

Heading: Roboto Slab

Body: Open Sans

Roboto Slab & Roboto 

think360 studio

Heading: Roboto Slab

Body: Roboto

Rokkitt & Roboto 

think360 studio

Heading: Rokkitt

Body: Roboto

Rokkitt & Ubuntu 

think360 studio

Heading: Rokkitt

Body: Ubuntu

Rufina & Sintony

think360 studio

Heading: Rufina

Body: Sintony

Trirong & Rubik

think360 studio

Heading: Trirong

Body: Rubik

Spectral & Source Sans Pro

think360 studio

Heading: Spectral

Body: Source Sans Pro

Vollkorn & Exo 

think360 studio

Heading: Vollkorn

Body: Exo

4. Sans-Serif/Sans-Serif

Abel & Ubuntu

think360 studio

Heading: Abel

Body: Ubuntu

Amaranth & Titillium Web 

think360 studio

Heading: Amaranth

Body: Titillium Web

Didact Gothic & Arimo 

think360 studio

Heading: Didact Gothic

Body: Arimo

Dosis & Open Sans

think360 studio

Heading: Dosis

Body: Open Sans

Droid Sans & Cabin

think360 studio

Heading: Droid Sans

Body: Cabin

Fira Sans & Montserrat

think360 studio

Heading: Fira Sans

Body: Montserrat

Fjalla One & Cantarell

think360 studio

Heading: Fjalla One

Body: Cantarell

Francois One & Didact Gothic 

think360 studio

Heading: Francois One

Body: Didact Gothic

Francois One & Lato

think360 studio

Heading: Francois One

Body: Lato

Francois One & Open Sans

think360 studio

Heading: Francois One

Body: Open Sans

Hind & Open Sans

think360 studio

Heading: Hind

Body: Open Sans

Karla & Montserrat

think360 studio

Heading: Karla

Body: Montserrat

Karla & Lato 

think360 studio

Heading: Karla

Body: Lato

Montserrat & Hind

think360 studio

Heading: Montserrat

Body: Hind

Montserrat & Istok Web 

think360 studio

Heading: Montserrat

Body: Istok Web

Nunito Sans & Nunito

think360 studio

Heading: Nunito Sans

Body: Nunito

Nunito & Open Sans

think360 studio

Heading: Nunito

Body: Open Sans

Open Sans & Nunito

think360 studio

Heading: Open Sans

Body: Nunito

Open Sans & Oswald

think360 studio

Heading: Open Sans

Body: Oswald

Oswald & Droid Sans

think360 studio 

Heading: Oswald

Body: Droid Sans

Oswald & Open Sans

think360 studio

Heading: Oswald

Body: Open Sans

Oxygen & Source Sans Pro

think360 studio

Heading: Oxygen

Body: Source Sans Pro

Philosopher & Muli 

think360 studio

Heading: Philosopher

Body: Muli

Poppins & Open Sans

think360 studio

Heading: Poppins

Body: Open Sans

PT Sans & Cabin

think360 studio

Heading: PT Sans

Body: Cabin

PT Sans & Didact Gothic

think360 studio

Heading: PT Sans

Body: Didact Gothic

Raleway & Cabin

think360 studio

Heading: Raleway

Body: Cabin

Raleway & Roboto

think360 studio

Heading: Raleway

Body: Roboto

Roboto & Nunito 

think360 studio

Heading: Roboto

Body: Nunito

Signika & Open Sans

think360 studio

Heading: Signika

Body: Open Sans

UBUNTU & Cabin

think360 studio

Heading: Ubuntu

Body: Cabin

Ubuntu & Didact Gothic

think360 studio

Heading: Ubuntu

Body: Didact Gothic

Ubuntu & Hind

think360 studio

Heading: Ubuntu

Body: Hind

Ubuntu & Source Sans Pro

think360 studio

Heading: Ubuntu

Body: Source Sans Pro

Walter Turncoat & Kreon

think360 studio

Heading: Walter Turncoat

Body: Kreon

Yeseva One & Crimson Text

think360 studio

Heading: Yeseva One

Body: Crimson Text


5. Display/Sans-Serif

Abril Fatface & Droid Sans

think360 studio

Heading: Abril Fatface

Body: Droid Sans

Abril Fatface & Josefin Sans

think360 studio

Heading: Abril Fatface

Body: Josefin Sans

Abril Fatface & Lato

think360 studio

Heading: Abril Fatface

Body: Lato

Amatic SC & Andika

think360 studio

Heading: Amatic Script

Body: Andika

Amatic SC & Josefin Sans

think360 studio

Heading: Amatic Script

Body: Josefin Sans

Bevan & Pontano Sans

think360 studio

Heading: Bevan

Body: Pontano Sans

Flamenco & Asap

think360 studio

Heading: Flamenco

Body: Asap

Lobster & Arimo

think360 studio

Heading: Lobster

Body: Arimo

Lobster & Cabin

think360 studio

Heading: Lobster

Body: Cabin

Medula One & Lato

think360 studio

Heading: Medula One

Body: Lato

Pacifico & Arimo

think360 studio

Heading: Pacifico

Body: Arimo

Patua One & Oswald

think360 studio

Heading: Patua One

Body: Oswald

Rancho & Gudea

think360 studio

Heading: Rancho

Body: Gudea

Shadows & Roboto

think360 studio

Heading: Shadows

Body: Roboto

Squada One & Allerta

think360 studio

Heading: Squada One

Body: Allerta

Stint Ultra & Pontano Sans

think360 studio

Heading: Stint Ultra Expanded

Body: Pontano Sans

Yeseva One & Josefin Sans

think360 studio

Heading: Yeseva One

Body: Josefin Sans

6. Display/Serif

Alfaslab One & Gentium Book

think360 studio

Heading: Alfaslab One

Body: Gentium Book Basic

Clicker Script & EB Garamond

think360 studiothink360 studio

Heading: Clicker Script

Body: EB Garamond

Dancing Script & Ledger

think360 studiothink360 studio

Heading: Dancing Script

Body: Ledger

Dancing Script & EB Garamond

think360 studiothink360 studio

Heading: Dancing Script

Body: EB Garamond

Nixie One & Ledger

think360 studiothink360 studio

Heading: Nixie One

Body: Ledger

Patua One & Lora

think360 studiothink360 studio

Heading: Patua One

Body: Lora

Nixie One & Libre Baskerville

think360 studiothink360 studio

Heading: Nixie One

Body: Libre Baskerville

Sacramento & Alice

think360 studiothink360 studio

Heading: Sacramento

Body: Alice

Sansita One & Kameron

think360 studiothink360 studio

Heading: Sansita One

Body: Kameron

Unica One & Vollkorn

 think360 studiothink360 studio

Heading: Unica One

Body: Vollkorn

7. Serif/Serif

Bree Serif & Lora

think360 studio

Heading: Bree Serif

Body: Lora

Eczar & Gentium Basic

think360 studio

Heading: Eczar

Body: Gentium Basic

Playfair Display & Alice

think360 studio

Heading: Playfair Display

Body: Alice

Playfair Display & Fauna One

think360 studio

Heading: Playfair Display

Body: Fauna One

Quando & Judson

think360 studio

Heading: Quando

Body: Judson

Quattrocento & Fanwood Text

think360 studio

Heading: Quattrocento

Body: Fanwood Text

Ultra & Slabo 13px

think360 studio

Heading: Ultra

Body: Slabo 13px

8. Sans-Serif/Monospace

Poppins & Anonymous Pro

think360 studio

Heading: Poppins

Body: Anonymous Pro

Karla & Inconsolata

think360 studio

Heading: Karla

Body: Inconsolata

9. Monospace/Sans-Serif

Inconsolata & Montserrat

think360 studio

Heading: Inconsolata

Body: Montserrat

Space Mono & Work Sans

think360 studio

Heading: Space Mono

Body: Work Sans


Space Mono & Roboto

think360 studio

Heading: Space Mono

Body: Roboto

Typography Tools 

WhatTheFont

Type Scale

Font Data

Identifont

Matcherato

Typetester

Type Zebra

State of Web Type

Canva Font Combinations

Typespiration

Prototypo

Wordmark It

Type Connection

TypeWonder

Font Pair

Fontjoy

FontReach


Best Typography Books 

Designing with Type

Thinking with Type

On Web Typography

The Anatomy of Type: A Graphic Guide to 100 Typefaces

The Elements of Typographic Style


Typography inspirations 

Typewolf

Fonts in Use

Friends of Type

The Book Cover Archive

100 Days of Fonts

Beautiful Web Type

The Pyte Foundry

Google Type

Grain Edit

The Dieline

Typio

The Type Collective

Type Only

TYPOGRAPHY PLUGINS 

Type Sample

Palette Lab

Measure

Post views: 17677
User image