Az érzékeny web tipográfia szabályai

A reagáló webes tipográfia kemény - mind a tervrajz, mind a technikai know-how-nak kell lennie. De azonban trükkös lehet, hogy rossz, hogy rossz, nem egy lehetőség, mert a tipográfia a webdesign sarokköve.

Hogyan kapja meg mind a tervezést, mind a kódot? Hogyan kommunikálnak a fejlesztők a pixel-nyomó tervezőkkel? Hogyan lehet a tervezők a Nonchant fejlesztők számára a tipográfia? A leggyorsabb és legegyszerűbb módja annak, hogy a tervezők és a fejlesztők ugyanazon nyelven beszéljenek, tiszteletben tartják egymást a hajójukért, és törekedjenek arra, hogy megértsék mind a webes tipográfia elveit, mind korlátait.

Ez a cikk célja, hogy mind a tervezők és fejlesztők az alapítvány, ahonnan kezdődik a kommunikáció a témában a tipográfia. A szükséges tervezési elveket és a gyakorlati megoldásokat fedezzük fel Érzékeny tipográfia .

Mi a jó tipográfia?

A "jó" mindig szubjektív; Ez nem egy rögzített horgony, amit meg tudunk húzni a kommunikációt. A tervezők és a fejlesztők számára, hogy hatékonyan kommunikáljunk, el kell kezdeni egy közös nevezőről, hogy mindkét fél megérti. Ez a denominátor a tipográfia célja.

A tipográfia a szöveg megjelenése; Szöveget készítünk. A cél az öltözködés az, hogy a viselője vonzó ahhoz, hogy vonzza a beszélgetést, de nem tart annyi figyelmet, hogy a másik fél lesz elterelte a beszélgetést.

Hasonlóképpen, a tipográfia célja, hogy lehetővé tegye az olvasók fókuszálását és a szöveg tartalmát. Jó tipográfia, definíció szerint a tipográfia, amely segít a szövegnek a kommunikáció céljának teljesítésében.

Két dolognak meg kell történnie az olvasók számára, hogy összpontosítson és merítse magukat a szövegbe. Először is, a tipográfianak megfelelő (ha van ilyen) érzelmet kell közvetítenie. Másodszor, a szövegnek könnyen olvasható. Ez négy alapvető tulajdonsághoz vezet, amire szüksége van.

• Betűtípus család
• Betűméret
• Vonalmagasság (más néven vezető)
• Szövegszélesség (más néven szöveges intézkedés)

A megfelelő betűcsalád megszerzése segíti a szöveg alapvető érzelmeit ragyogni. A másik három tulajdonság jobb elérése Biztosítja a szöveget könnyen olvasható. A legtöbb esetben a tervezők kiválóan megtalálhatók a megfelelő betűtípussal. Tehát a cikk többi részében a másik három tényezőre összpontosítunk.

Az olvasható szöveg művészete

Az első lépés bármely projektben az, hogy beállítsa a betűméret , sormagasság és szélesség a test szövegét. Ezt a folyamatot betöltötték. Kezdje meg a felhasználói igényeket tartalmazó oldalak betöltésével. Amennyire csak lehetséges, az oldalnak több elemet kell tartalmaznia, mint például a H1, H2, H3, testszöveg és feliratok, amelyekre tudatos választást kell választania, hogy mi működik a tervezéshez. Minél több elemet tartalmaz az oldala, annál jobb az esélye, hogy olyan típusú rendszert állítson be, amely az egész fórumon működik.

Amikor kiválasztja a betűméret , sormagasság és mérje meg a test szövegét, győződjön meg róla, hogy valódi tartalmat használ. Ha nincs tényleges tartalma, használja a Wikipedia szövegét a Lorem Ipsum helyett.

