Tartalom
- 01. A tipográfia méretarányos elérése
- 02. Mintaoldalunk
- 03. Először a legkisebb képernyő ellenőrzése
- 04. Felfelé haladás
- 05. Fel és fel!
- 06. Összegezve az egészet
- 07. További olvasmány
- Tetszett ez? Olvassa el ezeket!
- Szükséges tudás: Alapvető CSS és HTML ismeretek. Tipográfia ismerete
- Igényel: Kedvenc szövegszerkesztője és böngészője
- Projekt idő: Körülbelül 30 perc
Támogatási fájl 1
Szoktunk gondolkodni azon, hogy a tipust méretezzük-e az alap betűmérethez képest em-ek vagy százalékok használatával. A reszponzív webes tervezéssel rengeteg szabályt írunk és választunk töréspontokat, hogy megbizonyosodjunk arról, hogy az elrendezésünk sok képernyőmérethez illik. A típus csodálatos folyadék, de nem egy méret mindenkinek megfelelő. Megnézünk néhány gyors tippet, hogy a tipográfia tökéletesen illeszkedjen az elrendezéshez, függetlenül attól, hogy milyen eszköz vagy képernyő szélessége történik.
Természetesen van ennél több is, mint amennyit egy oktatóanyagban lefedhetünk. Tehát rengeteg hasznos forrás szerepel az alábbiakban is.
01. A tipográfia méretarányos elérése
Átfogó webdesign! Csodálatosan folyékony rácsok és média lekérdezések teszik terveinket bármilyen méretű képernyőhöz. Számunkra szerencsés, a típusmérleg szinte végtelen, és bármilyen méretű edénybe belefolyik, amit adunk neki. Aligha kell másodszor átgondolni az érzékeny elrendezésünket ... vagy mi? Ideális esetben, ha átfogó elrendezésünk léptékű, akkor a típusunknak is változnia kell, és itt az egyik módja annak.
02. Mintaoldalunk
E példa céljából elkészítettem egy nagyon egyszerű oldalt, amelyet bemutatásra használhatok, Alice Csodaországbeli kalandjai első néhány bekezdésének felhasználásával. Remélhetőleg webhelyén még valamivel több lesz, de az egyszerűség tökéletesen megfelel ennek a bemutatónak az igényeinkkel, és ugyanaz a technika alkalmazható a bonyolultabb oldalakon is.
Vessünk egy pillantást a forrásunkra, hogy megnézzük, mi van a motorháztető alatt. A címünkhöz tartozó H1 és néhány bekezdés tartalmú div-be csomagolva, kényelmesen hozzárendelve a pakolás osztályához. Ezt a tárolót arra használjuk, hogy segítsen kezelni a vonalhosszainkat ebben a példában. Saját munkájához ennek a tárolónak a szélességét a rács és a hozzá tartozó viselkedés határozza meg, de ugyanazok az elképzelések érvényesek.
A CSS-be történő gyors bemerülés azt mutatja, hogy a test betűméretét 100% -ra állítottuk be (referenciaképpen kb. 16 képpont). És minden szöveges elem ems méretben van. Kedves és rokon! Jól kezdtük:
body {
betűméret: 100%;
vonal-magasság: 1,6875;
font-család: Georgia;
}
Az alap tipográfiai skálánkat mindannyian felállítottuk, ezért nézzük meg, hogy ez hogyan áll fenn a különböző képernyőméreteknél.
03. Először a legkisebb képernyő ellenőrzése
Kezdjük el nézni az elrendezésünket egy nagyon kicsi képernyő szélességgel, mondjon valamit 320 pixel körül. Valószínűleg mit látna ezeken a népszerű mobileszközökön.
Kezdetben ezen a keskeny szélességen a vonalhosszaink valamivel rövidebbek, mint az általánosan elfogadott optimális hosszúság 45 és 75 karakter. Vagy ha nem rajong a karakterek számolásáért, akkor észreveheti, hogy a sorok rövidnek érzik magukat, és megnehezítik a szöveg követését. Személy szerint hajlamos vagyok többször olvasni, mint nem.
Ahhoz, hogy egy kicsit több helyet kapjunk a kényelmes vonalvezetéshez, csökkenthetjük a típus teljes méretét, vagy kissé megnövelhetjük a konténerünket. Mivel ez egy oktatóanyag a méretezés típusáról, az előbbivel fogok járni, de az utóbbi is teljesen elfogadható lehetőség lenne.
Ennek érdekében írjunk média lekérdezést legfeljebb 400 pixel szélességűre. Igen, ez nem éppen 320 pixel, de inkább a töréspontokat állítom be az alapján, hogy a tervezés hol mutat rá igényt, és nem az adott eszközméretek alapján.
Az összes típus méretének megváltoztatásának legegyszerűbb módja, ha megváltoztatja a típusunk méretét test>Betűméret tulajdonság:
Csak a @media képernyő és (max. szélesség: 400 képpont) {
body {font-size: 90%;}
}
Hála annak, hogy kezdetben az összes típusunkat méreteztük em-ekkel, ezt a változást az egész vonalon egyetlen sorral tudjuk végrehajtani. Igen, a relatív típusú méretezéshez!
04. Felfelé haladás
Ha úgy teszünk, mint a webdesignerek, és továbbra is nagy méretűre méretezzük át a böngészőablakunkat, akkor a viszonylag nagy méretű tárolónk folyamatosan növekszik, és a szövegünk elmozdul. Pont azt, amire számíthat. De figyelje a vonal hosszát. Mikor kezd túl sokáig kinézni és érezni?
Körülbelül 800 pixel szélességgel (a böngésző teljes ablakméreténél) a vonalak hossza kellemetlenül hosszúnak tűnik. Jó időnek tűnik egy újabb töréspont hozzáadása a típusunkhoz.
Csak a @media képernyő és (max. szélesség: 800 képpont) {
body {font-size: 100%;}
}
Csak a @media képernyő és (max. szélesség: 1100 képpont) {
törzs {font-size: 120%;}
}
Így néz ki most oldalunk 800 és 1100 képpont közötti szélességű ablakok esetén. Kicsit több helyünk van a munkára, és most a típusunk egy kicsit szebben tölti be:
Ezúttal két médiakérdést írunk. Az egyik maximális szélessége 800 pixel, a test betűmérete 100% -ra van állítva, amely mindent lefed egy 500 pixeles és 800 pixeles ablakszélesség között. Ezután egy másodpercig, amikor az ablak szélessége meghaladja a 800 pixelt, így növelhetjük az alap betűméret.
Az alap betűméretet 120% -ra növeltem, ha 800 pixel szélességben haladunk át, hogy a vonalhossz egy kicsit nagyobb legyen, ahol tetszik. Ez természetesen kissé szubjektív, és magától a tartalomtól és a környező tartalomtól is függ. Válasszon olyan töréspontokat és méretváltozásokat, amelyek ésszerűek Önnek és a tervezésének. A kényelmes olvasás és a kiegyensúlyozott elrendezés a cél itt. Az elrendezések tesztelése nem csupán egy átméretezett asztali böngészőben segít elérni a legjobb helyeket ezekhez is.
05. Fel és fel!
Sejtheti, hogy mi következik, folyamatosan bővítem a böngészőablakomat, és meglátom, mi történik. Nem meglepő, hogy a vonalhosszak egyre hosszabbak, és ismét elkezdenek megközelíteni az elviselhetetlen hosszúságot 1100 képpont körül. Ideje egy újabb töréspontnak? Csak folytathatnánk így a végtelenségig, de ez nem tűnik olyan okosnak, ez kezd végtelennek tűnni!
Technikailag az Ön típusa továbbra is végtelenül skálázható. Nagy eséllyel azonban az Ön elrendezése, a képei pedig nem. Valamikor fel kell tennünk a szüneteket. És ehhez az egyszerű bemutatóhoz úgy döntöttem, hogy a pont 1100 képpont.
Egy utolsó, a típushoz kapcsolódó média lekérdezést kell írni. Szeretnék valamit, ami megakadályozza a vonalhosszak növekedését, hogy ilyenkor lefagyaszthassuk a dolgokat, ahol elfogadható vonalhosszunk van. Ennek legegyszerűbb módja, ha maximális szélességet teszünk a szövegünket tartalmazó div-re.
Először meg kell határoznunk a tartalmunkban lévő div-ek hozzávetőleges szélességét pixelben. Ha a böngészőablakunk 1100 pixel széles és a wrap div szélessége 70%, akkor a matematika egy kis része azt mondja, hogy divink körülbelül 770 pixel széles. (1100 *. 7x).
Ezzel felvértezve így szerkesztjük az utolsó média lekérdezésünket:
Csak a @media képernyő és (min-width: 1100px) {
törzs {font-size: 120%;}
.wrap {max-width: 770px;}
}
A bemutatónk típusa akkora, mint amilyennek eldöntöttük, hogy megengedett:
Itt van. Egyszerű technika, amellyel szép és kényelmesen elolvashatja típusát a különböző méretű képernyőkön.
06. Összegezve az egészet
Még ebből az egyszerű példából is valószínűleg azt kezdi látni, hogy sokkal részletesebben megtudhatja, hogy hová adjon töréspontokat a típusához a vonal hosszának szabályozásához. Akkor mi a helyzet a vezetéssel és a hierarchiával? Ezeket a tároló és a típusméret megváltozása is befolyásolja. Annyi mindent figyelembe kell venni!
Tartsa szemmel a típusát, majd végezzen olyan beállításokat, ahol van értelme az elrendezésnek és a projektnek. Nem arról van szó, hogy hány média lekérdezést vagy töréspontot ad hozzá. Arról szól, hogy a design szilárd legyen az Ön és bárki számára, aki használja.
07. További olvasmány
Ez az egyszerű bemutató csak a jéghegy csúcsa. Ha az adaptív webdesign tipográfiájáról többet szeretne megtudni, akkor itt van néhány ajánlott olvasmány:
- Tim Brown csodálatos munkát végez technikák és elgondolkodtató dolgok összegyűjtésére a szép webes típusoknál.
- A webes méret méretezésének lehetőségeiről nemcsak a százalékok és az emmek vannak. Ethan Marcotte mindezt elmagyarázza a Typekit blogon.
- Nehéz olyan típusú beszédet folytatni, hogy ne fecsegjen a vertikális ritmus kialakításáról. Ez a klasszikus, 24 módon megjelenő cikk remekül illeszkedik az ötlethez.
Val Head tervező és tanácsadó, aki szereti, ha az internet a lehető legfélelmetesebb marad. Futja a Web Design Day-t, ír a CreativeJS-nek és a valhead.com blogjainak.
Tetszett ez? Olvassa el ezeket!
- Mi a tipográfia?
- Töltse le a legjobb ingyenes betűtípusokat
- Ingyenes graffiti betűtípus kiválasztás
- Ingyenes tetoválás betűtípusok a tervezők számára
- A legjobb ingyenes webes betűtípusok a tervezők számára
