General information

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

Mit page4 makes it easy. The headings and the flow 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 look of the heading is controlled by the design fonts, where you can specify how the font should look for each of these 4 formats.


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 a flow text area where you can define how this flow text should look like.


Select text in the flow text and link this text so that the appearance of this link is also determined by the design. In the design fonts you have 2 areas, one for the link as such and one for the look that the link should have when a user hovers over this link.So as long as you use only the content element &hell heading for headlines and write the entire text of your website without any further formatting with the content element text, you can be sure that your website looks consistent and thus fulfils an important prerequisite for being professional.

 

Important: If you change the font formatting of the design fonts, for example by changing the formatting for the flow text and selecting a different font family and font color there, then after saving all flow 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 text in the respective content element, for example, individual words in bold or italics, are retained. Therefore, even if the text editor offers the possibility, you should only use individual formatting sparingly. More about this in the article about the content element Text.

Change the design, then all settings you have made in the design font will be discarded and replaced by the settings in the new design. If you have used a design that has a white background and black font and you are switching to a design with a black background and white font, then you will understand why it makes sense that the design provides the font information. You can adapt the design fonts at any time with very little effort.

Make sure that the design of the headlines is done in such a way that the format H1 - i.e. headline 1 gets the larger font and generates a lot of attention. H2 should be slightly smaller and clearly different from H1. H3 should be slightly smaller and well different from H2 and H4 should be smallest, but even larger than the flow text. Choose an appropriate font that matches the continuous text. It often looks very good if all headlines use the same font family and may differ in color in addition to the font size. The font family for the headlines should be compatible with the flowing text. 

The most important thing is that your visitors can read the texts on your website well. Make sure that the font is not too small for the text, that the text color stands out well from the background and that the distance between the lines is sufficiently large. Don't use too many families and make sure that the fonts match harmoniously.

Using Google Fonts

You can use Google fonts for the design fonts. When a visitor visits your site and you have used a font family provided by Google, the font information is provided by Google. This ensures that your visitors will see your website with the fonts you have selected.
If you don't use a Google font, your visitor must have exactly the font you use installed on his computer. Otherwise his browser cannot display this font and uses a replacement font instead. Of course, this will change the design you have chosen, and since fonts have different widths, this may lead to different text conversions.
Google fonts are therefore a very good way to make sure that every visitor sees your page exactly as you get it displayed on your computer.

Operation of the design fonts

How to get to the design fonts

You can find this area either by selecting the menu “Design font templates“ in the main menu “Design“ or by selecting the menu “Edit Design“ in the main menu “Design“ and then clicking on the menu item “Fonts“.

Function overview and settings

The font area is structured so that you can find a list of all formats on the left. When you click on a format, the parameters you can adjust are displayed on the right.
Currently, there are the formats
Headline 1 = H1 in the content element headline
Headline 2 = H2 in the content element headline
Headline 3 = H3 in the content element headline
Headline 4 = H4 in the content element headline
Basic text = Text that you write with the content element text without applying any formatting. Note texts, such as empty content elements, are displayed in the same format. The same applies if you use the tag "p" in a content element HTML.
Link = A link that is created in flow text. Part of the formatting is taken over by the flow text. Therefore, less formatting is stored here.
Link:Hover = A link that is created in the flow text. Part of the formatting is taken over by the flow text. Here, too, there are fewer formatting options. You specify here how the link should be displayed when a visitor hovers over the link.

Click on one of the “main formats“ (Link and Link:Hover is only an extension of the flow text) then you have the following options available:

Headline H1

Headline H2

Headline H3

Headline H4

Flow text. Also specified in the text editor as paragraph format. Additionally you can format links like en.page.com accordingly. The normal state and what the link should look like when you hover over it.

The individual options

Font

Here the selected font is displayed. Click on the “A“; button at the end of the input field to open a dialog with all available Google Fonts. You can search for a font directly by typing the first few letters. For example, if you type an A, all fonts beginning with A will be displayed. If you then type r, so Ar only the fonts beginning with Ar are shown. This way you can find your font very quickly. A click on the desired font and the dialog closes and the font is taken over.

The dialog is extended and as soon as this has happened, you will find more detailed information here.

Font color

This sets the font color.

Font size

Green: Here you can specify the font size in pixels. From 6 px to 150 px. With the recycle bin you can delete the information. Three dashes then appear in the field. In this case, the font size that your visitor has set in his browser is always used. Of course, you're giving up control because you don't know which default sizes are set in your visitor's browser. This “automatic font size’e“ only makes sense for flow text, because it allows the visitor to display your website in very large font. This is useful if, for example, you have a visual impairment.

you can display all formats (headings and flow text) in any allowed size. Of course, you should only use font sizes of 30 px or more for headlines. It is also good to pay attention to the value of the headings. Heading 1 should be displayed at the largest, heading 2 smaller and heading 4 at the smallest.

Weighting

You can set to Normal or Bold. Depending on the font, the effect is more or less visible. This is because every font weighting is a separate font for Google and unfortunately, for reasons of speed, you cannot invite thousands of font styles. The blue option is always active.

 

Hint: If a Google font only has a weight, then the browser tries to display the font in bold, but that doesn't look particularly good.

Italic

In principle, this switches italic font on or off. Normal would be switched off and italic would be switched on. Here, too, the effect varies depending on the font family.

Underlined

Similar to italics, an option to disable (normal) or enable (underline) the style underlines. This effect does not come from the font itself and therefore has an effect on every font.

Letterspacing

This sets the space between the letters. You have the option to enter a value from 1 px to 5 px. The larger the distance, the further the letters are from each other. Use the recycle bin to close these values and set the letter spacing to 0 px. If you don't want any special effects, you shouldn't set a value here for what you get through the recycle bin, which will display three dashes instead of one.

Lineheight

The carriage return indicates how far two lines are apart. Measurements are always made from baseline to baseline. The baseline is the imaginary line on which most of the letters are written. If you look at „Abcdefghijk“, you see that Abcdef are all on the same line. That's the baseline. The g has a so-called lower length and protrudes beyond the baseline. Detailed information under Wikipedia.

In order to keep the individual lines completely apart, the font size must be at least as large as the font size. Depending on the font, this distance may be slightly less or slightly more, as the typeface is sometimes slightly smaller than the specified font size. This has to do with the length of the capitals and with the fact that capitalized umlauts are usually slightly higher than normal capital letters. If you have a 20 px font, the line height should be at least 20 px. It is expected to be 20% added to make the font readable, so 24 px is better to make it easy to read. You can set values between 10 px and 200 px. If you click on the recycle bin, the line spacing is set automatically. Three dashes are displayed and when you change the font size, the line spacing automatically increases. It is then always around 120% of the font size. Normally you should use the trash and set an automatic value. Unless you want a lot of space between the lines.

Preview

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

 

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