Szintén ugyanabban a helyzetben kell helyezni magát, mert az olvasó szeme és a képernyő közötti távolság eltér a különböző eszközök számára. Ha egy mobilkészüléket betöltött, nézze meg a kimenetet telefonon keresztül. Ha egy laptopot írsz, üljön az asztalnál a laptopjával, és így tovább.

Miután letelepedte magát a megfelelő környezetben, indítsa el a betöltési folyamat első kiválasztásával betűméret , követi az intézkedés és végül sormagasság . Ne feledje, hogy nincs tökéletes kombináció - csak nézzen meg más oldalakat, amiket úgy érzi, jó tipográfia van, és látni fogja, hogy egyikük sem használja ugyanazt betűméret , sormagasság és mérjük. Szóval, mit akarsz, egyszerűen csak olyan szöveg, amely könnyen olvasható.

A megfelelő méretek beállítása nehezebb megmagyarázni írásban, így néhány videót készítettem, hogy segítsen neked betűméret , intézkedés és vezető .

Íme néhány gyors irányelv, amely segít abban, hogy jó betűméretét, vezető és mérete legyen.

A betűtípus túl kicsi, ha:

• A szöveg elolvasásához koncentrálnia kell
• Meg kell szüntetned a szemét
• Van a nagyítás, hogy nagyítsa

A betűtípus túl nagy, ha:

• Elkezdi észrevenni a betűformákat, ahelyett, hogy elolvassa a tartalmat
• Egyszerre csak egy-három szót olvashatsz
• Van a nagyítás, hogy kicsinyítse

A szöveges intézkedés túl hosszú, ha:

• Meg kell kapcsolnia a fejét, hogy elolvassa a szöveget
• Elveszíti a koncentráció közepét

A szöveges intézkedés túl rövid, ha:

• Ön irritáltnak érzi magát, ha a szöveg megszakad a következő sorba
• A szemed elfáradnak a balra és gyorsan pattogóra

A vezető túl keskeny, ha:

• A szöveg sűrű és túlterhelt
• Véletlenül elolvasta a rossz szövegsorozatot

A vezető túl nagy, ha:

• A szavak sorai közötti fehér helyet zavarja

Mindig emlékezzen a jó tipográfia definíciójára: Nem a tökéletesség után, egyszerűen lőttek a szöveghez, ami könnyen olvasható. Miközben ezt teszed, meg akarja vizsgálni a betöltési döntéseit a közönségével (barátok és munkatársak is nagyméretű tesztelőket is), hogy megbizonyosodjanak róla. Csak akkor lépjen be, ha más elemek méretét beállítja, ha befejezte a testszöveg meghatározását.

Egyéb elemek betűzése

Sok tervező és fejlesztő választotta a betűméret Az olyan elemeknél, mint a H1 és a H2 vizuálisan, és egyszerűen remélem, hogy ezek a mágikus számok jól működnek a tervezésükben. De nincs szükség arra, hogy csak a vékony levegőből kell húzni; A tipográfusok évszázadok óta használják a tipográfiai mérlegeket, hogy segítsenek ezzel. Mit csinálsz, hogy egy számot vegye ki a tipográfiai skálán, mint az elem méretét. Sajnos ezek a mérlegek nem használhatók közvetlenül az interneten, mert a nyomtatási tervezésre épülnek.

Tim Brown, a tipográfia területén szakértője, egy moduláris skála nevű megoldással jött létre. Pontosan úgy működik, mint egy tipográfiai skála, kivéve, ha a moduláris skálát a testszöveget eldöntötte.

A moduláris skála létrehozásához a test szövegét veszi betűméret (másnak nevezik alapbetűméret), és sokszor sokszor szorozzuk meg, amíg kapsz egy skála. Gyakran a használt arány zenéből származik (mivel a zene harmónia gyökerei vannak). A fenti példa egy példa az a Moduláris skála számológép .

