Design: Fonts

If you want your website to look modern and professional, you should make sure that you use a consistent typeface on all pages and use the same colors for the same elements and fonts.

With page4 this is very easy. The headlines and the body text are stored directly in the design and all formatting is specified there.

If you use a content element heading, you can choose one of 4 styles (H1 to H4) and the appearance of the heading is controlled by the design fonts, where you can specify for each of these 4 formats how the font should look like.

If you create a content element Text and just write text there, the appearance of this text is also controlled by the design. You will find an area body text and you can define there how this body text should look like.

If you select text in the body text and link this text, the appearance of this link is also determined by the design. You have 2 areas in the design fonts, one for the link as such and one for the appearance that the link should have when a user moves the mouse over this link (hover).

So as long as you only use the Heading content element for headings and write all the text of your web page with the Text content element without any further formatting, you can be sure that your web page will look consistent and thus fulfill an important requirement to look professional.

Important: If you change the font formatting of the design fonts, for example by changing the formatting for the body text and selecting a different font family and font color there, then after saving all body text on the entire web page will automatically be displayed with the new settings, i.e. in a different font and font color. Formatting that you have made in the respective content element text, for example, individual words in bold or italics, will remain. Therefore, even if the text editor offers the possibility, you should use individual formatting only sparingly. Read more about this in the article on the content element Text.

If you change the design, all settings you made in the design font will be discarded and replaced by the settings in the new design. If you have been using a theme with a white background and black font and you change to a theme with a black background and white font, you will understand why it makes sense for the theme to provide the font information. You can always customize the design fonts with very little effort.

Make sure that the design of the headings is done in such a way that the H1 format - i.e. Heading 1 gets the largest font and generates extra attention. H2 should be slightly smaller and clearly different from H1. H3 should be a bit smaller still and well distinguished from H2, and H4 should be the smallest, but still larger than the body text. Choose a reasonable font that matches the body text. Often it looks very good if all headings use the same font family and possibly differ in color in addition to font size. The font family for the headings should go well with the body text. You can find information that helps to get listed better on Google in the article "Headings".

The most important thing is that your visitors can easily read the texts on your website. Make sure that the font is not too small for the text, the text color stands out well against the background and the spacing between the lines is large enough. Do not use too many font families and make sure that the fonts fit together harmoniously.

 

A professionally designed website uses a consistent typeface. This means that the basic text consists of one font, font size and font color. The headlines have a uniform typeface depending on the weighting (H1 to H4) and the linking is designed the same everywhere.
So that you do not have to make the same format specifications for every text in the text editor, the fonts are controlled centrally by the design. All formatting is stored there.
Important: You are not allowed to overwrite these formattings manually in the text editor. So if you insert text just create a new text section and write your text without manually setting the font or font size. Then the text will be displayed as it is stored in the design.

Advantages of a central font design.
1) The typeface is consistent on all pages and your website becomes more professional.
2) If you change the design and your typeface should be changed as well, then you only need to adjust the formatting in one place and all texts will be displayed anew on the entire website.
3) You don't have to worry about the layout when writing, the design takes care of that.

 

 

For the design fonts, you can use Google fonts. When a visitor views your site and you have used a font family provided by Google, the font information is provided by Google. This ensures that your visitor sees your site with the fonts you have chosen.
If you don't use a Google font, then your visitor must have the exact font you use installed on their computer. Otherwise, his browser will not be able to display this font and will use a substitute font instead. Of course, this will change the layout you want, and since fonts have different widths, this may result in completely different text wrapping.
Google Fonts are therefore a very good way to make sure that every visitor sees your page exactly as you see it on your computer.

 

Important: Fonts in the selection dialog marked with (St) are not Google Fonts. 
Good to know: We do use Google Fonts, but all fonts are stored on our servers. If you use Google Fonts, no data will be forwarded to Google.

 

You can find this section by either going to the "Set Design Font Templates" menu in the main "Design" menu, or by going to the "Edit Design" menu in the main "Design" menu and then clicking on the "Fonts" menu item there.

 

