Inter · UI
The night we noticed
Playfair Display · headline
A site has three jobs: the title, the interface, the paragraph. One family can cover two of them.
Lora · reading
How to pick fonts for a website
A site has three jobs: the title, the interface, the paragraph. Ranked lists skip that.
“Best fonts for a website” is what people type when they need to ship something this afternoon. A ranked list of sans serifs will not help. A site has three jobs: the title, the interface, the paragraph. One family can cover two of them. Rarely all three.
If you already know the job, skip the essay. Headlines, UI type, and Reading are live hubs. Each one can open Font Swiper with that job already selected.
Three jobs, not ten winners
Headlines
The night we noticed
Display serifs, condensed sans, a heavy weight of a text family. Try them at the size they will actually be.
UI
ContinueNotificationsSign inA grotesque or humanist sans with a real weight range. If the buttons look like the article, you picked a reading face for chrome.
Reading
Typography is the craft of endowing human language with a durable visual form.
A serif with italics, or a humanist sans at a comfortable size. Body text is where top-ten lists cheat: they show a word at 48px.
The night we noticed
Typography is the craft of endowing human language with a durable visual form. The nav stays Inter. The title can be loud. The paragraph has to last.
ContinueDecide without a moodboard
Font Swiper is built for this: pick the job, three this-or-that rounds, then keep or pass. Ten decisions beat scrolling 1,900 cards. Keeps land on a shortlist. They do not auto-favorite.
If you already have a face you like, do not start over. Open Similar from that family, or compare two columns in Compare. The catalog at sans serif and serif is popularity-ranked, which is useful as a map and useless as taste.
When you have a face, put it on the site
Every public font page has a Use this font block. Copy the HTML link. It already includes display=swap, so text is not invisible while the file loads, and it only asks Google for weights that family actually ships. Requesting a missing 700 can 400 the whole stylesheet. That is why the snippet is generated from the catalog, not typed by hand.
Prefer a <link> in the head over @import in CSS. Import can block rendering. If you want the files on your own host, download the zip from the same block, or run the Fontsource command it prints. Google Fonts are SIL Open Font License (or Apache 2.0 on a few). Check before you ship.
Pairing a heading and a body? Copy one combined link from the pairing tool, not two separate tags you hope will match.