Ha a moduláris skálaépítést készítesz, továbbléphet az elemek hátralévő részének meghatározásához, és egy számot választhat a skálán betűméret . Ezután állítsa be a vezető és az intézkedés ugyanazt a folyamatot, amíg meg nem kap egy jó egyensúlyt olvasható elemek.

Függőleges ritmus

A következő lépés az, hogy segítsen az egyes elemeket a függőleges ritmusnak nevezett technikával együtt. Ahhoz, hogy az egyik elem harmonikusan áramlik a másikba, meg kell csípnünk azokat a dolgot, amelyek csatlakozzák őket: a fehér tér. Ez a fehér térnek elég nagynak kell lennie ahhoz, hogy megkülönböztesse az egyik elemet a következő egyértelműen, de elég kicsi ahhoz, hogy az áramlás nem sérült meg.

Mennyi fehér helyet kell használnia? Sok tervező úgy dönt, hogy olyan alakja, mint a 10px, ami könnyű őket tervezni. Sok fejlesztő viszont egy véletlenszerű számot (mint a 6px) egy másik rácsrendszerből vagy egy olyan cikkből származik, amelyet online olvasta. Nem csoda, hogy ez a kettő nem tud kommunikálni.

Ahogy elképzelheted, nem kell egy mágikus számra támaszkodni a fehér térre; Használhatjuk a többszöröseket sormagasság testszövegünk értéke. Ez azért van, mert ösztönösen felismerjük a fehér térbeli mintákat a szövegben. Minél erősebb a minta, a biztonságosabb érzés, és annál könnyebb, hogy az elménk vándoroljon a tartalomba.

A függőleges ritmus használatához mindössze:

1. Állítsa be a fehér helyet az elemek közötti elemek között sormagasság
2. Beállít sormagasság minden más elem közül az alap többszöröse sormagasság

A kérdéses többszörösnek nem kell egész számnak lennie. Az alapok 0,5x és 1,25x értékeit használhatja sormagasság nagyobb rugalmasságot biztosít. Ezek az értékek működnek, mert a függőleges ritmus az ismétlés elvét használja.

Kiindulási rács vagy nem?

Amikor megemlítjük a függőleges ritmust, az alapvonal koncepciója elkerülhetetlenül a képbe kerül. Bár az alapvonal rács potenciálisan hasznos lehet, ez többnyire vonat roncs, mert a kezdők összpontosítanak annyi energiát, hogy szöveget üljön a (vagy on) alapvonalak között, hogy úgy érzik, hogy lehetetlen a függőleges ritmushoz.

Őszintén szólva, soha nem kapsz kiindulási rácsokat, hogy tökéletesen működjenek az interneten, mert a tipográfia matematikája mindig alpixeleket (például 24.8px) tartalmaz, és az összes böngésző különböző módon kezeli a subpixeleket. Például egyes böngészők minden elemet az oldalon 1PX-vel kell kikapcsolni. Ezek az 1PX hibák felhalmozódnak és nyomják, hogy bármilyen elemet az oldal leengedte, még a rácson kívül is. Ennek eredményeként azt javaslom, hogy ellenálljon egy alaphálózat használatával.

Mozgás, lépjünk be az érzékeny gyakorlatok birodalmába, és több képernyőt tervezzenek.

Tipográfia több képernyőről

A több képernyők tipográfiai tervezése nem jelent. Három dolog van, amire szükségünk van egy tervezési szempontból.

Először is, a felhasználó szeme és képernyője közötti távolság attól függ, hogy milyen eszközt használnak. Általában a felhasználó a nagyobb képernyő használatakor távolabb kerül a készülékre. Ez a jelenség azt jelenti, hogy növelni kell a betűtípus méretét, mivel az eszköz szélessége nő.

Másodszor, meg akarjuk tartani a testszöveg és egyéb elemek közötti arányokat. Ez azt jelenti, hogy meg kell növelnünk az összes elem méretét, mivel növeljük a test szövegméretét.

