Tüpograafia mõistmine veebi kirjutamiseks
Web Designis on tüpograafia teema oluline, kui arvestada kõiki kasutaja kogemusi. Igal veebisaidil on vajadus teksti järele ning on juhised, mida saate järgida, et luua erakordselt uimastamise skeeme. Arvesse tuleb võtta ruudustikku, tähti, kirja kõrgust, tekstivahemikku, värviskeeme ja muid sarnaseid omadusi.
Selles artiklis tahaksin sattuda veebitüpograafia valdkonda. Me vaatame populaarsed ideed usaldusväärsete veebilehtede tekstide kujundamisel. Mööda teed paar kasulikud CSS3 omadused mida disainerid sageli unustavad.
Olen püüdnud rohkem keskenduda veebi teooriale ja ideoloogiatele. See annab laiema fookuse digitaalsele tekstile üldiselt ja teie, veebidisainer saavad seejärel valida, milliseid stiile millisel eesmärgil kasutada. Kontekst on alati võtmetähtsusega ja selle peate iga projekti puhul, mida töötate, asjakohaselt kindlaks määrama. Mõtle sellele juhendile viitepakett, mis on täis tänapäeva veebi suundumusi tüpograafilistelt uuendajatelt kogu planeedil.
Mõõtke oma lõiked
Sellise mõõtmise jaoks ei pea te õue kinni pöörama. Tegelikult viitab tüpograafiaga seotud meede iga lehel oleva lõigu laiusele (horisontaalselt). See ei ole teema, mida alati arutatakse, kuid see mõjutab teie sisu loetavust. Üldise rusikareeglina soovite piirata üksikut rida umbes 75-85 tähemärki pikkusega (ei pruugi sisaldada tühikuid).
Nüüd võib see tunduda natuke laiemate paigutuste jaoks. Eriti kui teie disain on vedel ja mõeldud kohandama, kui kasutaja oma brauseri akna suuruse ümber suurendab. Saate alati määrata CSS maksimaalne laius vara teie põhisisu div. Marginaalide ja fondisuuruste kodeerimine skaleeritavates üksustes (protsendid, ems), mitte pikslid, võimaldab sellist paindlikkust mis tahes paigutuse korral.
Maksimaalne mõõtühik ei ole ettevaatlik. Kuidas kirjutada sisu ja vormi sõnu lauseteks on palju olulisem kui iga rea laius. Kuid pidage meeles, et pikemaid lauseid on palju lühemate lühikeste avaldustega võrreldes palju raskem lugeda.
Juhtiv selgitus
Projekteerimisel, koos oma lõike meetmega, peaksite kaaluma ka ideed juhtiv. Sõna hääldatakse “ledd-ing”, nagu pliiatsides kasutatav plii. See nimi pärineb vanematest mehaaniliste kirjete päevadest, kus tekstiribadesse paigutati pliidribad.
Juhtimine on veebidisainis endiselt väga oluline kontseptsioon ja see käib käsikäes lõikemeetmetega. Kui teie lõigu laius suureneb, peaksite rakendama võrdset suurendust juhtiva summa või tekstirida. See lisaruum muudab lugemise silmadele palju lihtsamaks.
Kui sa tahaksid väga tihedalt haavata teksti, siis võib olla raske keskenduda ühele reale. Kui see nii on, proovige CSS-iga suurendada juhtimise määra reakõrgus vara. Sa tahad alati rohkem ruumi tekstiridade vahel kui sõnade vahel. Vastasel juhul võivad teie tekstiplokid ilmuda ajalehe printimisel ja ei ole väga kasutajasõbralikud.
Tahke tehnika on rakendada rohkem ruumi kui algselt vaja, ja vajadusel seda vähendada. Mitte kõik tekstid ei ole loodud võrdseks ja vajate kindlasti erinevaid sisemisi vorminguid, nagu julged sõnad, ankurlingid, allajoonid jne. Mõnede lisavõimalustega ei tunne need muudatused tasakaalust välja teise tekstiga võrreldes.
Kasutage looduslikke fondi suurusi
On veel käputäis veebisaite, mis valivad keskmisest väiksemate fontide suuruse. 11px-12px võib tunduda palju rohkem “standardne professionaal” ärimudelite jaoks. Kuid need suurused ei aita enamikku külastajaid, kes otsivad konkreetset teavet.
Üldiselt on veebibrauserite vaikimisi 16px, kui te ei kasuta ühtegi CSS-reeglit. Isegi seda võib pidada pisut väikeseks, kui teil on paigutuse lisaruum, mis mahutab suurema teksti. Suuremad fondi suurused näevad lihtsalt ilusamad ja suhteliselt märksõnade jaoks palju lihtsamini koorida. Serif-fonte ei valita sageli lõikematerjalideks, kuid te saate nendega endiselt ära saada. Ma soovitan kasutada tunduvalt suuremat teksti suurust serifipõhistele fontidele, et parandada loetavust ja juhtida tähelepanu.
Vastake kasutaja keskkonnale
Kui proovite erinevaid fontide perekondi ja suurusi, peab teie sisupiirkond seda vastavalt kohandama. Standardne seade, millega ma kinni panen, on ems kuna need võivad saadaoleva ruumi ja ekraani eraldusvõime põhjal kergesti ümber suuruse. See optimeerib kasutaja lõpptulemust, mis on kõige olulisem.
Aga kui sul on nii paindlik sisu, muudab see teie paigutuse kalduvaks. Teie jaluse või külgriba ala sisu võib mõne brauseri puhul lõppeda viltuse või tasakaalustamatusega. Või võib teil olla raskusi piltide või muude meediavormide ülesehitamisega teie põhitekstis. Kui teil on vaja fikseeritud stiilis paigutust, on ems kasutamisel veel mõningaid alternatiive, kuid proovige mõlemat lahendust, et näha, mis teile kõige paremini meeldib.
Pidage meeles, et fikseeritud laiuse ja lõike suurused lukustuvad paljudes teie disaini sätetes. See on suurepärane sisu, mis sisaldab palju statsionaarseid esteetilisi efekte - mõtle taustapilte või palju paigaldatud külgriba vidinaid. Samuti on lihtne protsess vedelikusisalduse ala ehitamiseks vasakpoolsesse veergu fikseeritud külgribadega paremale.
Kontekstil põhinev stiil
Mõned teised tõeliselt puhas CSS-nipid on peidetud tavapärasest disainist. Täpsemalt on trükitööst kopeeritud trende, mida saab kasutada õiges kontekstis.
Paljud veebidisainerid ei ole kunagi kasutanud teksti sisestamise CSS-i omadust. Sa annad väärtuse, et sisestada mis tahes lõigu esimene rida, millele see reegel on suunatud. Ühikud järgivad tavapäraseid tekstivalikuid, nagu pikslid, punktid, ems, protsendid ... See pole kindlasti enamikus blogides leitud trend. Kuid see annab suurepärase lehekülje rütmi lugemise ajal suurte tekstiplokkide kaudu.
On veel üks CSS-tüüpi valija, mida tuntakse kui a pseudoelement. See võib sihtida mis tahes sisu valija teatud osa. CSS3: esimese tähega pseudo-valija sobib ideaalsete stiilide loomiseks tähtsates lõigetes. Iga jao avamiskirja saab sarnaselt päris jutuvihmale jazzida, kasutades julgeid, kaldkirju või isegi kirjatüüpi. Vaadake seda ilusat näpunäiteid, mis sisaldavad mõnda täiendavat CSS-koodi, mida saate kasutada.
Mängib kirjavahega
Ma olen kindel, et paljud meist on kuulnud mõistet jälgimine enne, kui pole kunagi aru saanud, et see on sama mõte nagu CSS-i kirjavahed. Need kaks mõistet on ühesugused, mis on seotud printimise ja digitaalse tüpograafia vahel. Seade on seotud tähedevahelise tühikuga ükskõik millises tekstireas. See on tõesti puhas efekt, mida rakendatakse pealkirjadele ja isegi mõnele väiksemale sisuplokile teie saidil.
Tähtis on mitte segi ajada tähtede vahekaugust kerningiga. Mõlemad on seotud tüpograafia ja tähtede vahega. Kuid kerning viitab konkreetselt sõnade vahelisele kahe üksiku tähe vahele. Kohaldatakse kirja vahekaugust kogu element tekstist, olgu see siis sõna või lõik või päis või ankur. Pidage seda meeles, kui mängite uusi stiile ideid.
Kasutan sageli mõningaid piksleid / punktid tähtede vahel kõigis pealinnades. See lõhub üksikud tähemärgid mõningase lisaruumiga ja on samuti väga määratletud “rubriiki” vaata. Negatiivsed kirjavahed toimivad ka õiges kontekstis suurepäraselt. Tavaliselt jäävad ma väiksematele üksustele, võib-olla -0.03em või -0.1em.
Kirjatüüpide ühendamine ja sobitamine
Veebipõhise tüpograafia taga olevad disainikontseptsioonid on kindlasti kunstiliik, mitte niivõrd teadus. On olemas suunised, mida saate järgida, kuid ei ole kindlaid reegleid, millega te olete piiratud. See tähendab, et teil on tohutu vabadus katsetada segamist ja sobitada erinevaid fonte, millele teil on juurdepääs.
Kõige populaarsem kirjatüüpide kombinatsioon sisaldab päise ja lõike sisu serif / sans-serif jaotust. Mulle meeldib mõlemad sisse lülitada, kuid sagedamini kasutan päiseosades seriffonte. Iga tähise lisamärgised ja löögid muudavad need ilmekamaks kui domineeriva lehekülje teksti.
Lisaks on sans-serif-fondid puhtamad ja kergemini laastavad. See ei tähenda, et serif-fondid ei toimi lõigetes. Tegelikult on palju suurepäraseid näiteid! Kuid kirjatüübi keerukuse eristamiseks on äärmiselt oluline vähetuntud kontseptsioon x-kõrgus. Paari sõna baasjoone vaatamisest saate selle, kuidas sellised fondid hakkavad “sisse mahtuma” üksteisega.
Samuti väärib märkimist ruumi tähtsus nende erinevate elementide vahel. Tõenäoliselt kasutate 2 või 3 erinevat päise stiili, nii et igaüks neist väljub erineva välimusega. Kaldun hoidma oma h2 / h3 elemente veidi lähemal järgmisele lõikeplokile, sest see tähendab, et sisu vahel on korrelatsioon.
See korrelatsioon on eriti kasulik, kui kasutate kahte täiesti erinevat kirjatüüpi üksteise kõrval. Soovitan mitte rohkem kui 3 erinevat fontide perekonda sisu komplekti kohta. Pärast liiga palju kohandusi ilmuvad teie sõnad kokku ja kogu leht ilmub välja nagu valesti tõlgitud fonte..
Järeldus
Ma loodan, et need mõisted valgustavad digitaalse tüpograafia keerulist teemat. See võib olla raske tööle disainerina sattuda, eriti kui kogu teema on sulle võõras. Aga kas jätkate õppimist ja harjutage kindlasti terve kobar!
Järgmine nädal: Hoidke häälestatud, kui vaatame mõningaid kasulikud vahendid ja ressursid parema veebi tüpograafia jaoks.
Veel…
Siin on rohkem tüpograafiaga seotud postitusi:
- Ilusat tüpograafiat sisaldavate veebidisainide esitlus
- Parem tüpograafia kaasaegsetele veebisaitidele
- Kiirjuhend tüpograafiale: õppige ja inspireerige
