Working with Fonts
Each Jimdo template comes with its own default fonts, but you certainly don't need to stick with them. You can customize the font settings for your Text Elements, Heading Elements, Store Items,
Navigation Menus, and more, and choose from over 600
Google web fonts.
In this section, we'll walk through how to change the fonts on the various parts of your website, and also talk about some font basics to help you choose the right ones for your website.
Changing fonts in Style Mode
You can make small adjustments using the text editor in Text Elements, but if you want to make global
changes to the fonts throughout your website, head on over to the Style Editor by clicking on Style in your Site Admin.
Once you're in Style Mode, click on the text you'd like to change. Keep in mind that any change you make to one type of element will apply to all of those elements. In other words, you can't set different fonts for different Text Elements. This helps keep your site looking consistent.
You can change the font settings in the following parts of your website. Just click on them while you're in Style Mode:
- Text Elements
- Heading Elements (remember that you can change the settings for each type of heading—small, medium, and large)
- Store Item Elements
- Navigation Menu
- Header (the top of your website where your logo typically is)
- Sidebar text
- Button Elements
- Photo captions
- Form Elements
Choosing the right fonts for your website
Different kinds of fonts
With Jimdo’s style editor, you have the entire library of Google web fonts to choose from. Great! But what happens when
you actually scroll through that list of 650 options?
When you open up the font settings in the Style Editor, you'll see that the fonts are divided into categories:
Sans-serif: These fonts don't have small "serifs" at the end of the letters, so they tend to be the easiest to read on-screen. They are typically more modern, and are great
for Text Elements and navigation menus because of their legibility. Some good choices are Open Sans, Roboto, Lato, and
Serif: These fonts have small strokes or tails at the end of the letters called "serifs." They tend to be more traditional and classic, but can be harder to read on the
screen if the font is too small or if there is a lot of text. They are good for Heading Elements, navigation menus, and shorter blocks of text. Some serif fonts we like are
Vollkorn, Merriweather, EB Garamond, and Libre Baskerville.
- Handwriting/Fancy: These decorative fonts are meant to add some nice personality to your site. They are best used sparingly, since they are hard to read in paragraph form. Save these for Heading Elements and other small accents, but avoid using them in navigation menus and paragraph text. Some fun options are Courgette, Pacifico, Rye, and Grand Hotel...but there are lots of choices here.
How many fonts does your website need?
We usually recommend choosing 2-3 fonts:
Body/Paragraph text: You can’t fail with a sans-serif font here that’s very easy to read. Steer
clear of cursive or all-caps fonts, which are hard to read in more than a few words.
Heading Elements: Here you can use something more decorative or fun, because you’ll only use it
for short pieces of text. You could also use an all-caps font. Choosing a unique font here can help add a bit of flair to your website.
Navigation menus: You can repeat one of your first two fonts here, or choose a third complementary
font. Just remember that your navigation menus must be easy to read, so we recommend steering away from cursive or overly-stylized fonts. Like with your headings, you can use an all-caps font
For more information on the difference between serif, sans-serif, and decorative fonts (and recommendations for all of them), check out our Guide to Google Web Fonts and our Guide to Picking the Right Font Combinations.
In the sample website above, you can see how different fonts complement each other. This site uses sans serif font Raleway in all caps for the navigation menu, Raleway in sentence case for the text paragraphs, and decorative font Sacramento for the headings.
Tips for keeping your text easy-to-read
Words aside, text is yet another visual element on your website, just like your images, colors, and template. How can you make sure it looks nice and is easy for people to read on a screen?
Font: As we mentioned above, some types of fonts, like sans-serif, are designed to be easier for people to read on computer monitors and small screens.
Font Size: For body text, your font should typically be at least 16px—but this really depends on the font you choose, since some of them appear much smaller than others.
Make sure you look at your website on different-sized screens to be sure that people will be able to easily read what you wrote. Decorative fonts will usually need to be much larger in order
to be legible, for example.
Color and Contrast: Make sure that whatever font color you choose is easy to read against your website background. Light fonts on a light background can
leave your viewers squinting. The same goes for white text on a dark background—this can be a nice effect on sites that only have a little bit of text, but it can be hard to read for
more than a couple of paragraphs.
For more tips on creating legible website text, check out our blog post Your Checklist for Clear, Readable Website Text.