En titt på bedre typografi for moderne nettsteder

Digital tekst kan formateres i så mange smaker. Med videreutvikling av webfonter og nettleserskript har vi sett ny prosjektkode for utviklere å benytte. Webdesignere, også, ser etter den beste strategien for å kode sine nettsider og bygge en jevn typografisk stil mellom alle sidene deres.

Mange profesjonelle webdesignere har skrevet om emnet, inkludert oppdaterte funksjoner og tjenester. Du må vurdere hver nettside som et enkelt dokument som bryter ut rotdesignet ditt. Under denne visningen er det enkelt å se hvordan typografi kan flyte fra side til side og tilby et unikt utløp for kreativitet. Og dette blir spesielt tydelig å bygge unike klasser for avsnittene dine og overskriftene.

Nedenfor vil jeg gå inn i noen fantastiske ideer for aspirerende typografi designere interessert i å bygge for nettet. Blogger, sosiale nettverk og bedrifter er alltid ute etter å oppdatere deres nåværende nettsted. Og CSS-stiler for webtypografi er en utmerket kilde til å begynne å forfriske sidene dine.

Forskjeller i dagens internett

Den moderne nettsiden har avansert dramatisk siden begynnelsen av 2000. Det er mange nye funksjoner for webdesignere å lage fantastiske grafiske design, logoer, bannere og praktisk talt alt annet. Utgivelsen av HTML5 og CSS3 spesifikasjoner har også tatt sin tolv på den gamle måten å bygge webfonter.

Det er nå helt mulig å inkludere dine egne skrifter med CSS @ Font-face eiendom. Du kan bruke noen True(.ttf) eller Open(.otf) fil og lagre en kopi lokalt på serveren din. Deretter med noen CSS3 magi inkludere familien hvor som helst på nettsiden din!

Under denne teknikken alene er det mulig å se hvordan utviklet vårt moderne Internett har blitt.

Og med jQuery som vokser i popularitet hver dag, er det ingen overraskelse vi kan bygge forbløffende animasjonseffekter kombinert med egendefinerte skrifter. Som et alternativ til metoden ovenfor, tillater TTFGen-plugin for jQuery deg å inkludere et TrueType-skrift på din nettside.

Denne metoden er litt mer pålitelig siden du ikke trenger en moderne nettleser som støtter CSS3-standarder for å få det til å fungere. Men selvfølgelig vil eldre nettlesere som Internet Explorer 6 kjempe for å gjengi riktig.

Men tusen takk, de fleste brukere har byttet til nyere nettleserprogramvare som støtter disse standardene! Og når du utvikler deg for nettet, bør du vurdere nøyaktig hvem markedet er for. Du kan ikke glede alle sammen hele tiden, men du kan sikkert prøve å komme nær nok.

Formålet med digital typografi

Sort av en merkelig ide å vurdere, men hva er det virkelige formålet med digital tekst? Å formidle informasjon, dele kilder og gi mening til Internett-brukere. Tekst er den mest forenklede form for media for å dele tanker og ideer. Men det er også veldig komplekst og inneholder store detaljer som bilder / videoer bare ikke kan bruke.

Dine besøkende vil sannsynligvis finne nettstedet ditt basert på søkeord i teksten eller overskriftene - bare en annen grunn til å være forsiktig med å ta vare på webkopien din. Og når du har fått litt oppmerksomhet til nettstedet ditt, må du holde fast i konsentrasjonen. Dette gjøres lettest med dype overskrifter og jevnt fordelt sidetekst.

Hvis du skriver en artikkel eller veiledning, må du bruke klart språk. Det er like viktig hvordan sideteksten ser ut og kvaliteten på innholdet ditt. Jo større teksten du ser, desto lettere blir det å lese og skanne etter søkeord. Og siden avsnittene vil inneholde størstedelen av innholdet ditt, bør du bruke mye tid prototyping for riktig passform. Avsnitt brukes til å formidle din melding i bitstørreste biter som er brutt ned i setninger. Forstå hvordan du skriver og planlegger å få et passende sideoppsett.

I tillegg med tekst på siden kommer medie- og sekundærinnhold. Hvis avsnittene inneholder primær informasjon, har du kanskje grafer eller bilder å krysse siden. Disse aksentene er bare den rette kontakten, slik at brukerne beveger seg gjennom nettstedet ditt.

Videoer og bilder kan bryte opp innholdet ditt og få det til å virke som om leserne beveger seg raskere gjennom artikkelen din. Men bruk disse elementene sparsomt og ikke la noe overvelde kjernekommandoen din. Brukere er (for det meste) kommer til nettstedet ditt for informasjon og vil ikke ha for mange distraksjoner.

Alle de andre formateringsalternativene brukes til å spesifisere funksjonalitet eller formål. For eksempel er hyperkoblingsteksten ofte en annen farge fra resten som skiller seg ut som “klikkbar”. Du kan jobbe med fet eller kursiv ord som legger vekt på setningene dine. Og bruken av blokkeringer eller forhåndsformatert tekst kan bidra til å avgrense henholdsvis grunnleggende setninger eller webkoden.

Websideoverskrifter

En av de viktigste eiendelene til webtypografi er kursetiketter. Hvis du ikke er kjent med HTML-overskrifter, spenner fra

til

med den førstnevnte holder mest vekt og sistnevnte minst. Denne merkingen er nyttig å forstå siden Google også rangerer domenet og nettsidene basert på innholdsstruktur. Dermed har du til slutt kontroll over hvilke søkeord du bruker og hvilket nivå av overskrifter du vil trenge.

