Hvordan laver din type mere tiltalende på internettet
Det er ikke ualmindeligt for en designer i dagens verden at være lidt opmærksom på, hvilken type der er lagt ud, især med de stadig så bekvemme standardindstillinger af overskriftskoder og websikker skrifttyper, der findes universelt på nettet.
Hvis vi som interaktive designere er i stand til at tage lidt mere tid, når det kommer til typografi, end resultaterne ville vise et unikt, godt gennemtænkt design som modsætning til en "run of the mill" -oprettelse.
Der er en god chance for, at de fleste designere og designs, du beundrer, viser gode eksempler på typografi.
Jeg vil vise dig et par trin, jeg tager i tweaking set type for at være mere tiltalende end de standard scenarier af 24px H1 tags sammen med 13px sat i Times New Roman.
Afgør ikke for standardindstillingerne, alle gør det.
Her har vi den stadig så almindelige udseende af en overskrift sammen med et stykke af kropskopi at følge. Dette trækker dig ikke lige ind eller sætter dig adskilt fra alle de andre prøver lige som det, ikke? Så for at gøre teksteksemplet mere visuelt tiltalende, skal vi først foretage nogle få ændringer med vores skrifttypevalg.
Vælg en skrifttype, der vil have mere visuel vægt med dit overskrift
Selvom skrifttypevalg ikke er præcis "typografi", er det faktisk en kendetegnende komponent, der hjælper typen på en side, skelner sig fra andre elementer. Med starten af @ font-face er der massive mængder valg til rådighed for designere overalt.
Her har jeg brugt en ekstra kondenseret gotisk stil skrifttype, der let kan findes på et gratis skrifttype site som FontSquirrel.com. Hvis vi stopper og tænker på det, skal navnet "Condensed" betyde noget, for det er faktisk mere tæt end det er normalt bogstilsfamiliemedlem, hvilket er præcis det, vi ønsker ud af et overskrift :, noget der trækker brugeren i og virkelig sætter sig adskilt fra kroppen kopi. Det lykkes helt sikkert at få fat i din opmærksomhed bedre end originalen, men der er et par ting, vi kunne gøre for at forbedre teksten yderligere.
Gør det mere tiltalende med to linjer CSS
Den øjeblikkelige ændring er i bogstaverne; de er alle kapitaliseret nu, men de har nu også negativ kerne mellem hver af bogstaverne (en teknik, der overføres fra avisdesign).
Begge disse egenskaber kan let udføres via CSS, { text-transform: store bogstaver; og brevafstand: -Xpx; }. Ved at gøre disse to linjer værd for kodende ændringer, resulterer det i en betydelig forbedring af visuel vægt, især over originalen.
Træk nogle sidste små tweaks ud
I det næste trin er den skrifttype, der bruges i kroppens afsnit, faktisk ændret til en renere sans-serif, hvilket bedre komplimenterer overskriftsteksten. Vi nærmer os et meget mere visuelt tiltalende design, men der er et par ændringer, vi kan gøre for at rydde det endnu mere.
Som de grønne indikatorer viser, er der ulige marginaler, og hvilke typografer ser ud til at kalde en "forældreløs". Som et enkelt ord, der falder til sidste linje i stykket. Det skaber en meget ulige vægt visuelt i forhold til resten af teksten, og dette problem kan løses nemt ved at omformulere teksten lidt.
Når det kommer til margener, er der ingen regel, at alle skal være lige. Men hvis du starter en ung webdesign karriere, er det god praksis at have lige marginaler igennem, indtil du oplever og lærer teknikker, der giver dig mulighed for at strække sig ud over retningslinjerne for sætning og stadig gøre dit mål visuelt.
Efter at have skabt en mere afbalanceret visuel lærred ved at fjerne forældreløse og justere margenerne kan du se slutresultatet, en velindstillet type prøve, der er behagelig, hvor den ligger.
Hvad er dine bedste tips til webtypografi? Lad os vide i kommentarerne!