{"id":3659,"date":"2025-05-05T19:12:07","date_gmt":"2025-05-05T17:12:07","guid":{"rendered":"https:\/\/www.4else.com\/fourelse\/?post_type=project&p=3659"},"modified":"2025-05-05T20:00:15","modified_gmt":"2025-05-05T18:00:15","slug":"schriftgroessen-im-webdesign-px-rem-em-co-einfach-erklaert","status":"publish","type":"project","link":"https:\/\/www.4else.com\/fourelse\/project\/schriftgroessen-im-webdesign-px-rem-em-co-einfach-erklaert\/","title":{"rendered":"Schriftgr\u00f6\u00dfen im Webdesign: px, rem, em & Co. einfach erkl\u00e4rt"},"content":{"rendered":"\n[et_pb_section fb_built=“1″ theme_builder_area=“post_content“ _builder_version=“4.27.4″ _module_preset=“default“][et_pb_row _builder_version=“4.27.4″ _module_preset=“default“ theme_builder_area=“post_content“][et_pb_column _builder_version=“4.27.4″ _module_preset=“default“ type=“4_4″ theme_builder_area=“post_content“][et_pb_text _builder_version=“4.27.4″ _module_preset=“default“ theme_builder_area=“post_content“ hover_enabled=“0″ sticky_enabled=“0″]

<\/p>\n

\ud83d\udd24 Schriftgr\u00f6\u00dfen im Webdesign: px, rem, em & Co. einfach erkl\u00e4rt<\/h2>\n

Wenn du Webseiten mit DIVI oder einem anderen Page Builder erstellst, begegnen dir schnell verschiedene Einheiten wie px<\/strong>, em<\/strong>, rem<\/strong><\/span> oder vw<\/strong><\/span>. Was bedeuten sie \u2013 und wann solltest du welche Einheit verwenden?<\/p>\n

\ud83d\udccf Absolute Einheiten<\/h3>\n
    \n
  • px<\/span> (Pixel):<\/strong> Feste Einheit, z.\u202fB. 16px<\/code>. Gut f\u00fcr pr\u00e4zise Designs, aber wenig flexibel auf Mobilger\u00e4ten.<\/li>\n
  • pt \/ cm \/ mm \/ in<\/span>:<\/strong> Aus dem Printbereich \u2013 im Webdesign kaum relevant.<\/li>\n<\/ul>\n

    \ud83d\udcd0 Relative Einheiten<\/h3>\n\n\n\n\n\n\n\n\n
    Einheit<\/th>\nBedeutung<\/th>\nBeispiel<\/th>\nVorteil<\/th>\n<\/tr>\n<\/thead>\n
    em<\/code><\/td>\nRelativ zur Schriftgr\u00f6\u00dfe des Elternelements<\/strong><\/td>\n1.5em<\/code> = 150\u202f%<\/td>\nSkaliert mit dem umgebenden Text<\/td>\n<\/tr>\n
    rem<\/code><\/td>\nRelativ zur Basisgr\u00f6\u00dfe des HTML-Dokuments<\/strong><\/td>\n1rem<\/code> = 16px<\/td>\nIdeal f\u00fcr konsistentes, responsives Design<\/td>\n<\/tr>\n
    %<\/code><\/td>\nProzentwert, z.\u202fB. f\u00fcr Breiten oder Abst\u00e4nde<\/td>\n50%<\/code><\/td>\nRelativ zum \u00fcbergeordneten Element<\/td>\n<\/tr>\n
    vw \/ vh<\/code><\/td>\nViewport-Breite\/-H\u00f6he<\/td>\n5vw<\/code> = 5\u202f% der Fensterbreite<\/td>\nSpannend f\u00fcr gro\u00dfe Texte, aber vorsichtig einsetzen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u2705 Empfehlung<\/h3>\n
      \n
    • Nutze rem<\/em><\/span>\u00a0f\u00fcr Schriftgr\u00f6\u00dfen<\/strong> \u2013 leicht skalierbar und gut kontrollierbar.<\/li>\n
    • <\/strong>em<\/em><\/span> eignet sich gut f\u00fcr Abst\u00e4nde<\/strong>, da sie sich an den Kontext anpassen.<\/li>\n
    • Vermeide <\/strong>px<\/span> f\u00fcr Texte<\/strong>, wenn du ein responsives Design m\u00f6chtest.<\/li>\n
    • F\u00fcr gro\u00dfe, dynamische \u00dcberschriften kannst du experimentell vw<\/em> nutzen.<\/li>\n<\/ul>\n
        <\/ul>\n

        \ud83d\udca1 Beispiel f\u00fcr responsives CSS<\/h3>\n
        h2 {\n  font-size: 2rem;       \/* Skaliert mit Basisgr\u00f6\u00dfe *\/\n  line-height: 1.4em;    \/* Passt sich dem Text an *\/\n  margin-bottom: 1rem;\n}\n<\/code><\/pre>\n
        \ud83d\udd27 In DIVI verwenden<\/h3>\n
        In DIVI kannst du diese Einheiten direkt im Design-Tab eingeben. Klicke auf das Dropdown neben dem Eingabefeld (z.\u202fB. bei \u201eSchriftgr\u00f6\u00dfe\u201c) und w\u00e4hle rem, em<\/em><\/span>, etc.<\/p>\n
        \n
        Fazit:<\/strong> Wer moderne, responsive und barrierefreie Webseiten gestalten will, sollte auf relative Einheiten wie rem<\/em><\/span> und em<\/em><\/span> setzen. Sie machen dein Design flexibler \u2013 und deine Besucher werden es dir danken.<\/p>\n
        <\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"
        Wenn du Webseiten mit DIVI oder einem anderen Page Builder erstellst, begegnen dir schnell verschiedene Einheiten wie px<\/strong>, em<\/strong>, rem<\/strong> oder vw<\/strong>. Was bedeuten sie?<\/p>\n","protected":false},"author":1,"featured_media":3677,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"Wenn du Webseiten mit DIVI oder einem anderen Page Builder erstellst, begegnen dir schnell verschiedene Einheiten wie <strong>px<\/strong>, <strong>em<\/strong>, <strong>rem<\/strong> oder <strong>vw<\/strong>. Was bedeuten sie?","_seopress_robots_index":"","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[317],"project_tag":[],"class_list":["post-3659","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-webdesign"],"_links":{"self":[{"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project\/3659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/comments?post=3659"}],"version-history":[{"count":4,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project\/3659\/revisions"}],"predecessor-version":[{"id":3676,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project\/3659\/revisions\/3676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/media\/3677"}],"wp:attachment":[{"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/media?parent=3659"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project_category?post=3659"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/www.4else.com\/fourelse\/wp-json\/wp\/v2\/project_tag?post=3659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}