Ems erabiltzea letra-tamaina aldatzeko
Web orrialde bat eraikitzen ari zarenean, gehienek gomendatzen dizu tamaina letra-tipoak (eta, hain zuzen, dena), adibidez, ems, exs, ehunekoak edo pixelak dituzten neurri erlatiboak. Hau da, benetan ez duzulako ezagutzen norbaitek zure edukia ikusi dezakeen modu guztiak. Neurri absolutua erabiltzen baduzu (hazbeteko, zentimetro, milimetro, puntu edo picas) pantailan edo irakurketa orrian gailu desberdinetan eragina izan dezake.
W3C-k gomendatzen dizu ems tamaina erabiltzea.
Baina nola handia da em?
W3Cren arabera em:
"erabiliko den elementuaren" letra-tamaina "propietatearen balio konplexuaren berdina da. Salbuespena 'em' 'letra-tamaina' propietatearen balioa da, kasu horretan aipatzen dena elementu nagusiaren letra-tamaina ".
Hau da, emsek ez dute tamaina absoluturik. Horrela oinarritzen diren tamaina-balioak hartzen dituzte. Web diseinatzaile gehienentzat, horrek esan nahi du web arakatzailean dagoela, beraz 1em altuko letra-tipo bat arakatzailearen letra-tamaina lehenetsiaren tamaina bera da.
Baina zein altu da tamaina lehenetsia? Ez dago modurik 100% ziur egon, bezeroek beren letra-tipoaren tamaina lehenetsia aldatu dezakete beren nabigatzaileetan, baina gehienek ez dute uste nabigatzaile gehienek 16px letra-tamaina lehenetsia dutenez. Beraz 1em = 16px denbora gehien.
Think in Pixels-en, erabili Ems for the Measure-era
Behin letra-tipoaren tamaina lehenetsia 16px dela jakiten duzunean, ems erabil dezakezu zure bezeroek orriaren tamaina handitzeko, baina pixeletan pentsatu letra-tamainarekiko.
Esan hau bezalako zerbait daukana:
- Titularra 1 - 20 px
- Titularra 2 - 18 px
- Titularra 3 - 16 px
- Testu nagusia - 14 px
- Azpi-testua - 12 px
- Oin-oharrak - 10 px
Horrela definitu ditzakezu neurriak neurtzeko, baina edonork IE 6 eta 7 erabiltzen ezingo luke zure orriaren tamaina aldatu. Beraz, tamainak EMS bihurtu behar dituzu eta matematikako arazo bat besterik ez da:
- 1. titulua - 1.25em (16 x 1.25 = 20)
- 2. titulua - 1.125em (16 × 1.125 = 18)
- Titularra 3 - 1em (1em = 16 px)
- Testu nagusia - 0.875m (16 x 0.875 = 14)
- Sub testua - 0.75em (16 x 0.75 = 12)
- Oin-oharrak - 0.625em (16 x 0.625 = 10)
Ez ahaztu herentzia!
Baina hori ez da dena. Gogoan izan behar duzun beste gauza da gurasoaren tamaina hartzen dutela. Beraz, letra-tamaina ezberdinetako habiak habiaratuta badituzu, letra-tipoak askoz ere txikiagoa edo handiagoz espero dezakezu.
Esate baterako, hau bezalako estilo-orri bat izan dezakezu:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Honek 14px eta 10px letra-tipoaren letra-tipoak testu nagusiaren eta oin oharraren hurrenez hurren egongo lirateke. Baina paragrafo baten barruan oin-oina jarri baduzu, 875 px-ko testuarekin amaituko zenuke 10 px baino gehiago. Saiatu ezazu zeure burua, jarri hau CSS gainetik eta hurrengo HTMLa dokumentu batean:
Letra-tipo hau 14 px edo 0.875 ems altuera da.
Paragrafo honek oin-oharra du.
Oharraren paragrafo bat besterik ez bada.
Oin-ohar testua 10 px-ko irakurketa gogorra da, ia 8.75 px-ko irakurgarria da.
Beraz, ems erabiltzen ari zarenean, guraso objektuaren tamainak oso jakitun izan behar dituzu edo zure orrialdeetan oso bitxi elementu batzuekin amaituko zara.