Forståelse Typografi Skrive til internettet
I webdesign er emnet for typografi vigtigt, når man overvejer alle områder af brugeroplevelse. Hvert websted har brug for tekst, og der er retningslinjer, du kan følge for at opbygge usædvanligt fantastiske layouter. Gitterlinjer, bogstaver, skrifttypehøjde, tekstafstand, farveskemaer og andre lignende egenskaber bør alle tages i betragtning.
I denne artikel vil jeg gerne dykke ind i retten til webtypografi. Vi undersøger populære ideer bag design af troværdige webside tekster. Langs vejen vil jeg introducere nogle få nyttige CSS3 egenskaber hvilke designere glemmer ofte.
Jeg har forsøgt at lægge mere fokus på teori og ideologier til internettet. Dette giver et bredere fokus på digital tekst generelt, og du kan webdesigneren derefter vælge hvilke stilarter der skal anvendes til hvilket formål. Kontekst er altid nøglen, og du skal bestemme dette korrekt for hvert projekt, du arbejder på. Overvej denne vejledning en referencepakke, der er fuld af moderne webtendenser fra typografiske innovatører over hele verden.
Mål dine afsnit
Du behøver ikke at buste yardstangen til denne slags måling. Faktisk refererer måleen i forhold til typografi til bredden (vandret) af et hvilket som helst afsnit på din side. Det er ikke et emne, der altid drøftes, men det påvirker læsbarheden af dit indhold. Som en generel tommelfingerregel vil du begrænse en enkelt linje omkring 75-85 tegn i længden (ikke nødvendigvis inklusive mellemrum).
Nu kan det virke som lidt af en strækning for nogle bredere layouter. Især hvis dit design er flydende og skal tilpasses, da brugeren omformaterer deres browservindue. Du kan altid indstille en CSS max-bredde ejendom på dit hovedindhold div. Kodningsmarginer og skrifttypestørrelser i skalerbare enheder (procentdele, ems) i stedet for pixels giver mulighed for sådan fleksibilitet inden for ethvert layout.
Der er ingen maksimal måleenhed at være forsigtig med. Hvordan du skriver indhold og former ord i sætninger er meget vigtigere end bredden af hver linje. Men husk at længere sætninger er meget sværere at læse i forhold til kortere, præcise udtalelser.
Ledende Forklaret
Ved udformningen sammen med dit afsnit må du også overveje ideen om førende. Ordet udtales “ledd-ing”, såsom bly anvendt i blyanter. Dette navn stammer fra de ældre dage med mekanisk sætning, hvor strimler af bly blev placeret i mellem tekstlinjer.
Ledende er stadig et meget vigtigt koncept i webdesign og går hånd i hånd med stykkeforanstaltninger. Da dit afsnit bredde øges, skal du anvende en tilsvarende stigning i mængden af førende eller mellemrum mellem tekstlinjer. Denne ekstra plads gør læsningen meget lettere på dine øjne.
Hvis du skulle skimme igennem meget tæt sårt tekst, kan det være svært at fokusere på en enkelt linje. Hvis dette er tilfældet, prøv at øge mængden af ledende med CSS linjehøjde ejendom. Du vil altid have mere plads mellem tekstlinjer end mellem ord. Ellers kan dine tekstblokke vises som avisudskrivning og vil ikke være meget brugervenlige at skimme igennem.
En solid teknik er at anvende mere plads end oprindeligt nødvendigt og reducere det om nødvendigt. Ikke alle tekst er skabt ens, og du har sikkert brug for afsnit med forskellige interne formateringer som fede ord, anker links, understreger mv. Med nogle ekstra ledninger vil disse ændringer ikke føle sig så ubalance i forhold til den anden tekst.
Brug naturlige skrifttypestørrelser
Der er stadig en håndfuld websteder, der vælger at holde sig til mindre end gennemsnittet skriftstørrelser. 11px-12px kan synes at være meget mere af “standard professionel” til forretningsopstillinger. Men disse størrelser hjælper ikke de fleste besøgende, der søger specifikke oplysninger.
Generelt web browsere standard til 16px hvis du ikke anvender nogen CSS regler. Selv dette kan betragtes som lidt lille, hvis du har ekstra plads i dit layout for at rumme større tekst. Større skriftstørrelser ser bare pænere ud og er meget nemmere at skumme for relative søgeord. Serif skrifttyper vælges ikke ofte som afsnit materiale, men du kan stadig komme væk med dem. Jeg foreslår at bruge meget større tekststørrelser til serifbaserede skrifttyper for at forbedre læsbarheden og gøre opmærksom.
Reagere på brugerens miljø
Når du prøver forskellige skrifttypefamilier og -størrelser, skal dit indholdsområde tilpasses i overensstemmelse hermed. Standardenheden jeg holder fast ved er ems da de let kan omformes på baggrund af den ledige plads og skærmopløsning. Dette optimerer ydeevnen på brugerens ende, som er vigtigst.
Men når du har så fleksibelt indhold, gør det dit layout tilbøjelig til et buggy udfald. Indhold i dit sidefelt eller sidebjælkeområde kan ende med at blive skævt eller ubalanceret i nogle browsere. Eller du kan have svært ved at fremhæve billeder eller andre former for medier i din hovedtekst. Der er nogle andre alternativer til at bruge ems, hvis du har brug for et fast layout - men prøv begge løsninger for at se, hvilken du kan lide bedst.
Husk at faste bredder og stykkestørrelser vil låse mange af indstillingerne i dit design. Det er fantastisk til indhold, der indeholder mange stationære æstetiske effekter - tænk baggrundsbilleder eller masser af monterede sidebar widgets. Det er også en simpel proces at opbygge et væskeindholdsområde i den venstre kolonne med faste sidebjælker til højre.
Style baseret på kontekst
Nogle andre rigtig pæne CSS-tricks er blevet skjult fra det almindelige design. Specielt er der tendenser kopieret fra printarbejde, der kan anvendes i den rette sammenhæng.
Mange webdesignere har aldrig engang brugt CSS-egenskaben for tekstindrykning. Du angiver en værdi for at indrykke den første linje i et afsnit, der er målrettet mod denne regel. Enheder følger standardtekstindstillingerne som pixler, point, ems, procentsatser ... Det er bestemt ikke en trend, du finder i de fleste blogs. Men det giver en god siderytme, mens du læser gennem store tekstblokke.
Der er en anden type CSS vælger kendt som en pseudoelement. Dette kan målrette en bestemt del af enhver indholdsvælger. CSS3: første bogstav pseudo vælger er perfekt til at skabe fancy stilarter på vigtige afsnit. Du kan jazz op hvert afsnit åbningsbog - ligner en ret historie storybook - ved at bruge fed, kursiv eller endda ændre skrifttypen. Tjek dette smukke eksempel på drop caps, som indeholder nogle ekstra CSS-kode, du kan bruge.
Spille med brevafstand
Jeg er sikker på, at mange af os har hørt begrebet sporing før endnu ikke forstået, at det er den samme idé som CSS letter-spacing egenskaben. Disse to begreber er ét i samme, der er relateret mellem print og digital typografi. Enheden vedrører mellemrummet mellem bogstaver inden for en enkelt tekstlinje. Dette er en rigtig pæn effekt at anvende på overskrifter og endda nogle mindre indholdsblokke på dit websted.
Det er vigtigt ikke at forveksle vilkårene mellem bogstav og afstand. Begge er relateret til typografi og afstanden mellem bogstaver. Men kerning refererer specifikt til afstanden mellem 2 individuelle bogstaver i et ord. Brevafstandsegenskabet gælder for et helt element af tekst, det være sig et ord eller et afsnit eller et overskrift eller et ankerlink. Husk det, når du spiller rundt med nye ideer til stilarter.
Jeg bruger ofte et par pixel / punkter af brevafstand i overskrifter med alle hovedstæder. Dette bryder op de enkelte tegn med lidt ekstra plads og vises også som en meget defineret “overskrift” se. Negativ brevafstand fungerer også godt i den rigtige sammenhæng. Jeg holder normalt til mindre enheder, måske -0.03em eller -0.1em højst.
Kombinere og matchende skrifttyper
Designkoncepterne bag webtypografi er bestemt en kunstform, ikke så meget af videnskaben. Der er retningslinjer, du kan følge, men der er ingen faste regler, som du er begrænset til. Det betyder, at du har en enorm mængde frihed til at eksperimentere med at blande og matche de forskellige skrifttyper, du har adgang til.
Langt den mest populære kombination af skrifttyper inkluderer en serif / sans-serif split for overskriften og afsnit indhold. Jeg kan godt lide at skifte begge dele, men oftere bruger jeg serif skrifttyper i overskriftsafsnittene. De ekstra markeringer og streger på hvert brev gør dem til at virke flatterende som den dominerende sidetekst.
Desuden er sans-serif-skrifttyper renere og lettere at skrumpe sammen i sætninger. Det er ikke at sige serif skrifttyper vil ikke fungere i afsnit. Faktisk er der masser af gode eksempler! Men et mindre kendt koncept med navnet x-højde er afgørende for at skelne kompleksiteten af et skrifttype. Fra at se på basislinjen for et par ord, vil du hente hvordan sådanne skrifttyper vil “passe ind” med hinanden.
Det er også værd at bemærke betydningen af plads mellem disse forskellige elementer. Du vil sandsynligvis bruge 2 eller 3 forskellige header stilarter, så hver af disse vil komme ud med et forskelligt udseende. Jeg har tendens til at holde mine h2 / h3 elementer lidt tættere på følgende afsnit blok, da det indebærer en sammenhæng mellem indholdet.
Denne sammenhæng er især nyttig, når du bruger to helt forskellige skrifttyper ved siden af hinanden. Jeg anbefaler ikke mere end 3 forskellige skrifttypefamilier pr. Sæt indhold. Efter alt for mange tilpasninger synes dine ord jumbled sammen, og hele siden kommer ud som en hodgepodge af misforståede skrifttyper.
Konklusion
Det er mit håb, at disse begreber vil kaste lys over det komplicerede emne for digital typografi. Det kan være svært at komme ind i arbejdet som designer, især hvis hele emnet er fremmed for dig. Men fortsæt med at studere og sørg for at øve en hel masse!
Næste uge: Bliv afstemt, da vi ser på nogle nyttige værktøjer og ressourcer for bedre webtypografi.
Mere…
Her er flere typografi relaterede indlæg:
- Fremvisning af webdesign med smuk typografi
- Bedre typografi til moderne websites
- Hurtig guide til typografi: Lær og bliv inspireret
