Egy egyszerű bemutatása adaptív tipográfia
A jó hír az, hogy az adaptív tipográfia nem olyan nehéz elérni. Csak kell egy kis idő, hogy döntsön a szöveg fog reagálni a változások a képernyő mérete, és végezze el a módosításokat.
Az alapelvek adaptív font
Két alapvető elveket, hogy hozzon létre egy hatékony adaptív tipográfia. Először - változtassa meg a betűméretet. Ez azt jelenti, hogy a betűtípus függően változik a képernyő mérete. A második - sorban hosszoptimalizálási, miáltal olvashatóság megmarad. Ez azt jelenti, hogy bizonyos képernyőknél hatékonyabb lesz tartani a húr rövid szakaszon, akkor is, ha a szöveg elméletileg feszített széles.
A betűtípus méretét REMS
A legtöbb tervező határozza meg a betűméretet használni, vagy pixel, vagy EMS. Ems alkalmasabbak lehetőség, mivel lehetővé teszik a felhasználók számára, hogy módosítsa a betűméretet a böngészőben. De EMS lásd a szülő elem, ami azt jelenti, hogy bonyolultabb, mint a pixelek tovább bonyolítja egy adaptív tervezése, ahol nagyobb figyelemmel kell kísérni a mérete és aránya.
Rems-hez jobb alternatívát EMS. Munkájukat szinte azonos, kivéve egy lényeges különbség: az egység rem kapcsolódnak a html elem, hanem a szülő. Ez teszi fenntartása a megfelelő betűméretet könnyebb.
rem egység most már támogatja az összes jelentős modern böngésző, köztük az Opera, kezdve változat 11,6, valamint IE9.
Mivel akkor a rem egység, akkor ügyeljen arra, hogy alkalmazzák őket a elemek html, és nem a test. Meg kell kinéznie:
Most rem egységet fogja használni az alapértelmezett.
Ezután meg kell adnia a betűméretet az egyes képernyő mérete. Meg kell kísérletezni a betűméretet a különböző eszközökön, és látni, mi a legjobb. Ez nagyban függ a választott betűtípusok és a tervezés egészét. Például CSS-kódot lehet kinézni:
Természetesen azt szeretnénk, hogy adjunk további utasításokat a tételek, mint például a H1. Megtekintheti, hogy tényleg úgy néz ki a betűtípust, akkor a Web betűtípus minta.
Fenntartása optimális vonal hossza
Abban az időben, mint a változó a betűméretet meglehetősen egyszerű lépésben egy kicsit nehezebb lesz fenntartani a megfelelő vonal hossza több eszköz.
Egy időben volt egy csomó vita arról, hogy mi az az optimális hosszát a húr, és könnyebben olvasható. De szerint Baymard Institute konszenzus született - 50-75 karakter soronként.
Azt is javasoljuk, hogy használja a fix tartály szélessége a tartalom. De ez céljaival ellentétes az adaptív tervezése. Ezért, ha azt akarjuk, hogy fenntartsák az optimális alkalmazkodóképesség hosszú sora, ezen ajánlások megközelíteni egy kicsit másképp.
Először is, meg kell nézni a különböző méretben kapható, melyek a tervezési jön létre, és eldönti, hogy milyen méretű betűtípust választani, hogy mintegy 50 karakter soronként. A nagyon kis képernyőkön tartani az olvashatóság, akkor előfordulhat, hogy megáll a lehetőséget kevesebb karakterrel. De még mindig kell, hogy összpontosítson a szám 50.
Azt is be kell állítani a maximális szélessége (vagy törés pont) a szöveg tartalmi területek. Nézd meg a betűméretet használ egy adott képernyőméret, majd határozza meg a szélessége a tartály tartalmát, amikor a sorban 75 karakter. Ez az hosszúságú lesz a legnagyobb szélessége a tartály.
Például az eszköz használata az alapértelmezett betűméret 16px, és azt szeretné, hogy a betűméret lett 20px (például ebben a példában fogjuk használni a talpas Droid Serif). Ez azt jelenti, hogy akkor lehet kérni a betűméretet 1.25rem. Ebben az esetben a betűméretet, a tartály szélessége legyen 675px. Kapunk egy átlagos száma 60 karakter.
Szélességének beállításához a tartály, csak használd ezt a kódot:
Beállítható a maximális öltésszélesség minden képernyő mérete, vagy csak néhány specifikus. Kisebb képernyők, akkor hagyja a tartály szélessége, így a szöveg kerül teljes szélességében.
Így lehet megállapítani két oszlop vagy három - attól függően, hogy a betűméretet. Forgalomba tartalom oszlopokban teszi a szöveget olvasható, és hogy meg kell változtatni az elrendezés eltűnik.
A kód nagyon egyszerű.
Most, a képernyőkön a szélessége nagyobb, mint 1140 pixel, a szöveg két oszlopa, amely segít abban, hogy a hosszú sorok olvashatóbb.
Az alternatív betűtípusok
Gyakran előfordul, hogy amikor az adaptív tipográfia, látvány figyelmen kívül, hogy a különböző betűtípusok nem jelennek meg egyformán jól különböző méretben kapható. Különösen, ha ez aktsidentnye betűtípusokat.
De ez nem jelenti azt, hogy nem kívánja használni reagáló web design. Ehelyett egyszerűen pont a különböző elemek a kis és a nagy képernyők, különböző betűtípusokat.
Például a tervezés az asztalon a fejléc, akkor a font League Script. De még ennél is melenkih kijelzők, mint az iPhone, meg kell tenni, hogy olyan nagy, hogy az olvasás, akkor szinte lehetetlen.
Ehhez csak meg kell adnia a kódot:
Természetesen ez lehet tenni nem csak a fejlécet.
következtetés
Az adaptív kialakítású, a figyelem elsősorban fordítani a képeket és az általános elrendezést, tipográfia, de az is elég fontos eleme. A legkellemesebb az, hogy optimalizálja tipgrafiku nem nehéz adaptív tervezése.
Ha már töltött időt és erőfeszítést egyéb design elemek, nagyon fontos számukra, és eltölteni egy tipográfia, mert miközben a szöveg olvashatóságát tartalom - fontos eleme létrehozására optimális felhasználásának feltételeit az Ön honlapján.
Translation - Dezhurko