Netzflut

Webdesign, Webentwicklung, Drupal & Zeuchs

Schriftgröße em, px, pt ..

Inhaltsverzeichniss

    Was ist der Vorteil von em?

    Wird dann interessant wenn jemand die basis font size (in den Settings) ändert. Standard ist da 16 Pixel. Das ist speziell gut für Leute die diesen Wert ändern, vielleicht t sehen sie nicht gut und brauchen größere Standardschrift.

    "The px unit is still dependant on a reference of 96dpi and because of this em is more suited for fonts."

    Quellen
    http://meyerweb.com/eric/articles/webrev/199912.html
    http://mondaybynoon.com/20060313/effective-style-with-em/
    http://www.dummies.com/how-to/content/specifying-size-and-position-with-css.html
    http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
    http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
    http://pressedweb.com/css/the-history-and-future-of-font-sizing/ | video sehr gut
    http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/#.UJUnjYaO6F8
    http://www.sitepoint.com/forums/showthread.php?842404-Is-it-still-necessary-to-use-em-s-and-avoid-javascript-for-Accessibility
    http://www.elmastudio.de/webdesign/schrift-optimierung-im-responsive-webdesign/
    http://www.alistapart.com/articles/a-pixel-identity-crisis Mit Bildern. sehr gut
    http://css-tricks.com/css-font-size/

    Die 62.5% Methode

    Nicht nutzen, siehe Artikel.
    http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/

    Probleme

    Em ist immer bezogen zum em des Elternelements, sprich vererbt. Bei Verschachtelung ist das ein Chaos.

    SASS Lösungen

    https://gist.github.com/2237465
    http://erskinelabs.com/calculating-ems-scss/
    http://forrst.com/posts/SASS_px_to_em_and_em_to_px-JAd
    http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

    Generelle Ansicht, Design

    http://informationarchitects.net/blog/100e2r/

    Beispiel REM

    http://jsbin.com/acide4/8

    High DPI Displays

    http://mobile.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/
    https://www.webkit.org/blog/55/high-dpi-web-sites/

    Design&Code: