Share
Lære alt om inn og ut av den tekniske siden av typografi er bra. Det vil gi deg en solid jording når du leter etter skrifttyper eller fonter, og vil hjelpe deg å forstå litt mer om selve artikkelen. Du vil snart innse hvor mye hardt arbeid det tar å få type riktig når som helst, ikke bare på nettet.
En av de viktigste aspektene ved typografi på nettet er vertikal rytme - og dette kan også være en av de vanskeligere å få rett, da det ofte tar mye tid og eksperimenter. Det er mange måter å oppnå en god vertikal rytme på en side, selv om noen kan koke ned til hva som føles og ser rett ut til deg på skjermen.
Rhythm er ...
et sterkt, vanlig, gjentatt mønster av bevegelse eller lyd
og jo mer konsekvent og kjent en rytme er, jo bedre og sterkere blir det.
Vi kan søke på nettet med begrepet "vertikal rytme" - i den vestlige kulturen, som vi leser fra venstre til høyre og topp til bunn, vil vi forsøke å holde en konsistent visuell rytme til innholdet på vår side. Å holde vår vertikale rytme konsekvent medfører at vi kan skape en visuelt mer avslappende opplevelse som fremkaller en følelse av kjennskap til våre brukere, fjerner visuelle barrierer og gjør innholdet langt mer lesbart.
Å skape en god vertikal rytme på et webdesign kan være tøft. Målet er å skape et harmonisk forhold mellom alt innholdet (inkludert bilder og tekst) på nettstedet ditt.
For eksempel, hvordan ser avstanden mellom avsnittene ut (er den for stor eller for liten?), Hvor lett finner du det selv å lese? Det er mange spørsmål å spørre, og mesteparten av det vil koble ned til hvor enkelt det er å lese (selv raskt skanne over) innholdet på nettstedet ditt. Selv de minste endringene som gir en bedre leseropplevelse på nettstedet ditt, vil gjøre en stor forskjell for brukerne.
Så nå vet vi hvilken vertikal rytme er, vi trenger å lære litt mer om hva som gir en god vertikal rytme. Nøkkelen her er lesbarhet.
Når du jobber med typografi på nettet, er de to store tingene du vil være oppmerksom på, skriftstørrelser og linjehøyder. Selv om det er så mye annet som går sammen med disse to tingene, er disse dine to hovedkomponenter for å skape en bedre vertikal rytme på sidedesignet. Hvis skriftstørrelsene dine ikke passer godt sammen - for eksempel med massive overskriftsstørrelser og latterlig små kroppsskrift tekststørrelser, for eksempel - så vil dette gjøre innholdet mye vanskeligere å lese eller skanne gjennom raskt. Tilsvarende, hvis innholdet ditt har en linjehøyde som gjør teksten vanskelig å lese - enten ved å være plassert for tett sammen eller for langt fra hverandre - det vil slå av brukerne, når du vil være engasjerende med dem.
Å skape god vertikal rytme i designene kommer med mye praksis, men også mye teori, og noen ganger også matte.
Først må du begynne å se på en grunnlinje (også kjent som et grunnlinje). En basislinje er standardlinjens høyde som du vil basere din vertikale rytme på - og derfra kan du begynne å bruke denne grunnlinjen for å hjelpe deg i linjehøyder for alle de andre skrifttyper og innhold i designen din.
Trent Waltons nettside er et glimrende eksempel på god vertikal rytme i design. Når du arbeider med en grunnlinje, er det en god ide å gå med linjehøyden til den mest brukte eller primære skriftstørrelsen i designet. Det enkleste eksempelet jeg kan tenke på, er å tenke på din hovedbaserte skriftstørrelse på 100% (som tilsvarer 16px i de fleste nettlesere). Hvis du har en linjehøyde på 1, vil linjens høyde også være 16px. Linjehøyder er imidlertid vanligvis best mellom 1,4-1,6 ganger størrelsen på fonten din (visuelt, dette virker bare som å jobbe med de fleste skrifttyper - men ikke det som regel, bare spill med det). Hvis vi ser på å ha en linjehøyde midt i det, på 1,5, vil vår linjehøyde være 24px - og det er vårt utgangspunktnummer. Fra nå av vil vi sørge for at alt innhold og typografiske elementer på vårt design samsvarer med eller legger opp til denne 24 px figuren.
En annen viktig ting å måle er våre marginer. En veldig enkel måte å holde rytmen vår i kontroll er å bruke dette magiske nummeret (24px) for våre marginer.
Jeg har vært en stor fan av single-direction margins helt siden Harry Roberts foreslo dette i en artikkel i midten av 2012, hvor margene vi bruker på alle blokknivåelementer, plasseres i en retning (dvs.: på bunnen av elementene ). Det samme kan sies når vi designer også, slik at 24px er vårt "magiske nummer" - og tallet som alt skal være multipler av eller i det minste relaterer seg til - vi kan legge til en bunnmargin til alle blokknivåene våre elementer av 24px (eller 1.5rem, hvis du så foretrekker - men du vil legge til denne koden i CSS er bra!). Dette hjelper oss med å holde vår vertikale rytme flytende pent, og gjør alle elementene våre i tråd med grunnlinjen som vi har opprettet.
Et lite tips jeg finner når jeg jobber med bilder i mitt design - og sørger for at de ikke kaster vår grunnlinje og vertikal rytme helt ut av whack - er å sørge for at bildehøyder samsvarer med flere av vårt magiske nummer. Så for eksempel kan et bilde ha en høyde på 240 px (10 x 24 px, vårt magiske nummer) med en bunnmargin på 24 px. Eller vi kunne til og med ha en høyde på 252 px med en bunnmargin på 12 px - så lenge alt legger opp til at flere av 24 px, burde vi være ok.
Mens det er viktig å huske ditt magiske nummer, kan du likevel alltid bryte fra det litt - hvis noe ikke føles helt riktig på 1,5 linjens høyde du har satt, så prøv noe annet - så lenge du kan justere den andre verdier slik at den faller tilbake til baseline og dermed holder din vertikale rytme i sjakk.
Hvis du for eksempel velger å istedenfor å gå med en litt høyere linjehøyde på 26 piksler (som går ut på rundt 1.625 ganger den opprinnelige skriftstørrelsen vi hadde på 16px), så så lenge margene dine gjenspeiler dette, vil din vertikale rytme vil være ok. Som vi har lagt til en ekstra to piksler til linjens høyde, må vi ta de to pikslene fra den nederste marginen til elementet. Åpenbart, hvis du kan, prøv å lete etter mønstre i ditt design der dette kan skje og arkivere CSS på en måte som gjenspeiler dette mønsteret - så skape en modulær CSS-klasse for elementer som har det designmønsteret, som du ville med ethvert prosjekt du utvikler deg.
Å arbeide for å skape en god vertikal rytme kan være tøff - men heldigvis, som med de fleste design og utviklingsteknikker, er det noen få gode verktøy for å hjelpe oss. Jeg finner disse verktøyene spesielt gode for å praktisere og visuelt forstå mer om typografi på en side.
Typecast er et fantastisk verktøy for designere - det tillater deg ikke bare å spille rundt med tusenvis av forskjellige skrifttyper eller skriftkombinationer, men det hjelper oss også med å sette opp og danner en skikkelig basislinje. Jeg finner at jeg alltid dykker inn i dette før noe annet når jeg begynner å se på typografi i designet mitt.
Modulskalaen er en annen liten teknikk som kan utnyttes eller brukes til å designe med typografi - som beskrevet på A List Apart
en modulær skala er en sekvens av tall som forholder seg til hverandre på en meningsfull måte.
Tim Brown
Disse tallene kan brukes (gjennom mange eksperimenter og bytte og endre) i designene dine, hvis du ønsker det. Det er i det minste verdt å se og spille - og kan hjelpe deg med å ta mer informerte beslutninger om ting som beholderens bredder, og hvordan disse andre tallene også kan spille en rolle i din vertikale rytme.
Hvis du er fan av å designe i nettleseren, eller bare vil sørge for at baselinjene du har designet andre steder, følger gjennom når du starter koding - så kan du bruke en av disse to JavaScript-pluginene til å kontrollere hvordan baseline er utfører i koden din. Den første (Basehold.it), av Dan Eden og Michael Wright, gir deg et JavaScript-overlegg på websiden din, mens Baseline.js av Dan Eden gir deg mulighet til å håndtere bilder på siden din, hvis de er nødvendig.
For denne oppgaven vil jeg at du bare skal leke med et grunnlinje - enten det er gjennom en prøveversjon i Typecast, ved hjelp av et av de ovennevnte JavaScript-pluginene eller bare ved å opprette et grunnlinje i Photoshop eller en annen grafikkapp er helt opp til du. Når du har en grunnlinje klar, begynn å sette prinsippene i denne artikkelen inn i den; sett noe av innholdet på plass, og begynn å finne ut skalaene og skriftstørrelsene du vil bruke.
Når du har de på plass, må du begynne å se på hvordan disse sammenhenger sammen med grunnlinjen. Hvis du aldri har gjort dette før, kan det være litt arbeid å få hodet rundt - men det er vel verdt å ta deg tid til å forstå nøyaktig hvordan de fungerer. Etter det vil du kunne begynne å integrere en god vertikal rytme inn i nettstedet ditt design mye lettere - og brukerne vil takke deg!
Accentsconagua