What does this tool do, when should I use it?
This tool is for people who want to visualize different font choices. It will not provide any feedback. It is only for visualizing. If you want a tool that generates colors and fonts for you starting with your brand colors & fonts, then use the Full Color & Font Builder.
Video instructions coming soon for using the Quick Fonts tool.
This tool is designed to quickly set up your website fonts.
Please note that in the Example content some text is styled with an underline to look like a link. These are not actual links, they are styled so you can see what they would look like on a website.
Instructions
- Enter your fonts under the "Font Choices" section.
- Click the "Update Font Example & CSS Variables" button.
- Review the "Font Example" section to see how your fonts look.
- If you are happy with your fonts, go to the "CSS Variables" section and copy your font settings so you can save them.
- If you would like to modify your fonts, go back to step 1 and update your fonts in the "Font Choices" section. After any update to your fonts, you need to click "Update Font Example & CSS Variables" button to see results in the "Font Example" section.
Font Choices
Enter your font choices and then click on "Update Font Example & CSS Variables". H5 & H6 are intentionally left off the font choices as these are so rarely used in practice.
Defaults are provided for all choices. It is recommended to just use 1-2 fonts for your site, so if you are only using 1 or 2 fonts, set the remaining fonts to the same as the heading font.
A small amount of font spacing can improve readability of fonts. Font spacing defaults have been set for you, you can modify these as different fonts may be easier to read with different spacings.
Font Example
Below is a sample of your selections. The sentences are primarily pangrams (sentences which use every letter), so if they seem silly, that's why!
Disclaimer: In the below text, text is styled as links without being links. This is for display purposes only.
Heading 1
The quick brown fox jumps over a lazy dog. My girl wove six dozen plaid jackets before she quit. Brown jars prevented the mixture from freezing too quickly. How vexingly quick daft zebras jump!
Heading 2
The quick brown fox jumps over a lazy dog. My girl wove six dozen plaid jackets before she quit. Brown jars prevented the mixture from freezing too quickly. How vexingly quick daft zebras jump!
Heading 3
Watch “Jeopardy!”, Alex Trebek’s fun TV quiz game. We promptly judged antique ivory buckles for the next prize. The five boxing wizards jump quickly. Farmer jack realized that big yellow quilts were expensive.
Heading 4
Due to how rarely used heading levels 5 and 6 are, we set them to the same value as heading level 4.
Heading 5
Heading 6
Example heading text, make sure this is legible. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Check the following commonly confused letters to make sure they are unambiguous: TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S.
Check for letter spacing on illi combos: willing, billing, drilling
Body text
Example body text, make sure this is legible. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Check the following commonly confused letters to make sure they are unambiguous: TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S.
Check for letter spacing on illi combos: willing, billing, drilling
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Example body text with italics, make sure this is legible. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Check the following commonly confused letters to make sure they are unambiguous: TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S.
Check for letter spacing on illi combos: willing, billing, drilling.
Example body text with bold, make sure this is legible. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Check the following commonly confused letters to make sure they are unambiguous: TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S.
Check for letter spacing on illi combos: willing, billing, drilling.
This is an example of small text. In general, small text should be limited, but some designs do warrant it.
This is an example of large text. This is commonly used to calls to action and hero areas to highlight some text. It is coded with a normal paragraph element and a CSS class, typically called "large-text" or something similar.
Accent Font
This is an example of your selected Accent text font.
This is a paragraph in your accent text font. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Check the following commonly confused letters to make sure they are unambiguous: TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S.
Check for letter spacing on illi combos: willing, billing, drilling.
Links
Link in heading example
Link in paragraph example. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
Unordered list
- List item for unordered list
- List item for unordered list
- List item for unordered list
Unordered list
- List item for ordered list
- List item for ordered list
- List item for ordered list
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rutrum imperdiet dignissim. Ut sagittis magna quis massa ultricies, id aliquam magna commodo. Phasellus non tempus justo. Sed ultricies dapibus justo, quis imperdiet nunc. Nam rhoncus elit vitae ipsum luctus, in volutpat orci pharetra.
Quote Author Name
Buttons
Table
| sample only | sample only | sample only |
|---|---|---|
| item | item | item |
| item | item | item |
CSS Variables
For ease of development, below are the CSS variables corresponding to your font selections. Font sizes are provided in both REM and PX units. REM units are preferred for accessibility, but some website systems do not allow for REM font sizes, so PX are provided as a backup.
--heading-font: ;
--body-font: ;
--accent-font: ;
--heading-1-size: ;
--heading-2-size: ;
--heading-3-size: ;
--heading-4-size: ;
--heading-5-size: ;
--heading-6-size: ;
--body-size: ;
--accent-size: ;
--heading-1-size: ;
--heading-2-size: ;
--heading-3-size: ;
--heading-4-size: ;
--heading-5-size: ;
--heading-6-size: ;
--body-size: ;
--accent-size: ;
--heading-font-weight: ;
--body-font-weight: ;
--accent-font-weight: ;
--heading-font-spacing: ;
--body-font-spacing: ;
--accent-font-spacing: ;
--background-color: ;
--heading-color: ;
--body-color: ;
--accent-color: ;