Brûk Ems om lettertypen te feroarjen
As jo in webstee opmeitsje, advisearje de measte professionals de lettertypen (en feitlik alles) mei in relative maat as ems, exs, persintaazjes of piksels. Dit is om't jo echt net alle ferskillende wizen kenne dat jo immen sjen kinne. En as jo in absolute maatregel brûke (ynteken, sintimeter, milimeter, punten, of picas) kin it ynfloed of lêsberens fan 'e side yn ferskate apparaten foarkomme.
En de W3C advisearret dat jo ems foar groepen brûke.
Mar hoe grut is in em?
Neffens de W3C in em:
"is lyk oan de rekkende wearde fan 'e eigenskip fan' e lettertype 's fan it elemint wêr' t it brûkt wurdt. De útsûndering is as 'em' opkomt yn 'e wearde fan' e" font-size "eigenskip sels, yn hokker gefal it ferwiist nei de lettertypegrutte fan it âlder elemint. "
Mei oare wurden, ems hawwe gjin absolute grutte. Se nimme op har grutte wearden op basearre op wêr't se binne. Foar de measte webûntwikkelders betsjut dit dat se yn in webblêder binne, dus in lettertype dat 1em heech is krekt deselde grutte as de standert lettertypegrutte foar dy browser.
Mar hoe grut is de standertgrutte? Der is gjin wize om 100% befeilige te wêzen, om't de klanten harren standert lettertypegrutte yn har browsers wizigje kinne, mar om't de measte minsken jo net meie dat de measte browsers in standert lettertypegrutte fan 16px hawwe. Dus de measte tiid 1em = 16px .
Tink yn Pixels, brûk de Ems foar de Measure
As jo witte dat de standertlettertriemgrutte 16px is, kinne jo dan brûk meitsje fan ems om jo kliïnten de side te feroarje kinne jo maklik feroarje, mar tinke yn piksels foar jo lettertypen.
Sizje dat jo in reliëfstruktuer hawwe wat sa:
- Headline 1 - 20px
- Headline 2 - 18px
- Headline 3 - 16px
- Haadtaal - 14px
- Sub tekst - 12px
- Fuotnoten - 10px
Jo kinne har definiearje op dy wize mei piksels foar de mjitting, mar dan kin elkenien brûkme IE 6 en 7 net kinne jo side goedkeare. Sa moatte jo de dimensjes nei ems konvertearje en dit is gewoan in saak fan guon math:
- Headline 1 - 1.25em (16 x 1,25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Headline 3 - 1em (1em = 16px)
- Main text - 0.875em (16 x 0.875 = 14)
- Sub tekst - 0.75em (16 x 0,75 = 12)
- Footnotes - 0.625em (16 x 0,625 = 10)
Ferjit net ferearjen!
Mar dat is net allegearre oan ems. It oare ding dat jo oan tinke moatte is dat se nimme op 'e grutte fan' e âlder. Dus as jo nêst eleminten hawwe mei ferskate lettertypen, kinne jo mei in ljepper folle lytser of grutter wurde as jo ferwachtsje.
Sa kinne jo bygelyks in stylblêd hawwe:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Dit soe gefolch wêze foar lettertypen dy't 14px en 10px binne foar de haadtriem en de fuotnames respektivelik. Mar as jo in fuotnota yn in paragraaf sette, dan kinne jo einigje mei tekst dat 8,75px is dan 10px. Probearje it sels, stelle dit de boppeste CSS en de folgjende HTML yn in dokumint:
Dit lettertype is 14px of 0.875 ems yn hichte.
Dizze paragraaf hat in fuotnoat yn.
Hoewol dit allinich in footnote-paragraaf is.
De fuotnota-tekst is hurde om 10px te lêzen, it is hast unlearbar op 8.75px.
Dus, as jo gebrûk fan ems hawwe, moatte jo tige bewust wêze fan 'e grutte fan' e heule objekten, of jo sille mei-inoar geweldige eleminten op jo side ôfslute.