The fonts section is structured in such a way that you will find a list of all formats on the left. If you click on a format, you will see on the right which parameters you can adjust.
Currently there are the formats
Heading 1 = H1 in the content element Heading
Heading 2 = H2 in the content element Heading
Heading 3 = H3 in the Heading content element
Heading 4 = H4 in the Heading content element
Body text = text that you write with the Text content element without applying any formatting. Note text, such as in empty content elements, is displayed in the same formatting. Likewise, if you use the "p" tag in a content element HTML.

Body text alternative = This allows you to format texts centrally, such as quotes.
Link = A link that is created in the body text. Some of the formatting is taken from the body text. Therefore, less formatting is stored here.
Link:Hover = A link that is created in the body text. Part of the formatting is taken from the body text. So there is less formatting here, too. Here you define how the link should be displayed when a visitor moves the mouse over the link.

 

The selected font is displayed here. If you click on the "A" at the end of the input field, a dialog opens with all available Google Fonts. You can search for a font directly by typing the first letters. For example, if you type A, all fonts that start with A will be displayed. If you then type an r, i.e. Ar, only the fonts beginning with Ar will be shown. So you can find your font very fast. A click on the desired font and the dialog closes and the font is applied.
The dialog will be extended soon and as soon as this is done, you will find more detailed information here.

 

With this you set the font color.

 

Size: Here you can specify the font size in pixels. From 6 px to 150 px. With the trash can you can delete the specification. Three dashes will appear in the field. In this case, the font size that your visitor has set in his browser will always be used. Of course, you give the control out of your hand, because you don't know which default sizes are set in your visitor's browser. This "automatic font size" only makes sense for body text, because it allows the visitor to view your website in a very large font. This is useful in case of e.g. a visual impairment.
You can display all formats (headlines and body text) in any allowed size. But of course you should use font sizes of 30 px or more only for headlines. It is also good to consider the value of the headings. Heading 1 should be displayed largest, heading 2 smaller and heading 4 smallest.

Size mobile: This allows you to adjust the size of, for example, the headings for mobile views. Very often the font sizes used for the computer are not suitable for the mobile view. With this option you can intervene manually. You can then use the preview to check how it will be displayed on a mobile device.

 

You can set it to Normal or Bold. Depending on the font, the effect is more or less visible. This is due to the fact that for Google each font weight represents a font of its own and unfortunately you can't load thousands of font weights for speed reasons. Active is always the option with blue background.

Note: If a Google font has only one weight, the browser tries to make the font fatter, but it doesn't look very good.

 

Basically, this is how you turn italics on or off. Normal would be switched off and italic would be switched on. Again, the effect varies depending on the font family.

 

As with Italic, an option to turn the Underline style off (Normal) or on (Underline). This effect does not come from the font itself and therefore has an effect on every font.

 

Sets the spacing between the letters. You can enter a value from 1 px to 5 px. The larger the spacing, the further apart the letters are. Use the trash can to delete these values and set the letter spacing to 0 px. If you don't want any special effects, you should not set a value here, which you can achieve by using the recycle bin and which will then display three strokes instead of one value.

 

The line height indicates how far apart two lines are. It is always measured from baseline to baseline. The baseline is the imaginary line on which most of the letters are placed. If you look at "Abcdefghijk", you will see that Abcdef are all on one line. This is the baseline. The g has a so-called descender and protrudes above the baseline. For detailed information see Wikipedia.
To keep the individual lines completely apart, the line height must be at least as large as the font size. Depending on the font, this spacing may be a little less or a little more, since the typeface is sometimes slightly smaller than the specified font size. This is due to descenders and the fact that capitalized umlauts are usually a bit taller than normal capital letters. If you have a 20 px font, the line height should be at least 20 px. You have to add 20% to make the font readable, so 24 px is better to make it readable. You can set values between 10 px and 200 px. If you click on the trash, the line spacing is set automatically. Three strokes are displayed and if you change the font size, the line spacing will automatically increase as well. It is then always about 120% of the font size. Normally you should use the recycle bin and set an automatic value. Unless you want to have a lot of space between the lines.

 

To the right of the input fields you can see all fonts as a preview, so you have an immediate impression of how the fonts fit together and whether the sizes and line spacing are well chosen. You can either jump to the individual formats with the menu items on the left or by clicking on the font you want to change in the preview.

In addition, the font is usually also immediately displayed on your page, which you always have in view below the dialog.