2011. november 16., szerda

Base font size - kenyérszöveg

A css-ben az alap (kenyér) betűk méretét többféleképpen lehet meghatározni. Ha minden pixelben van akkor nem történnek furcsaságok de nehéz globálisan változtatgatni a betűméretet.

Adjunk a html-hez és a body-hoz is százalékos értéket a következőképpen. A html-hez adott érték az Explorer betűméretét igazítja helyre.

html {
 font-size:100.01%; 
}

body {
 font-size: 62.5%;
}

A "kenyérszöveg" 10 px-es méretnek felel meg: 16px × 62.5% = 10px
Néhány érték átváltása százalékos, pixeles és em értékek között:


62.5%     =    10px    =  0.625em

68.8%     =    11px    =  0.688em

75%       =    12px    =  0.75em

81.3%     =    13px    =  0.813em

87,5%     =    14px    =  0.875em

93.8%     =    15px    =  0.938em

100%      =    16px    =  1em

106.3%    =    17px    =  1.063em

112.5%    =    18px    =  1.125em

118.8%    =    19px    =  1.188em

125%      =    20px    =  1.213em

131.3%    =    21px    =  1.25em

Egy jó konvertáló honlap: pxtoem.com

A méretek és betűtípusok összehasonlítása: typetester.org

Az Ems (em) értéket a skálázhatóság miatt a PDA/mobilok miatt is érdemes használni és tulajdonképpen ez az az érték amit direkt a webre találtak ki. Nem beszélve arról, hogy akár tizedesjegyű értékeket is megadhatunk.

A pixel (px) pontos de globálisan nem lesz lehetőség a betűk méretének az igazításához. A pont (pt) mértékegységet inkább hagyjuk a nyomdaiparnak vagy a print.css-nek.

A százalék értékek akkor jöhetnek jól, ha pl egy div blokkon belül egységesen kell a betűméretet változtatni egyszerre egy másikhoz képest. A small, x-small stb méretek nem adnak egyforma betűnagyságot a különböző böngészőkön, ezek inkább a 90-es években voltak használatosak.

Nincsenek megjegyzések:

Megjegyzés küldése