h1, h2, h3 font-family: 'Anton', sans-serif; letter-spacing: 1px;
| Pairing Type | Good choices (Google Fonts) | |--------------|------------------------------| | Sans-serif body | Open Sans, Lato, Roboto, Montserrat | | Serif body | Merriweather, Playfair Display, Source Serif Pro | | Monospace accent | Source Code Pro, Roboto Mono |
body font-family: 'Anton', sans-serif;
p font-family: 'Open Sans', sans-serif; line-height: 1.5;
@font-face font-family: 'Anton'; src: url('/fonts/Anton-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; anton font
| Do | Don't | |----|-------| | Use large sizes (≥36px for headlines) | Use below 18px for body text | | Increase letter-spacing slightly | Set long all-caps sentences | | Combine with a neutral body font | Use on low-resolution screens | | Apply to short impactful messages | Force lowercase usage |
.anton-headline font-family: 'Anton', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; /* ensures consistency */ h3 font-family: 'Anton'
If Anton isn't available or you need variations: