Einföld leiðarvísir til Móttækilegur ritgerð
Mikill meirihluti greinar sem fjalla um móttækilegan hönnun áherslu á tvö megin svið: vökva, sveigjanlegt rist og vökva, sveigjanleg myndir. Hvað margir þeirra tala ekki um er leturfræði.
Og enn, fyrir meirihluta vefsvæða er textinn, efnið, mikilvægasti þátturinn.
Leyfilegt, fyrir síður þar sem myndir eða myndskeið eru aðal innihaldið, móttækilegur gerð er svolítið minna mikilvægt en það ætti samt ekki að gleymast.
Góðu fréttirnar eru þær að móttækilegur leturfræði er ekki sérstaklega erfitt að ná. Við þurfum bara að taka smá tíma til að hugsa um hvernig tegund okkar ætti að bregðast við breytingum á skjástærð og síðan framkvæma þær breytingar.
Meginreglur móttækilegrar tegundar
Það eru tveir meginreglur til að búa til skilvirkar móttækilegar leturgerðir. Fyrsta er resizable tegund. Það þýðir tegund sem ekki aðeins breytist miðað við stærð skjásins, en það er einnig breytt af notanda.
Annað er bjartsýni lína lengd, sem viðhalda læsileiki. Það þýðir að fyrir suma skjái, að halda innihaldssvæðinu minni og línulengdin styttri gerir það meira vit, þótt innihaldið sé fræðilega hægt að teygja breiðari.
Resizable tegund með rems
Flestir hönnuðir nota annaðhvort punkta eða ems til að límta gerð þeirra. Ems eru betri kostur, þar sem þeir leyfa notendum að breyta stærð tegundar í vafranum sínum. En ems eru miðað við foreldraþáttinn, sem þýðir að þeir eru flóknari að nota en pixlar, sem aðeins eru samsettar í móttækilegri hönnun þar sem fleiri stærðir og sambönd eru til staðar til að fylgjast með.
Rems bjóða upp á betra val til ems. Þeir vinna á næstum eins hátt, nema fyrir einn lykil munur: rem einingar eru miðað við html þáttur, frekar en einstakar foreldriþættir. Þetta gerir viðhalda réttri límvatn af gerðinni þinni miklu betra.
Einingarnar eru nú studdar í öllum helstu nútímavísunum, þar á meðal Opera frá útgáfu 11.6 og IE9. Þó að þú gætir viljað fela í sér fallbacks fyrir fyrri vafra, þá er breiður stuðningur fyrir straumar að nota þau núna.
Þar sem þú notar straumspilaraeiningar fyrir gerð límvatns skaltu ganga úr skugga um að þú setjir endurstillingu á þinn html þáttur og ekki þitt body þáttur. Svo ætti það að líta svona út:
html { font-size:100%; }
Nú er einingarnar þínar beittar á sjálfgefin leturstærð fyrir tækið.
Næst þarftu að tilgreina leturstærðina fyrir hvern skjástærð. Ég mæli með að gera tilraunir með raunverulegum leturstærðum á ýmsum tækjum til að sjá hvað lítur best út. Það er að miklu leyti háð því leturgröftum sem þú hefur valið, svo og heildarhönnun þína.
Þú munt líklega vilja til að tilgreina margar leturstærðir byggðar á mismunandi skjástærðum, sem er frekar beint framsækið. Sem dæmi má sjá að CSS þín gæti litið svona út:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Leyfð, þetta er einfaldað kóða fyrir þessa grein, en gefur þér upphafspunkt. Þú gætir tekið eftir því að fyrir smærri skjái sést aðeins stærri leturstærð. Þetta er vegna þess að stærri leturstærð er almennt auðveldara að lesa á litlum skjáum.
Auðvitað viltu gera frekari upplýsingar um hluti eins og þinn h1 þætti og svo. Ég mæli mjög með því að nota tól eins og Vefur leturgerð til að sjá hvernig gerðin muni líta út.
Viðhalda bestu línulengdum
Þó að resizable gerð er frekar einfalt hugtak, heldur rétti línulengdir yfir mörgum tækjum að verða svolítið tricker. Það hefur verið svolítið umræðu um hvað besta línulengdin er fyrir læsileiki, en samkvæmt Baymard Institute , samstaða virðist vera einhvers staðar á milli 50 og 75 stafir á línu.
Þeir mæla einnig með því að nota ílát með föstum breiddum fyrir efnið þitt, en það eyðir tilgangi móttækilegrar hönnun, þannig að við þurfum að nálgast hlutina svolítið öðruvísi ef við viljum viðhalda svörun með bjartsýni línu lengd.
Í fyrsta lagi líta á mismunandi skjástærðina sem þú munt hanna fyrir og reikna út hvaða stærð letur sem þú ættir að nota til að fá u.þ.b. 50 stafi á línu. Fyrir mjög litla skjái gætir þú þurft að fara undir 50 stafir á línu til að viðhalda læsileg leturstærð, en 50 ætti að vera markmiðið. Þetta gefur okkur gott upphafspunkt fyrir leturstærð okkar.
Við ættum einnig að stilla hámarksbreidd (eða brotstig) fyrir svæði fyrir texta innihald. Horfðu á stærð tegundarinnar sem þú notar í tiltekinn skjástærð og ákvarðu síðan breidd efnis ílátsins þegar þú hefur u.þ.b. 75 stafir á línu. Þetta mun ekki vera nákvæm nema að þú hafir notað monospace letur, en þú ættir að vera fær um að koma með meðaltali frekar auðveldlega. Það verður hámarks ílát breidd okkar.
Segjum að sjálfgefið leturstærð fyrir tiltekið tæki er 16px og þú vilt að leturstærðin þín sé 20px (segjum að við notum serif leturgerð eins og Droid Serif fyrir þetta dæmi). Það þýðir að þú tilgreinir tegundina sem er 1.25rem. Í þeirri stærð þarftu að hafa ílát breidd um 675px á breidd. Þetta gefur okkur stafatölu á 60s að meðaltali, sem er rétt í markbreidd okkar.
Til að tilgreina ílátbreiddina skaltu bara nota þennan kóða:
@media (min-width: 950px) { .container {width:675px;} }
Þú getur stillt þær hámarkslínubreiddar fyrir hverja skjástærð, eða bara fyrir tiltekna sjálfur. Með minni skjái gætirðu viljað láta ílátið breiða út og láta gerðina breiða yfir alla breidd skjásins.
Nú, með miklu stærri skjái, gætirðu viljað líta á að skipta efni þínu í marga dálka. Segjum til dæmis að þú sért með iPad í landslagsmynd. Skjábreidd þín er 2048 punktar. Að teygja línurnar til að fylla skjáinn gerir það erfitt að lesa en miðstöðvun efnisins og að halda línulengdum þínum styttri er ósigur í því skyni að skoða efni í landslagstillingu.
Svo skaltu setja tegundina í tveimur dálkum (eða jafnvel þrír, allt eftir leturstærðinni þinni). CSS3's multi-dálkur forskrift gerir það mjög auðvelt að skipta texta þínum í marga dálka án þess að þurfa að breyta öllu skipulagi þínu. Sameina það við fjölmiðlafyrirspurnir og þú ert nú með efnisskipulag sem skiptir í tvo eða þrjá dálka fyrir stærri skjái og heldur bæði mjög læsilegri stærð og mjög læsilegan línulengd.
Aftur er kóðinn til að gera þetta frekar einfalt:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Nú, á skjájum sem eru stærri en 1140 punktar á breidd, færðu efnið þitt í tvo dálka og gerir línulengdina miklu læsilegri.
Nota aðra leturgerðir
Eitt sem oft gleymist þegar talað er um móttækilegur leturfræði er sú hugmynd að mismunandi leturgerðir mega ekki virka vel í mismunandi stærðum. Þetta á sérstaklega við um leturgerðir.
Þýðir það að þú ættir að forðast að nota þessi leturgerðir í móttækilegum hönnun? Auðvitað ekki. Í staðinn, tilgreindu bara mismunandi leturgerðir fyrir ýmsa þætti í stærri eða minni skipulagi.
Til dæmis, með hönnun fyrir fartölvur, gætirðu viljað nota leturgerð eins og League Script fyrir hausana þína. En á minni skjá, eins og iPhone, verður þú annað hvort að gera það svo stórt að það ríki innihaldinu, eða það verður mjög erfitt að lesa.
Það sem við getum gert hér er að nota League Script fyrir stærri skjái (iPad, skrifborð osfrv.), En skipta yfir í stærri útgáfu af líkams letur fyrir smærri skjái (eins og iPhone eða aðrar smartphones).
Til að gera þetta, þá viltu einfaldlega tilgreina eitthvað sem þetta:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Auðvitað getur þetta verið gert fyrir meira en bara fyrirsagnirnar þínar líka.
Niðurstaða
Þó að móttækileg hönnun hefur að miklu leyti beinast að myndum og heildarútliti, er leturfræði jafn mikilvægt og bæði af þeim hlutum. Það besta er að það er ekki sérstaklega erfitt að laga og fínstilla leturgerð þína fyrir móttækilegri hönnun.
Það er mikilvægt að þú setir sömu tíma og fyrirhöfn í það sem þú setur inn í aðra þætti í hönnun þinni. Viðhalda læsileika texta innihaldsins er mikilvægur þáttur í því að skapa bestu notendaviðmót fyrir gesti.
Leggja þú eins mikið áherslu á móttækilegur leturfræði í hönnun þinni sem þú gerir móttækilegan net og myndir? Hvers vegna eða hvers vegna ekki?