Assign a role before choosing a second font
Start with the reading task: a title should establish the subject, while a paragraph should carry a longer explanation. TypeTogether’s educational guidance considers the role, proportions and intended reading context when choosing a typeface. In this tool, assign one family to each role and compare the complete passage. Two families are optional; a single family with a clear hierarchy can also serve a project.
Compare the same words at the same width
Use your actual heading and a realistic paragraph, including punctuation and any names your project needs. Select a starting pair, then change one family at a time. Switching the width changes the available line length without rewriting the sample. Notice whether the heading wraps awkwardly or the paragraph creates an uncomfortable rhythm. The narrow and wide options are maximum widths, so a small screen can reduce either preview.
Adjust size and leading deliberately
The heading size and body size are independent. Begin with the defaults, then change a single value and read the whole passage again. Body line height is a multiplier of its selected size: 1.6 at 18 CSS pixels produces a 28.8-pixel line box before other layout factors. A larger nominal size does not guarantee equal apparent letter height across families. Compare the actual forms rather than treating a shared number as visual equality.
Keep the family names with the implementation
The summary identifies each real family and its regular 400 style. Copy it only after both selected fonts have loaded. When you use that CSS in your own project, include the appropriate font resources and retain a fallback stack. The tool does not bundle font files in the copied text. Explore each linked family profile for its design background and source license, then use a complete page sample to review links, lists, captions and any other text roles.
Your questions, answered.
Does the generator score which pair is best?
No. Starting pairs are editorial examples. Choose by the text, audience and layout rather than treating a preset as an objective compatibility ranking.
Can I copy these fonts into Word or a social caption?
The summary describes website CSS and real family names. A receiving application needs its own access to the typeface and formatting controls; pasting the words alone does not install or apply those fonts.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.