Playfair Display

12 styles · Variable
Google Fonts ↗

A high-contrast transitional serif for headlines, in the spirit of late eighteenth-century type.

Designer
Claus Eggers Sørensen
Styles
12 (variable)
Weights
400–900
Format
woff2
File size
38 KB (playfair-display-latin-wght-normal.woff2)
Licence
SIL Open Font License 1.1
Source
Google Fonts
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 &!?

Usage

Add the stylesheet to your page, then use the family in your CSS.

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://cdn.msar.me">
<link rel="stylesheet" href="https://cdn.msar.me/fonts/playfair-display/font.css">
/* CSS */
:root { font-family: 'Playfair Display Variable', serif; }

Prefer CSS? @import url('https://cdn.msar.me/fonts/playfair-display/font.css'); does the same thing.

Click the text to type your own

Letterforms that carry the story

Styles

Regular400

Morning by the river

Medium500

Quiet letterforms

SemiBold600

Stories for a grey day

Bold700

Light inside the words

ExtraBold800

The smell of old books

Black900

A city after rain

Regular Italic400

Set letter by letter

Medium Italic500

Travellers on a long road

SemiBold Italic600

Paper boats afloat

Bold Italic700

First star of the evening

ExtraBold Italic800

Morning by the river

Black Italic900

Quiet letterforms

Sample text

Type on a screen has one job before any other: to get out of the reader’s way. A good headline face earns attention in a few words, then hands the reader on to the text without a jolt. Weight, contrast and spacing do that work quietly, long before anyone notices the shapes themselves.

Serving a font well matters as much as drawing it well. A small file, a long cache lifetime and a stylesheet that swaps in without hiding the text are the difference between a page that reads at once and one that makes people wait.

Glyphs 225 characters

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬­®¯°±²³´·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖרÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĂıŒœʻʼˆ˚˜̣̀́̃̄̈̉–—‘’‚“”„•…′″‹›⁄€™↑↓−￿