Type pairings
Kinetic's skill sets each piece in the type whose voice fits it: Work Sans, its default, or one of fourteen other curated pairings. Each pairing is a display face for titles and a body face for the rest, chosen to look good together at video sizes, all from Google Fonts.
You can let the assistant pick the type, or choose your own. To let it pick, describe the voice you want, or say nothing, and it chooses from this list; name a pairing in your prompt to have that one. To use your own fonts, name them in your prompt. They need to be free to use, from a place like Google Fonts, or installed on the device that plays and renders the video.
Each pairing on a card
Each card sets one pairing on a ground from the default palette, at the sizes a video uses, in proportion.
The pairings
The weights are the ones each face reads best at, at video sizes. A face with a single weight is set at that weight.
| Display + body | Its voice | Display weight | Body weight |
|---|---|---|---|
| Work Sans, for both | calm and printed: the default | 800 to 900 | 500 to 600 |
| Urbanist + Literata | modern and friendly over a bookish serif: education, editorial | 800 | 400 to 500 |
| Oswald + Lora | condensed and loud over a warm serif: news, sport, a poster | 600 to 700, in capitals | 400 to 500 |
| Playfair Display + Source Sans 3 | high-contrast serif over a clean sans: culture, events, luxury | 700 to 900, at 64 px and up at 1920 | 400 to 600 |
| DM Serif Display + DM Sans | refined and warm: a product, a brand, a quote | 400, its only weight | 400 to 500 |
| Space Grotesk + IBM Plex Sans | technical and exact: software, engineering, data | 600 to 700 | 400 to 500 |
| Barlow Condensed + Barlow | narrow and sturdy, many labels to a frame: dashboards, transit, sport | 700 to 800 | 400 to 500 |
| Mona Sans, wide + Manrope | wide and bold over a precise geometric sans: launches, music, events | 700 to 800, at a width of 112% to 125% | 400 to 500 |
| Sora + Inter | clean geometric with a little quirk: tech, digital products | 600 to 700 | 400 |
| Fraunces + Chivo | soft-vintage serif over a sturdy grotesque: artisanal brands, lifestyle, editorial | 600 to 700 | 400 |
| Abril Fatface + Lato | a fat titling serif over a warm sans: magazines, beauty, agencies | 400, its only weight | 400 |
| Bebas Neue + Montserrat | cinematic capitals over a geometric sans: film titles, fitness, posters | 400, its only weight, in capitals | 400 to 500 |
| Archivo, wide + Archivo | heavy and wide over its own text width: breaking news, sales, announcements | 800 to 900, at a width of 112% to 125% | 400, at 100% |
| Fredoka + Nunito | rounded and friendly: children, explainers, playful products | 600 | 400 to 600 |
| Cormorant Garamond + Proza Libre | elegant, high-contrast serif over a humanist sans: fine dining, literature, luxury | 600 to 700, at 64 px and up at 1920 | 400 |
Loading a pairing
Both faces load in one link, with display=block, so a render never draws the fallback while the font arrives.
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&family=Literata:wght@200..900&display=block" rel="stylesheet">A face with a weight axis takes a range, wght@100..900.
A face with fixed weights lists the ones the page uses, such as Barlow:wght@400;500, and a face with one weight takes none, such as family=Bebas+Neue.
Archivo and Mona Sans also load their width axes, Archivo:wdth,wght@62..125,100..900 and Mona+Sans:wdth,wght@75..125,200..900, and their display lines set the width with font-stretch.
A figure that counts keeps its width with font-variant-numeric: lining-nums tabular-nums.
Playfair Display and some other serifs draw old-style figures by default, which dip below the line, and lining-nums sets them on it.
A size measured with textMetrics() names the display face and its weight, such as '700 100px "Oswald"', and readiness loads it before the first frame (textMetrics()).