Selv om standard HTML5-spesifikasjonen inneholder opptil 6 forskjellige overskriftsstiler, anbefaler jeg at du bruker mellom 3-4. Det er ikke nødvendig å inkludere dem alle i sidene dine. Og det er også svært lite sannsynlig at du finner en bruk for 6 forskjellige overskrifter. Når du først setter deg ned for å bygge stilene dine, kan du prøve å lage noen eksempler for overskrifter for å se hva du liker.

Photoshop er utmerket for dette scenariet. Du kan også prøve å kode ut forskjellige overskrifter i HTML for å se hvordan de ser i nettleseren. Det som er viktig er å jobbe med sidestrømmen og designoverskriftene i henhold til deres rangering.

For eksempel, din

Etiketter bør stå ut mest blant alle sidene dine.

og

er de mest populære kodene og anbefales av Google for å gjennomsøke sideinnhold. Ved å bruke designeffekter som fet skrift, understreker, stiplede grenser eller forskjellige farger, vil dine titler hoppe av siden.

Spacing er også viktig når det kommer til overskrifter, eller noe av innholdet ditt for den saks skyld. Pass på at du legger til flere marginer mellom overskriftene og hovedinnholdsområdet. Hvis du har gjort fonten stor nok, skal hver overskrift skille seg ut som sin egen kjerneblokk. Dette utseendet er ideelt hvis du vil ta tak i lesernes oppmerksomhet med en klar melding.

Bygg Unik Hyperlinks

Det er mye å si om temaet for sidelinkene. På en eller annen måte må du bruke hyperkoblinger i koden din. De er ekstremt viktige som hovednavigasjonsgrensesnittet mellom forskjellige sider på nettstedet ditt. Du kan også lenke til andre blogger eller til og med dine arkiverte blogginnlegg som referanse senere.

Du bør velge holdteksten for lenken din nøye. Dette er det spesifikke innholdet som vil bli aksentert av en lenke stil. For eksempel "klikk her" er veldig populært og brukes til direkte nedlastinger mesteparten av tiden. Prøv å unngå denne systematiske tilnærmingen og istedenfor å bli litt kreativ med din hyperkoblingstekst. Dine besøkende er mye mer sannsynlig å klikke på en lenke hvis de også kan gjenkjenne kontekst og kanskje finne ut hva den nye siden inneholder.

Når du skal style dine lenker, bør du vurdere følgende - hvordan endringer vil se ut i oppsettet ditt, hvilken type bakgrunnsfarge jobber du med, og hvilken farge er teksten for kontrast?

Lenkene skal vises blatant av siden som klikkbare elementer - det er jo deres funksjon. Det er derfor den gamle blåen med understreket tekst-effekt fungerer så bra. Men hvis du finner ut at en alternativ farge fungerer bedre, bør du prøve den ut. Det finnes ingen løsning med en størrelse for lenkdesign. Bare surfe på nettet litt, og du vil sikkert sette sammen noe som er enestående.

Et poeng av interesse er noen få funksjoner du bør prøve unngår. Ting som for eksempel tekstfamilie eller skriftstørrelse kan være svært irriterende. Dette vil føre til at teksten forvrenger og beveger seg, noe som kan plassere musepekeren rett ut av koblingssonen. På samme måte bør du unngå å legge til ekstra marginer / polstring på dine koblinger eller sveveeffekter. Disse fungerer mye bedre når du blir enkel. En fargeendring eller lagt understrekk går langt i brukeropplevelsen.

Konstruksjon av stilige lister

Sjansene er gode, du må også jobbe med lister på et tidspunkt. Inkludert er både bestilte og uordnede lister i HTML. Disse er perfekte for å tilby en liten samling av ideer, produkter, mennesker, eller koblinger på nettet i svært lite plass. Styling er ikke så annerledes enn avsnitt eller overskrifter, heller.

Dine besøkende bør forstå umiddelbart at de ser på en liste over varer. Behold hvert listeelement separat og plassert på en ny linje på siden din. Legg til litt ekstra plass mellom dem, om mulig. Dette vil gi noe puste rom og vises som en fin oppbrytning for artikkelen tekst. Hvis du vil at du kan til og med dristig, er fonten eller innrykket lister litt for å stå vekk fra standardlayoutmarginene.

Å legge til flere funksjoner for å hjelpe listen å skille seg ut, er ikke et krav. Men hvis du liker bloklayout-stilen, har det virkelig fokus på lister. Du kan prøve å legge til en lys bakgrunn eller ikoner. En Liste Apart har en flott writeup på taming lister som jeg tror inneholder noen svært kraftige godbiter av kunnskap. Men hvis du holder sidelinjen lineær og bruker kun listeblokker når det er nødvendig, bør du ikke gå inn i noen formelle tilbakeslag.

Slik lager du in-side-sitater

Utseendet på sitater og sitater er svært begrenset i disse dager. På den tidlige nettsiden ville du ikke se veldig mye av disse elementene i bruk. Kanskje i redaksjonelle, essays eller pedagogiske artikler. Men HTML5 har sikkert oppdatert reglene litt, noe som gjør at blokkeringene blir enklere.

HTML5 Doctor-nettstedet inneholder en fascinerende ressurs for å diskutere dette eksakte emnet. De diskuterer bruken av innholdet i blokkblokkene som vises internt i dokumentstrukturen. Så du kan inkludere overskrifter, avsnitt, og til og med lister og footers, også. Hovedbruken av a