Et kig på bedre typografi til moderne websites

Digital tekst kan formateres i så mange smag. Med den videre udvikling af web skrifttyper og browser scripts, har vi set nye projektkode for udviklere at udnytte. Web designere søger også den bedste strategi for at kode deres websites og opbygge en ensartet typografisk stil mellem alle deres sider.

Masser af professionelle webdesignere har skrevet om emnet, herunder opdaterede funktioner og tjenester. Du skal overveje hver webside som et entydigt dokument, der bryder ud af dit rodlayoutdesign. Under denne opfattelse er det nemt at se, hvordan typografi kan strømme fra side til side og tilbyde et unikt udtag til kreativitet. Og det bliver især tydeligt at bygge unikke klasser til dine afsnit og overskrifter.

Nedenfor vil jeg gå ind i nogle fantastiske ideer til aspirerende typografi designere interesseret i at opbygge til internettet. Blogs, sociale netværk og virksomheder søger altid at opdatere deres nuværende hjemmeside. Og CSS-stilarter til webtypografi er en glimrende kilde til at begynde at opdatere dine sider.

Forskelle i dagens internet

Det moderne web har udviklet sig dramatisk siden begyndelsen af ​​2000. Der er masser af nye funktioner til webdesignere til at skabe fantastiske grafiske design, logoer, bannere og næsten alt andet. Udgivelsen af ​​HTML5 og CSS3 specifikationer har også taget deres vej til den gamle måde at opbygge web skrifttyper på.

Det er nu helt muligt at medtage dine egne skrifttyper med CSS @ Font-face ejendom. Du kan bruge nogen TrueType(.ttf) eller OpenType(.otf) fil og gem en kopi lokalt på din server. Så med nogle CSS3 magi indbefatte familien hvor som helst på din webside!

Under denne teknik alene er det muligt at se, hvordan udviklet vores moderne internet er blevet.

Og med jQuery voksende i popularitet hver dag er det ingen overraskelse, vi kan opbygge forbløffende animationseffekter kombineret med brugerdefinerede skrifttyper. Som et alternativ til fremgangsmåden ovenfor kan TTFGen-plugin'en til jQuery lade dig inkludere enhver TrueType-skrifttype på din webside.

Denne metode er lidt mere pålidelig, da du ikke behøver en moderne browser, der understøtter CSS3-standarder for at få det til at fungere. Men selvfølgelig vil legacy browsere som Internet Explorer 6 kæmpe for at gengive korrekt.

Men tak og godhed, de fleste brugere har skiftet til nyere browsersoftware, der understøtter disse standarder! Og når du udvikler til internettet, bør du overveje præcis, hvem dit marked er for. Du kan ikke behage alle sammen hele tiden, men du kan sikkert forsøge at komme tæt nok.

Formålet med digital typografi

Sort af en underlig ide at overveje, men Hvad er det egentlige formål med digital tekst? At formidle information, dele kilder og give din mening til verdenen af ​​internetbrugere. Tekst er den mest forenklede form for medier til deling af tanker og ideer. Men det er også meget komplekst og indeholder store detaljer, som fotos / videoer bare ikke kan bruge.

Dine besøgende vil sandsynligvis finde din hjemmeside baseret på søgeord i din tekst eller overskrifter - bare en anden grund til at være opmærksom på din web kopi. Og når du har fået en vis opmærksomhed på dit websted, skal du holde fast i deres koncentration. Dette gøres lettere med fed overskrifter og sidetilpasningstegn.

Hvis du skriver en artikel eller selvstudium, skal du bruge klart sprog. Det er lige så vigtig, hvordan din sidetekst ser ud og kvaliteten af ​​dit indhold. Jo større din tekst vises, desto lettere er det at læse og scanne efter søgeord. Og da afsnit vil indeholde størstedelen af ​​dit indhold, bør du bruge meget tid prototyping til den rigtige pasform. Punkter bruges til at formidle din besked i bitstørrede bidder opdelt i sætninger. Forstå, hvordan du skriver og planlægger dig for at få et passende side layout.

Derudover leveres medie- og sekundærindhold med din sidetekst. Hvis dine afsnit indeholder primær information, har du måske grafer eller billeder til at krydre siden. Disse accenter er bare det rigtige tryk, så brugerne bevæger sig gennem dit websted.

Videoer og billeder kan bryde dit indhold op og få det til at virke som om læsere bevæger sig hurtigere gennem din artikel. Men brug disse elementer sparsomt og lad ikke noget overvældende din kernebesked. Brugere er (for det meste) kommer til dit websted for information og ønsker ikke for mange distraktioner.

Alle de andre formateringsindstillinger bruges til at angive funktionalitet eller formål. For eksempel er hyperlinktekst ofte en anden farve end resten til at skille sig ud som “klikbart”. Du kan arbejde med fed eller kursiv ord, der lægger vægt på dine sætninger. Og brugen af ​​blockquotes eller preformatted tekst kan bidrage til at afgrænse grundlæggende udtalelser eller web-kode, henholdsvis.

Websideoverskrifter

En af de vigtigste aktiver til din webtypografi er overskriftstagger. Hvis du ikke er bekendt med HTML overskrifter spænder fra

til

med den førstnævnte der holder mest vægt og sidstnævnte mindst. Denne markering er nyttig at forstå, da Google også rangerer dit domæne og websider baseret på indholdsstruktur. Således har du i sidste ende kontrol over hvilke søgeord du bruger, og hvilket niveau af overskrifter du vil kræve.

