Font Size – Reszponzív betűméretek

28 szeptember 2015 / By Mavrák Richárd
Font Size

Hogy állítsuk be a betűméreteket egy weboldalon? Reszponzív betűméretek!

 

Mitől lesz reszponzív a betűméret? Vagy minden törésponton külön-külön kell maghatározni a betűméretet?

Amikor egy weboldalt elkészítek, természetesen foglalkoznom kell az oldal reszponzív megjelenésével is, mivel a mai weboldalakat, már különféle felbontásokkal jelenítjük meg. Az első cHTML és CSS munkámnál még nem tudtam, hogy a betűméreteket miként határozzam meg (a px mértékegységen kívül mást nem tanítottak), miként lesz a betűméret is reszponzív.
Ma már tudom, hogy nagyon sok lehetőségünk van, de vajon melyiket is célszerű használni?

Te döntesz!

Szerintem a legfontosabb, hogy már a tervezés elején eldöntsük, hogy minden font-size méretet majd mi magunk szeretnénk meghatározni az egyes töréspontoknál, vagy rábízzuk a mértékegységekre!?
Megpróbáltam összegyűjteni a különféle méreteket, mértékegységeket, hogy a hozzám hasonló kezdő webdesignerek is el tudjanak igazodni a lehetőségek tárházában!
Mielőtt rátérnék a pontos meghatározásokra, elmondanám, hogy én a legtöbbet a px, em, és néha a vw mértékegységeket használom. Ha magam szeretném állítani minden törésponton a méretezést, akkor px értékeket használom, ha pedig rábízom a csodás relativitásra, akkor em és vw mértékegységet használom.
Érdekes, hogy a legtöbb általam megkérdezett webdesigner ismerősöm is a px és a em mértékegységeket használja.

Lássuk!

A font-size értéke lehet absolute-size vagy relative-size.

Relative-size:

  • méretet ad a környező elemekhez képest
  • megengedi a felhasználó számára a szöveg méretének változtatását a böngészőben

Absolute-size:

  • beállítja a szöveget egy megadott méretre
  • nem engedi meg minden böngészőben a felhasználó számára, hogy módosítsa a szöveg méretét (rossz megközelíthetőség miatt)
  • az absolute-size akkor hasznos, ha a kimenet fizikai mérete ismert
Ha nem adják meg a a font-size-t, akkor alapértelmezett mérete a normál szövegeknek 16px (16px=1.6em).

xx-small: Az szöveg méretét többszörösen lekicsinyíti.

x-small: A szöveg méretét lekicsinyíti.

small: A szöveg méretét kicsivé teszi.

medium: A szöveg méretét közepes méretűvé teszi.

large: A szöveg méretét nagyméretűvé teszi.

x-large: A szöveg méretét még nagyobb méretűvé teszi, mint a large.

xx-large: A szöveg méretét többszörösen megnöveli.

smaller: A szöveg méretét a szülőelem méretéhez képest kisebbé teszi.

larger: A szöveg méretét a szülőelem méretéhez képest nagyobbá teszi.

x (length): A szöveg méretét x-re változatja.(Megadható paraméterek: px,cm,mm)

x%: A szöveg méretét a szülőelem méretéhez képest x százalékban változtatja.

inherit: A szöveg a szülőelem méretét örökli.

 

Relatív mértékegységek:

Ide a px, em, ex és a százalékban megadott értékek sorolhatóak.
pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek, általában egy konkrét képpont méretét jelölik, bár előfordulhat, hogy több pontot is magába foglal egy adott pixelnyi érték (például lézernyomtatóknál a beállított felbontástól függően, vagy egy folyadékkristályos kijelzőn, ha kisebb felbontásra van állítva, mint amennyit meg tud jeleníteni). A pixelek jele a px, egy lehetséges érték például az 5px.

