Hvordan lage din type mer tiltalende på nettet
Det er ikke uvanlig for en designer i dagens verden å legge liten oppmerksomhet til hvordan typen er lagt ut, spesielt med de stadig enkle standardinnstillingene for overskriftskoder og websikker fonter som finnes universelt på nettet.
Hvis vi som interaktive designere, kan vi ta litt mer tid når det gjelder typografi, enn resultatene vil vise en unik, godt tenkt på design som motsetning til en "run of the mill" -skaping.
Det er en god sjanse for at flertallet av designere og design du beundrer viser gode eksempler på typografi.
Jeg skal vise deg noen få trinn jeg tar i tweaking sett type for å være mer tiltalende enn de vanlige scenariene på 24px H1-koder sammen med 13px satt i Times New Roman.
Ikke sett deg for standardinnstillinger, alle gjør det.
Her har vi den stadig så vanlige utseendet på en overskrift sammen med en del kroppseksempler som følger. Dette trekker deg ikke helt inn eller skiller seg fra alle de andre prøvene akkurat som det, ikke sant? For å gjøre teksteksemplet mer visuelt tiltalende, skal vi først gjøre noen endringer med fontvalg.
Velg en skrift som vil ha mer visuell vekt med overskriften
Selv om skrifttypevalg ikke er akkurat "typografi", er det faktisk en kjernefysisk komponent som hjelper typen på en side å skille seg fra andre elementer. Med begynnelsen av @ font-face, er store mengder valg tilgjengelig for designere hvor som helst.
Her har jeg brukt en ekstra kondensert gotisk stil skrift som lett kan bli funnet på et gratis skriftsted som FontSquirrel.com. Hvis vi stopper og tenker på det, bør navnet "Condensed" bety noe, fordi det faktisk er mer tett enn det er vanlig bokstilfamiliemedlem, noe som er akkurat det vi ønsker ut av et overskrift: noe som trekker brukeren inn og setter seg virkelig bortsett fra kroppskopien. Det lykkes sikkert å ta tak i din oppmerksomhet bedre enn originalen, men det er noen ting vi kan gjøre for å forbedre teksten ytterligere.
Gjør det mer attraktivt med to linjer med CSS
Den umiddelbare forandringen er i bokstavene; De er alle kapitalisert nå, men de har nå også negativ kjerne mellom hver av bokstavene (en teknikk overført fra avisdesign).
Begge disse egenskapene kan enkelt oppnås gjennom CSS, { text-transform: store versjoner; og brevavstand: -Xpx; }. Ved å gjøre disse to linjene verdt av kodende endringer, resulterer det i en betydelig forbedring i visuell vekt, spesielt over originalen.
Trene noen siste små tweaks
I neste trinn er fonten som brukes i kroppsavsnittet, faktisk endret til en renere sans-serif, som bedre komplimenterer overskriftsteksten. Vi nærmer oss en mye mer visuelt tiltalende design, men det er noen få endringer vi kan gjøre for å rydde opp det enda mer.
Som de grønne indikatorene viser, er det ulik marginer og hvilke typografer som å kalle en "foreldreløs". Som er et enkelt ord som faller til siste linje i avsnittet. Det skaper en svært ulik vekt visuelt i forhold til resten av teksten, og dette problemet kan løses enkelt ved å omformulere teksten litt.
Når det gjelder marginer, er det ingen regel at alle må være like. Men hvis du starter en ung webdesign karriere, er det god praksis å ha like margin fram til du opplever og lærer teknikker som gjør at du kan strekke seg utover retningslinjene for typesetting og fortsatt utføre målet ditt visuelt.
Etter å ha skapt et mer balansert visuelt lerret ved å fjerne foreldreløse og justere margene, kan du se sluttresultatet, en godt sett type prøve som er behagelig der den ligger.
Hva er dine beste tips for webtypografi? Gi oss beskjed i kommentarene!