Selvom standard HTML5-specifikationen indeholder op til 6 forskellige overskriftsformer, vil jeg anbefale at bruge mellem 3-4. Det er ikke nødvendigt at medtage dem alle på dine sider. Og det er også meget usandsynligt, at du finder en brug til 6 forskellige overskrifter. Når du først sætter dig ned for at opbygge dine stilarter, prøv at udarbejde et par eksempler til overskrifter for at se, hvad du kan lide.

Photoshop er fremragende til dette scenario. Du kan også prøve at kode ud forskellige overskrifter i HTML for at se, hvordan de ser i browser. Det vigtige er at arbejde med din sideflow og designoverskrifter i henhold til deres rang.

For eksempel, din

Etiketter skal stå ud af det meste blandt alle dine sideoverskrifter.

og

er de mest populære tags og anbefales af Google til at gennemgå sideindhold. Brug af designeffekter som fx skrifttype, understreger, stiplede grænser eller forskellige farver hjælper dine titler med at springe væk fra siden.

Afstanden er også vigtig når det kommer til overskrifter eller noget af dit indhold for den sags skyld. Sørg for at tilføje ekstra marginer mellem dine overskrifter og hovedindholdsområdet. Hvis du har lavet din skrifttype stort nok, skal hver overskrift skille sig ud som sin egen kerneblok. Dette udseende er ideelt, hvis du ønsker at få fat i dine læsers opmærksomhed med en klar besked.

Opbygning af unikke hyperlinks

Der er meget at sige om emnet for sidelinks. På en eller anden måde skal du bruge hyperlinks i din kode. De er yderst vigtige som hovednavigationsgrænsefladen mellem forskellige sider på dit websted. Du kan også linke til andre blogs eller endda dine arkiverede blogindlæg til referencer på et senere tidspunkt.

Du bør vælge holdteksten til dit link meget omhyggeligt. Dette er det specifikke indhold, der vil blive accentueret af en link stil. For eksempel "klik her" er meget populært og bruges til direkte downloads det meste af tiden. Prøv at undgå denne systematiske tilgang og i stedet få lidt kreativ med din hyperlinktekst. Dine besøgende er meget mere tilbøjelige til at klikke på et link, hvis de også kan genkende kontekst og måske finde ud af, hvad den nye side vil indeholde.

Når du skal style dine links, bør du overveje følgende - hvordan ændringer ville se i din side opsætning, hvilken type baggrundsfarve arbejder du på, og hvilken farve er teksten til kontrast?

Links skal vises blatant ud af siden som klikbare elementer - det er trods alt deres funktion. Det er derfor, den gamle blå med understregningstekst fungerer så godt. Men hvis du finder ud af, at en alternativ farve fungerer bedre, skal du prøve det. Der er ingen løsning med en størrelse, der passer til linkdesign. Bare browse rundt på internettet en smule, og du vil helt sikkert sammensætte noget enestående.

Et interessepunkt er et par funktioner, du bør prøve undgå. Ting som at ændre tekstfontfamilie eller skriftstørrelse kan være meget irriterende. Dette vil få teksten til at forvrænge og flytte, hvilket kan placere musemarkøren lige ud af linkzonen. På lignende måde bør du undgå at tilføje ekstra marginer / polstring til dine links eller svæveffekter. Disse fungerer meget bedre, når du bliver enkle. En farveændring eller tilføjet understregning går langt i brugeroplevelsen.

Opførelse af stiliserede lister

Chancerne er gode, du skal også arbejde med lister på et tidspunkt. Inkluderet er både bestilt og uordnet lister i HTML. Disse er perfekte til at tilbyde en lille samling af ideer, produkter, mennesker eller links online i en meget lille mængde plads. Styling er ikke alt andet end afsnit eller overskrifter, enten.

Dine besøgende skal straks forstå, at de ser på en liste over varer. Hold hver liste element adskilt og placeret på en ny linje på din side. Tilføj eventuelt ekstra plads mellem dem. Dette vil give noget åndedræt og fremstå som en god sammenbrud for artiklen tekst. Hvis du vil have dig, kan du endda fed skriftstørrelsen eller indrykket lister lidt væk fra standardlayoutmarginalerne.

Tilføjelse af ekstra funktioner, der hjælper din liste til at skille sig ud, er ikke et krav. Men hvis du nyder bloklayout-stilen, har det virkelig fokus på dine lister. Du kan prøve at tilføje en lys baggrund eller ikoner. En Liste Apart har en god writeup på taming lister, som jeg synes indeholder nogle meget magtfulde videnskaber. Men hvis du holder sideindholdet lineært og kun bruger listeblokke, når det er nødvendigt, bør du ikke løbe ind i nogen form for tilbageslag.

Sådan oprettes in-side citater

Udseendet af citater og citater er meget begrænsede i disse dage. På den tidlige web ville du ikke se meget af disse elementer i brug. Måske i redaktioner, essays eller uddannelsespapirer. Men HTML5 har helt sikkert opdateret reglerne lidt, hvilket gør det meget lettere at citere blokeringer.

HTML5 Doctor hjemmeside indeholder en fascinerende ressource til at diskutere dette nøjagtige emne. De diskuterer brugen af ​​indhold inden for blokquotes som vist internt i dokumentstrukturen. Så du kan inkludere overskrifter, afsnit og endda lister og footers også. Hovedanvendelsen af ​​a