Font méretezés "rem"-mel
Elég heves viták folynak napjainkban is a megfelelő fontméret egységek kiválasztásában. Sajnos rengeteg előnye és hátránya is van a különböző technikáknak és nem ez az egyetlen felmerülő kérdés velük kapcsolatban.
Két fő technikát használunk/használtunk a CSS3 megjelenéséig.
- Font méretezés pixelben
- Font méretezés em-mel
Mielőtt bármibe belekezdenénk vegyük sorra, mik a rég bevált módszerek.
Font méretezés pixelben (px)
A web kialakulásakor mindent pixelben mértünk, a betűk méretét is pixelben határoztuk meg. Ez a méretezési forma mára már elavult technikának számít. Főleg, hogy minden oldalt reszponzívra kell terveznünk a különböző eszközök és képernyőméretek/felbontások miatt.
Személy szerint én még mindig használok pixel méretezést. Főleg azok állnak át nehezen, akik a régóta beégett technikákat alkalmazzák.
Font méretezés em-mel (em)
Az em eredetileg a tipográfiában használt mértékegység, mely megegyezik a nagy "M" karakter szélességével. Ezt a mértékegységet a CSS-ben egyszerűen egy relatív értékként határozták meg. 1em a CSS-ben az elem fontméretével egyezik meg.
Erre egy példa és természetesen a végeredmény:
See the Pen Em teszt by Smajda László (@leoamros) on CodePen.
Tehát az em méretezés mindig az aktuális elemre alkalmazott font méretből számolódik. Mi ezzel a baj?
Számoljunk:
Vegyünk egy 10px alap betűméretet, hogy könnyebb legyen számolgatni.
CSS
html {
font-size: 10px;
}
li {
font-size: 1.4em;
} /* font-size = 14px */De mi van akkor, ha egy lista elemünk egy másik lista elemet tartalmaz?
10×1.4×1.4 = 19,6px ~ 20px
Tehát a második lista elemünk már 20px méretű lesz.
Minta:
See the Pen Em teszt by Smajda László (@leoamros) on CodePen.
Ugye-hogy-ugye... Frusztráló... Mit tehetünk?
Font méretezés rem-mel
A CSS3-ban bevezettek néhány új mértékegységet, ezek egyike a rem. A rem a "root em" rövid alakja. Míg az em az elemhez képest számított relatív mértékegység, addig a rem a root (gyökér) elemhez, azaz a html tag-hez képest számolt relatív méret.
Ez annyit jelent számunkra, hogy meghatározhatunk egy alap fontméretet a html elemünknek, majd ebből kiindulva méretezhetjük az összes többi elemet.
Kicsit módosítsuk az előző példát, így könnyebb lesz megérteni:
CSS
html {
font-size: 10px;
}
li {
font-size: 1.4rem;
} /* font-size: 14px */És a végeredmény:
See the Pen rem teszt by Smajda László (@leoamros) on CodePen.
Tehát a rem-mel a formázásunk minden esetben a html-ből kiindulva számolódik, így a lista elemek mindig ugyanúgy 14px méretben fognak megjelenni.
Mára ez a CSS property minden böngészőben elérhető. Persze, mint mindennel, ezzel is vannak gondjai az Internet Explorernek.
IE9 és IE10 alatt nem használható a font rövidített alakban:
font: italic bold 1.2rem/3rem Georgia, serif;És nem használható IE9, IE10 és IE11 alatt, a :before vagy :after pszeudó-elemen sormagasság állítására:
div.xy:before{
line-height: 2rem;
}
div.xy:after{
line-height: 3rem;
}A hibajegy szerint ilyenkor automatikusan 1px sormagasságot kap a pszeudó-elemünk .
És mit tehetünk, ha mégis olyan esetbe futunk, ahol a böngésző nem támogatja a rem-et?
A legegyszerűbb a dupla méretezés:
font-size: 14px; font-size: 1.4rem;Így automatikusan a modern böngészőkben a rem érték lesz érvényes, a nem támogatott böngészőkben pedig a pixel érték. Persze ez a CSS kód növekedését és dupla gépelést igényel a betűméret beállításakor. Tehát, use rem :)