Font Pairing Tool
Select fonts and see them in action
CSS Code
HTML Link Tags
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">CSS Rules
/* Heading Font */
h1, h2, h3, h4, h5, h6 {
font-family: "Inter", sans-serif;
}
/* Body Font */
body, p, div, span {
font-family: "Inter", sans-serif;
}Live Preview
The quick brown fox jumps over the lazy dog
Typography is the art and technique
Font pairing made simple
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Key Features
- Easy font selection and pairing
- Real-time preview updates
- Responsive design testing
- CSS code generation
Select a Font to Explore
Inter
sans-serif 2020
Font Preview
100
Thin
The quick brown fox jumps over the lazy dog
200
Extra Light
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
800
Extra Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
100 Italic
The quick brown fox jumps over the lazy dog
200 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
800 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Inter is a typeface carefully crafted & designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.
Designer: Rasmus Andersson
Year: 2020
Category: sans-serif
License: SIL Open Font License
Where to Get
Best Used For
UI/UX DesignWeb ApplicationsReading Interfaces
Font Pairings
Recommended
Popular
Roboto
sans-serif 2011
Font Preview
100
Thin
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
100 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.
Designer: Christian Robertson
Year: 2011
Category: sans-serif
License: Apache License 2.0
Where to Get
Best Used For
Mobile AppsWeb DesignMaterial Design
Font Pairings
Recommended
Popular
Open Sans
sans-serif 2011
Font Preview
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
800
Extra Bold
The quick brown fox jumps over the lazy dog
Italic Styles
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
800 Italic
The quick brown fox jumps over the lazy dog
About
Open Sans is a humanist sans serif typeface designed for legibility across print, web, and mobile interfaces.
Designer: Steve Matteson
Year: 2011
Category: sans-serif
License: Apache License 2.0
Where to Get
Best Used For
Corporate CommunicationsWeb ContentUser Interfaces
Font Pairings
Recommended
Popular
Lato
sans-serif 2010
Font Preview
100
Thin
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
100 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic.
Designer: Łukasz Dziedzic
Year: 2010
Category: sans-serif
License: SIL Open Font License
Where to Get
Best Used For
Corporate DesignEditorial DesignWeb Typography
Font Pairings
Recommended
Popular
Montserrat
sans-serif 2011
Font Preview
100
Thin
The quick brown fox jumps over the lazy dog
200
Extra Light
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
800
Extra Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
100 Italic
The quick brown fox jumps over the lazy dog
200 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
800 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface.
Designer: Julieta Ulanovsky
Year: 2011
Category: sans-serif
License: SIL Open Font License
Where to Get
Best Used For
BrandingHeadlinesModern Web Design
Font Pairings
Recommended
Popular
Playfair Display
serif 2011
Font Preview
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
800
Extra Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
800 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Playfair Display is a transitional design with high contrast and distinctive details, perfect for titles and headlines.
Designer: Claus Eggers Sørensen
Year: 2011
Category: serif
License: SIL Open Font License
Where to Get
Best Used For
Editorial DesignLuxury BrandingFashion
Font Pairings
Recommended
Popular
Merriweather
serif 2010
Font Preview
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Merriweather is designed to be a text face that is pleasant to read on screens. It features a very large x height, slightly condensed letterforms.
Designer: Eben Sorkin
Year: 2010
Category: serif
License: SIL Open Font License
Where to Get
Best Used For
Blog PostsLong-form ReadingEditorial
Font Pairings
Recommended
Popular
Lora
serif 2011
Font Preview
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
Italic Styles
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
About
Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for body text.
Designer: Cyreal
Year: 2011
Category: serif
License: SIL Open Font License
Where to Get
Best Used For
Book DesignMagazine ArticlesProfessional Documents
Font Pairings
Recommended
Popular
Source Sans Pro
sans-serif 2012
Font Preview
200
Extra Light
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
200 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Source Sans Pro is Adobe's first open source typeface family, designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.
Designer: Paul D. Hunt
Year: 2012
Category: sans-serif
License: SIL Open Font License
Where to Get
Best Used For
Software InterfacesTechnical DocumentationWeb Applications
Font Pairings
Recommended
Popular
Poppins
sans-serif 2014
Font Preview
100
Thin
The quick brown fox jumps over the lazy dog
200
Extra Light
The quick brown fox jumps over the lazy dog
300
Light
The quick brown fox jumps over the lazy dog
Regular
Regular
The quick brown fox jumps over the lazy dog
500
Medium
The quick brown fox jumps over the lazy dog
600
Semi Bold
The quick brown fox jumps over the lazy dog
700
Bold
The quick brown fox jumps over the lazy dog
800
Extra Bold
The quick brown fox jumps over the lazy dog
900
Black
The quick brown fox jumps over the lazy dog
Italic Styles
100 Italic
The quick brown fox jumps over the lazy dog
200 Italic
The quick brown fox jumps over the lazy dog
300 Italic
The quick brown fox jumps over the lazy dog
Regular Italic
The quick brown fox jumps over the lazy dog
500 Italic
The quick brown fox jumps over the lazy dog
600 Italic
The quick brown fox jumps over the lazy dog
700 Italic
The quick brown fox jumps over the lazy dog
800 Italic
The quick brown fox jumps over the lazy dog
900 Italic
The quick brown fox jumps over the lazy dog
About
Poppins is a geometric sans serif typeface with rounded letterforms that make it friendly and approachable while maintaining excellent readability.
Designer: Indian Type Foundry, Jonny Pinhorn
Year: 2014
Category: sans-serif
License: SIL Open Font License
Where to Get
Best Used For
Modern Web DesignApp InterfacesBranding