Az em egy relatív értéket jelöl, tipikus tipográfiai mértékegység. Az 1em az adott környezet betűméretét jelöli: a font-size aktuális értéke, illetve ha konkrétan egy font-size definíción belül használjuk, akkor a szülő elem betűmérete. Alapértelmezett esetben, ha a dokumentum gyökerében használjuk ezt a méretet, 16 pixelt szokott jelenteni (böngésző beállításoktól függően). Egy lehetséges érték például az 1.2em.

Az ex szintén egy relatív értéket jelöl, és hasonlít az em-hez, azzal a kivétellel, hogy ez nem az adott betűkészlet magasságához viszonyított méretet, hanem a betűkészlet kis x betű magasságát jelöli (bár azoknál a betűkészleteknél is definiálva van, ahol nem létezik x betű). Általában a böngészők az értékét egyszerűen az em felének veszik, így alapesetben általában 8 pixelnyi méretet jelöl. Egy lehetséges érték például az 5ex.

A relatív mértékegységeknél eléggé új megoldás a vh és vw és wm használata. Ezek vektoros betűméretek.
A vw: A nézőpont szélessége
vh: A nézőpont magassága
vm: A nézőpont szélessége és magassága közül a kisebb érték.
A CSS3 egyik újdonsága a vh és vw mértékegység, mellyel az elemet relativan méretezhetjük a viewporthoz. A vw/vh méretezés érdekessége, hogy egy egység mindig a látható viewport 1/100 része. Tehát, ha a az elemet 100% szélesre akarod állítani, akkor:
– 1vh = 1/100 relatívan a viewport magasságához
– 1vw = 1/100 relatívan a viewport szélességéhez
– 1vmin = 1/100 relatívan a rövidebb oldalhoz
– 1vmax = 1/100 relatívan a hosszabb oldalhoz

Százalékos értékek:

Mindig relatív értéket képeznek valamely más értékhez viszonyítva, a kérdés csak az, hogy éppen milyen értéket vesznek alapul. Ez általában a leglogikusabb érték, de hogy egyértelmű legyen, minden tulajdonságnál, ahol használhatunk százalékos megadást, definiálva van, hogy mihez képest értendő. Egy lehetséges értéke az 50%.

Az ex, em és a % megadások egy érdekes tulajdonsága, hogy öröklődés esetén (például egymásba ágyazott listáknál) a hatásuk az lehet, hogy egyre kisebb értéket vesznek fel, hiszen itt a szülő értékéhez viszonyítja a százalékot (ha éppen a szülőhöz történik a viszonyítás, és a szülőnek is már százalékos érték volt adva, akkor a két százalékos érték eredője lesz az új érték, stb.).

 

Abszolút mértékegységek:

Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Például 1cm az mind a kijelzőn, mind nyomtatásban egy centiméter (kellene, hogy legyen). Egy gond van ezzel: az operációs rendszer nem mindig tudja a megjelenítőről (főleg a kijelzők esetén) hogy mekkora a pontos felbontása, és így egy általános, vagy becsült értékkel dolgozik.

Az mm a milliméter rövidítése, egy példa a használatára: 10mm.

Az in az inch (=col, =hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in.

A cm a centimétert takarja, mely mint köztudott, 10 mm-ert takar. A megadása nem tér el a korábbiaktól: 1cm.

Most jönnek az érdekesebb mértékegységek, ezek közül az egyik a pt, mely a “pont” rövidítése. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl. Gyakran keverik össze a pixellel, pedig nem sok közük van egymáshoz. Egy példa a használatára: 16pt.

A pc-t kell megemlítenünk, mely a “pica” rövidítése, és 12 pont méretű. Egy megadása: 2pc.


Mint, ahogy az fent is olvasható, nagyon sok lehetőségünk van arra, hogy meghatározzuk a betűméretünket, de már talán túl sok is van, ami közűl választhatunk!

Be kell vallanom, hogy az elmúlt napokban sok mértékegységet leteszteltem és megvizsgáltam, hogy megismerjem mindegyiket. Javaslom mindenkinek, hogy ugyan így tegyen, mert csak akkor tudunk igazán dolgozni velük.

Segítség: Weblabor.hu

About The Author

Mavrák Richárd