Harmadszor, specifikus töréspontokon szeretnénk növelni a betűméret konkrét elemek (például a H1) egy másik szám kiválasztásával a moduláris skála. Ezzel lehetővé teszi számunkra, hogy ellenőrizzük a vizuális hierarchiát, és biztosítsuk, hogy az elemek csak annyi figyelmet fordítsunk, hogy a felhasználó elolvassa.

Az érzékeny tipográfia kódolása

Tudjuk, hogy arányosan növeljük a szövegméretünket. Ennek legegyszerűbb módja az, hogy növelje a betűméret belül html választó. Azt is szeretnénk használni a relatív egységet a felhasználó tiszteletben tartásához betűméret preferencia.

 HTML {FONT-MÉRET: 100%;}
@media (min-szélesség: 40em) {
 HTML {FONT-MÉRET: 112,5%;}
} 

Azt is szeretnénk használni egy relatív egységet más elemek, így a skála a html betűméret ( h2 az alábbi példában). Ha meg kell változtatnia a betűméret a moduláris skála különböző számához minden, amit csinálsz, megváltoztatja a betűméret Eszerint ( h1 lent).

 H1 {Font-Méret: 2.369em;}
@media (min-szélesség: 40em) {
 HTML {FONT-MÉRET: 3.147EM;}
}

H2 {Font-Méret: 1.777em;} 

Bár a folyamat egyszerűnek tűnik, új fejlesztők is szembe kell néznie egy csomó fejfájást, mert a matematika szó, ezért azt javasoljuk funkciók és mixinek segíteni. Gyakran használom Kisasszony() tól moduláris skála könyvtár . Ezzel írhatsz MS (4) ahelyett 3.157EM és MS (3) ahelyett 2.369em .

Egy olyan funkció példája, amely megkönnyíti a függőleges ritmus kiszámításának terhelését:

  @ funkció VR ($ Rhythm) {@return $ ritmus / 16 * 1REM;} 

Ez vr A funkció lehetővé teszi, hogy írjon VR (3) Három alapvonal többszöröse, ahelyett, hogy kiszámítja magát. Ahhoz, hogy tovább segítsen (és magamnak) még tovább, létrehoztam egy érzékeny tipográfiai könyvtárat Typi .

Relatív egységek

A relatív egységekről szóló megbeszélések véget érnek azzal a kérdéssel, hogy kell-e használni rem vagy emelvény egységek. Úgy gondolom, hogy rem és emelvény egyedi felhasználási esetüket, és különböző körülmények között kell használni őket. Itt két olyan szabály, amely segíthet kiválasztani, hogy melyik egység használható:

1. Használat emelvény Ha az ingatlannak méreteznie kell betűméret
2. Ha nem, használja rem

További információ az ilyen egységek közötti választásról, Lásd ezt a cikket .

Összefoglalva

Ebben a cikkben megtanulta az érzékeny web tipográfia lényegét. Természetesen további részleteket találsz, amennyit mélyebben merülsz, mind elméletben, mind megvalósításban, de az itt van itt, amely 80% -át fedezi, amire szüksége lesz egy igazi projektben. Ezzel a tudással felkészült, készen áll arra, hogy mind a tervezőkkel, mind a fejlesztőkkel beszéljünk arról, hogyan tervezhetik és kódolják a jó tipográfiát az érzékeny webhez.

A reagáló tipográfia nem hihetetlenül nehéz. Ez csak kihívást jelent, mert szükség van egy hatalmas türelemre és szorgalomra, hogy feltárja a releváns elveket, és alkalmazza őket olyan módon, amely megfelel az interneten.

Ez a cikk eredetileg megjelent net magazin . Iratkozzon fel itt .

Kapcsolódó cikkek:

• Mester hozzáférhető web tipográfia
• Tervezzen egy érzékeny helyet EM-alapú méretezéssel
• 10 A felhasználóbarát webes formák előállítására vonatkozó szabályok