{"id":1068,"date":"2026-05-27T11:14:48","date_gmt":"2026-05-27T11:14:48","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1068"},"modified":"2026-06-12T10:14:27","modified_gmt":"2026-06-12T10:14:27","password":"","slug":"typografie","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/typografie\/","title":{"rendered":"Typography"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Application<\/h2>

Design your typography here and customize all text styles individually. The fonts and font weights are already assigned to the individual elements, so you only need to determine how they should look. The text sizes automatically adapt to the respective screen size..<\/b> This ensures a consistent typography across all devices that conveys your brand values and gives your interface an absolutely professional look.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Find typography overview<\/h2>

To adjust your typography, click on the third item, \u201eTypography\u201c.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Typography<\/div>\n
Select typography to see more settings.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 1 \u2013 Typography Overview<\/h2>

In the edit box, you can see all the typography values that can be adjusted. Here we show you which settings are available in total for the individual items. You can see all the changes you make immediately in the preview.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Typography settings<\/div>\n
Adjust all typography values step by step. These will be applied to the dark backgrounds. In the second step, you will then only adjust the colors for the dark backgrounds.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 2 \u2013 Customize Heading 1<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Writing<\/div>\n
Choose one of your already uploaded fonts to use for Heading 1.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 3 \u2013 Select font style<\/h2>

By default, you can always choose between Regular and Bold. Depending on which other font weights you have uploaded, you can also select them here.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
font style<\/div>\n
Select one of your uploaded font weights to apply it.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 4 \u2013 Set typography color<\/h2>

Adjust the color of a typography using the color picker.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Color field<\/div>\n
Intuitively determine your desired color using the free color field to visually select the appropriate shade.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Fill, Gradient & Eyedropper<\/div>\n
Switch flexibly between a solid color and a gradient, or use the eyedropper tool to pick any color directly from your screen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Hue & Opacity<\/div>\n
Using the sliders, you can precisely adjust both the hue and the opacity of your selection.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Color values & favorites<\/div>\n
Enter your exact HEX or RGB values directly to match brand colors precisely, or quickly access the most used colors at the bottom.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 5 \u2013 Character Formatting<\/h2>

Then determine the exact dimensions of your typography: set the desired font size, optimize the tracking for ideal legibility, and adjust the line height.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Font size<\/div>\n
Adjust the size of the characters individually to guarantee optimal readability for your texts.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Tracking \/ Letter spacing<\/div>\n
Determine the spacing between the individual letters to optimize legibility or aesthetics.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Line height<\/div>\n
Adjust the vertical spacing between the lines of a paragraph.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 6 \u2013 Capital letters<\/h2>

Enable the caps lock toggle to display your text entirely in uppercase letters.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Heading 2<\/h1>

The default value for the heading H2<\/span>\u00a0is usually between 32 and 40 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Heading 3<\/h1>

The default value for the heading H3<\/span>\u00a0is usually between 24 and 32 px<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Introduction<\/h1>

The default value for the introductory text is usually between 18 and 22 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

running text<\/h1>

The default value for running text is between 16 and 20 px. Tip: Use the value of your website or your corporate design to ensure a consistent brand appearance.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

List<\/h1>

The default value for bullet points is usually based on the running text and ranges between 16 and 20 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 7 \u2013 Adjust typography for dark backgrounds<\/h2>

After adjusting the light typography color, the theme needs a matching dark value. Use the color picker to perfectly adapt the typography to dark backgrounds and ensure optimal contrast everywhere.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Change background color<\/div>\n
Easily change your theme's background color here to perfectly adjust the contrast.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Optimize typography contrast<\/div>\n
Adjust the typography color using the color picker to guarantee optimal readability on dark backgrounds.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung Gestalte hier deine Typografie und passe alle Textstile individuell an. Die Schriften und Schriftschnitte sind den einzelnen Elementen bereits fest zugewiesen, du musst also nur noch bestimmen, wie diese genau aussehen sollen. Die Textgr\u00f6\u00dfen passen sich dabei automatisch an die jeweilige Bildschirmgr\u00f6\u00dfe an. Das sorgt f\u00fcr ein konsistentes Schriftbild auf allen Ger\u00e4ten, das deine […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1068","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-10","word_count":593,"total_views":"2","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Theme Builder","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/theme-builder\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=1068"}],"version-history":[{"count":77,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068\/revisions"}],"predecessor-version":[{"id":4358,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068\/revisions\/4358"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1068"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1068"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1068"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}