{"id":614,"date":"2023-02-22T14:23:50","date_gmt":"2023-02-22T13:23:50","guid":{"rendered":"https:\/\/dknzdesign.com\/?p=614"},"modified":"2023-02-22T14:28:21","modified_gmt":"2023-02-22T13:28:21","slug":"why-you-shouldnt-set-font-sizes-using-em","status":"publish","type":"post","link":"https:\/\/dknzdesign.com\/de\/blog\/web-basics\/why-you-shouldnt-set-font-sizes-using-em\/","title":{"rendered":"Warum Sie Schriftgr\u00f6\u00dfen nicht mit em einstellen sollten"},"content":{"rendered":"
<\/div>\n\n\n\n
\"\"<\/figure>
\n

Ems erzeugen kaskadierende Effekte, sind schwer zu berechnen und beeintr\u00e4chtigen responsive Designs; Verwenden Sie Pixel, Prozents\u00e4tze oder noch besser rem!<\/p>\n<\/div><\/div>\n\n\n\n

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

Wenn es um das Festlegen von Schriftgr\u00f6\u00dfen in CSS geht, werden \u00fcblicherweise zwei relative Einheiten verwendet: em und rem. Beide Einheiten sind relativ zur Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements, aber es gibt einige wichtige Unterschiede zwischen den beiden. In diesem Blogbeitrag untersuchen wir die Unterschiede zwischen rem und em und wann es am besten ist, beide zu verwenden.<\/p>\n\n\n\n

Lassen Sie uns zun\u00e4chst definieren, was em und rem sind. Em ist eine relative Ma\u00dfeinheit, die auf der Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements basiert. Wenn die Schriftgr\u00f6\u00dfe des body-Elements beispielsweise 16 Pixel betr\u00e4gt, entspricht 1em 16 Pixel. Wenn die Schriftgr\u00f6\u00dfe eines untergeordneten Elements auf 1,5 em festgelegt ist, entspricht dies dem 1,5-fachen der Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements.<\/p>\n\n\n\n

Rem hingegen ist auch eine relative Ma\u00dfeinheit, die sich aber an der Schriftgr\u00f6\u00dfe des Root-Elements (typischerweise dem HTML-Element) orientiert. Das hei\u00dft, wenn die Schriftgr\u00f6\u00dfe des Root-Elements auf 16 Pixel eingestellt ist, dann w\u00e4re 1rem auch gleich 16 Pixel, unabh\u00e4ngig davon, wo es im Dokument verwendet wird.<\/p>\n\n\n\n

Also, was sind die Unterschiede zwischen em und rem? Der Hauptunterschied besteht darin, dass em-Einheiten relativ zur Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements sind, w\u00e4hrend rem-Einheiten relativ zur Schriftgr\u00f6\u00dfe des Stammelements sind. Dies bedeutet, dass rem-Einheiten nicht von \u00c4nderungen der Schriftgr\u00f6\u00dfe von \u00fcbergeordneten Elementen betroffen sind, w\u00e4hrend em-Einheiten von kaskadierenden Effekten betroffen sein k\u00f6nnen.<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

Ein weiterer Unterschied besteht darin, dass rem-Einheiten einfacher zu berechnen sind als em-Einheiten, insbesondere wenn es um verschachtelte Elemente geht. Da rem-Einheiten auf dem Stammelement basieren, m\u00fcssen Sie beim Festlegen von Schriftgr\u00f6\u00dfen nicht die Schriftgr\u00f6\u00dfe jedes \u00fcbergeordneten Elements berechnen.<\/p>\n\n\n\n

Also, wann sollten Sie em vs. rem verwenden? Em-Einheiten werden am besten f\u00fcr Schriftgr\u00f6\u00dfen verwendet, die relativ zur Schriftgr\u00f6\u00dfe eines bestimmten \u00fcbergeordneten Elements sein m\u00fcssen. Wenn Sie beispielsweise m\u00f6chten, dass die Schriftgr\u00f6\u00dfe einer Unter\u00fcberschrift das 1,2-fache der Schriftgr\u00f6\u00dfe der \u00fcbergeordneten \u00dcberschrift betr\u00e4gt, k\u00f6nnen Sie 1,2em f\u00fcr die Unter\u00fcberschrift verwenden.<\/p>\n\n\n\n

Rem-Einheiten hingegen werden am besten f\u00fcr Schriftgr\u00f6\u00dfen verwendet, die im gesamten Dokument einheitlich sein m\u00fcssen, unabh\u00e4ngig davon, wo sie verwendet werden. Wenn Sie beispielsweise m\u00f6chten, dass alle \u00dcberschriften eine Schriftgr\u00f6\u00dfe von 2rem haben, k\u00f6nnen Sie die Schriftgr\u00f6\u00dfe des Stammelements auf 16px festlegen und 2rem f\u00fcr alle \u00dcberschriften verwenden.<\/p>\n\n\n\n

Zusammenfassend l\u00e4sst sich sagen, dass sowohl em- als auch rem-Einheiten n\u00fctzlich sind, um Schriftgr\u00f6\u00dfen in CSS festzulegen, aber sie haben unterschiedliche Anwendungsf\u00e4lle. Em-Einheiten werden am besten f\u00fcr Schriftgr\u00f6\u00dfen verwendet, die relativ zur Schriftgr\u00f6\u00dfe eines bestimmten \u00fcbergeordneten Elements sein m\u00fcssen, w\u00e4hrend rem-Einheiten am besten f\u00fcr Schriftgr\u00f6\u00dfen verwendet werden, die \u00fcber das gesamte Dokument hinweg konsistent sein m\u00fcssen.<\/p>","protected":false},"excerpt":{"rendered":"

Ems create cascading effects, are hard to calculate, and compromise responsive designs; use pixels, percentages or even better use rem! When it comes to setting font sizes in CSS, there are two relative units that are commonly used: em and rem. Both units are relative to the font size of the parent element, but there…<\/p>","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,41,107],"tags":[],"_links":{"self":[{"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/posts\/614"}],"collection":[{"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":7,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/posts\/614\/revisions\/639"}],"wp:attachment":[{"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dknzdesign.com\/de\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}