Pogledajte u bolju tipografiju za moderne web stranice

Digitalni tekst može se oblikovati u toliko različitih okusa. S daljnjim napretkom web-fontova i skripti preglednika vidjeli smo novi projektni kod za razvojne programere. Web dizajneri, također, traže najbolju strategiju za kodiranje svojih web stranica i izgradnju jedinstvenog tipografskog stila između svih njihovih stranica.

Obilje profesionalnih web dizajnera napisalo je na temu uključujući ažurirane značajke i usluge. Svaku web-stranicu morate smatrati jedinstvenim dokumentom koji prekida vaš dizajn korijena. Pod ovim prikazom lako je vidjeti kako tipografija može teći od stranice do stranice i ponuditi jedinstveni izlaz za kreativnost. A to postaje posebno vidljivo u izgradnji jedinstvenih klasa za vaše paragrafe i naslove.

Ispod ću se upoznati s nekim fantastičnim idejama za ambiciozne dizajnere tipografije koji su zainteresirani za izgradnju weba. Blogovi, društvene mreže i tvrtke uvijek žele ažurirati svoju trenutnu web-lokaciju. CSS stilovi za web tipografiju pružaju izvrstan izvor za osvježavanje stranica.

Razlike u današnjem internetu

Moderni web je dramatično napredovao od početka 2000. Postoje mnoštvo novih mogućnosti za web dizajnere za stvaranje fantastičnih djela grafičkog dizajna, logotipa, banera i praktički bilo čega drugog. Izdavanje specifikacija HTML5 i CSS3 također je uzelo svoj danak na stari način izrade web-fontova.

Sada je potpuno moguće uključiti vlastite fontove u CSS 'Font-lica nekretnine. Možete koristiti bilo koji TrueType(.ttf) ili OpenType(.otf) datoteku i pohranite kopiju lokalno na vašem poslužitelju. Zatim s nekim CSS3 magijom uključite obitelj bilo gdje na vašoj web stranici!

Samo pod ovom tehnikom moguće je vidjeti kako je razvijen naš moderni internet.

A s povećanjem popularnosti jQuery svaki dan ne čudi se da možemo izgraditi nevjerojatne efekte animacije zajedno s prilagođenim fontovima. Kao alternativa metodi iznad TTFGen dodatka za jQuery omogućuje uključivanje bilo kojeg TrueType fonta na svoju web-stranicu.

Ova metoda je malo pouzdanija jer vam nije potreban moderan preglednik koji podržava CSS3 standarde kako bi bio uspješan. Naravno, stariji preglednici kao što je Internet Explorer 6 će se boriti za ispravno prikazivanje.

Ali hvala bogu, većina korisnika je prešla na noviji softver za pregledavanje koji podržava ove standarde! A kada se razvijate za web, trebali biste razmisliti o kojem se tržištu radi. Ne možete cijelo vrijeme ugoditi svima, ali sigurno možete pokušati doći dovoljno blizu.

Svrha digitalne tipografije

Neku čudnu ideju koju treba razmotriti, ali što je stvarna svrha digitalnog teksta? Prenositi informacije, dijeliti izvore i nuditi svoje mišljenje svijetu korisnika Interneta. Tekst je najjednostavniji oblik medija za razmjenu misli i ideja. Također je vrlo složen i sadrži glavne pojedinosti koje fotografije / videozapisi jednostavno ne mogu koristiti.

Vaši posjetitelji vjerojatno će pronaći vašu web-lokaciju na temelju ključnih riječi u vašem tekstu ili naslovima - samo još jedan razlog da obratite pažnju na svoju web-kopiju. I nakon što ste privukli neku pozornost na svoju web-lokaciju, morate zadržati njihovu koncentraciju. To se najjednostavnije radi s podebljanim naslovima i tekstom stranice s ravnomjernim razmakom.

Ako pišete članak ili tutorial, morate koristiti jasan jezik. to je jednako je važno kako izgleda tekst vaše stranice i kvaliteta vašeg sadržaja. Što je vaš tekst veći, to ćete lakše čitati i tražiti ključne riječi. A budući da će paragrafi sadržavati većinu sadržaja, trebali biste potrošiti mnogo vremena na izradu prototipova za ispravno uklapanje. Odlomci se koriste za prenošenje vaše poruke u dijelove veličine bitova raščlanjenih u rečenice. Razumite kako pišete i planirate unaprijed kako biste dobili odgovarajući izgled stranice.

Uz tekst stranice dolazi i medijski i sekundarni sadržaj. Ako vaši paragrafi sadrže primarne informacije, možda imate grafikone ili slike kako biste začinili stranicu. Ti su naglasci samo pravi dodir korisnika koji se kreću kroz vašu web-lokaciju.

Videozapisi i slike mogu razbiti vaš sadržaj i učiniti ga kao da se čitatelji brže kreću kroz vaš članak. Ali koristite ove stavke štedljivo i ne dopustite da vam išta preplavi temeljnu poruku. Korisnici (uglavnom) dolaze na vašu web-lokaciju radi informacija i ne žele previše ometanja.

Sve ostale opcije oblikovanja koriste se za određivanje funkcionalnosti ili svrhe. Primjerice, tekst hiperlink je često drugačija boja od ostalih da bi se istaknuo “kliknuti”. Možete raditi s podebljanim ili kurzivim riječima dodajući naglasak u svoje rečenice. Korištenje blokova ili unaprijed oblikovanog teksta može pomoći u određivanju temeljnih izjava ili web koda.

Zaglavlja web-stranica

Jedna od najvažnijih sredstava za vašu web-tipografiju su oznake naslova. Ako niste upoznati s HTML naslovima u rasponu od

do

s prvim držanjem najveće važnosti, a posljednje najmanje. Ovaj je opis koristan za razumijevanje jer Google također rangira vašu domenu i web-stranice na temelju strukture sadržaja. Tako ćete u konačnici imati kontrolu nad ključnim riječima koje upotrebljavate i koje ćete razine trebati.

Iako standardna HTML5 specifikacija uključuje do 6 različitih stilova naslova, preporučujem da koristite između 3-4. Nije ih potrebno sve uključiti na svoje stranice. Također je vrlo malo vjerojatno da ćete naći korištenje za 6 različitih naslova. Prilikom prvog sjedanja za izgradnju stilova pokušajte sastaviti nekoliko primjera za naslove da biste vidjeli što vam se sviđa.

Photoshop je izvrstan za ovaj scenarij. Također možete pokušati kodirati različite naslove u HTML-u da biste vidjeli kako izgledaju u pregledniku. Ono što je važno je raditi s vašim protokom stranica i dizajnirati naslove prema njihovom rangu.

Na primjer, vaš

najviše oznaka treba istaknuti među svim naslovima Vaših stranica.

i

su najpopularnije oznake koje Google preporučuje za indeksiranje sadržaja stranice. Koristeći efekte dizajna kao što su podebljani font, podcrtane crte, isprekidane granice ili različite boje, vaši će naslovi skočiti sa stranice.

Razmak je također važan kada su u pitanju naslovi ili bilo koji dio vašeg sadržaja. Provjerite jeste li dodali dodatne margine između naslova i glavnog područja sadržaja. Ako ste učinili svoj font dovoljno velikim, svaki bi naslov trebao biti istaknut kao njegov temeljni blok. Ovaj je izgled idealan ako želite privući pažnju čitatelja jasnom porukom.

Izgradnja jedinstvenih hiperveza

Ima dosta toga za reći na temu stranice linkova. Na ovaj ili onaj način morat ćete koristiti hiperveze u svom kodu. Iznimno su važni kao glavno sučelje za navigaciju između različitih stranica na vašoj web-lokaciji. Također možete povezati s drugim blogovima ili čak s arhiviranim postovima na blogu za kasnije.

Pažljivo birajte tekst zadržavanja za vaš link. To je određeni sadržaj koji će biti naglašen stilom veze. Na primjer "kliknite ovdje" je vrlo popularan i koristi se za izravno preuzimanje većinu vremena. Pokušajte izbjeći ovaj sustavni pristup i umjesto toga dobiti malo kreativnog s tekstom hiperveze. Vaši posjetitelji imaju veću vjerojatnost da kliknu na vezu ako mogu prepoznati kontekst i možda otkriti što će nova stranica sadržavati.

Kada idete na stil svoje veze trebali biste razmotriti sljedeće - kako će izgledati promjene u postavljanju stranice, koju vrstu pozadinske boje radite, i koja je boja tekst za kontrast?

Veze bi se trebale pojavljivati ​​na stranici kao stavke s mogućnošću klikanja - naposljetku, to je njihova funkcija. Zbog toga stari plavi s podcrtanim tekstualnim efektom radi tako dobro. Ali ako otkrijete da alternativna boja radi bolje, trebali biste je isprobati. Ne postoji jedinstveno rješenje za dizajn poveznica. Samo malo pretražite web i sigurno ćete sastaviti nešto izvrsno.

Jedna točka interesa je nekoliko značajki koje biste trebali isprobati izbjegavanje. Stvari kao što je promjena obitelji fonta fonta ili veličine fonta može biti vrlo neugodno. To će uzrokovati izobličenje i pomak teksta, što može postaviti pokazivač miša izvan zone veze. Na sličan način izbjegavajte dodavanje dodatnih margina / padova vašim linkovima ili efektima lebdenja. Oni rade puno bolje kada ostanete jednostavni. Promjena boje ili dodano podcrtavanje uvelike pridonose korisničkom iskustvu.

Izrada stiliziranih popisa

Šanse su dobre, morat ćete također raditi s popisima u nekom trenutku. Uključeni su i uređeni i neuređeni popisi u HTML-u. Oni su savršeni za pružanje male kolekcije ideja, proizvoda, ljudi ili veza na mreži u vrlo malom prostoru. Styling nije sve što se razlikuje od paragrafa ili naslova, također.

Vaši posjetitelji trebaju odmah shvatiti da gledaju popis stavki. Držite svaku stavku popisa odvojenu i nalazi se na novom retku na svojoj stranici. Dodajte dodatni prostor između njih, ako je moguće. To će dati neke prostorije za disanje i pojaviti se kao lijep rascjep za tekst članka. Ako želite, možete čak i podebljati fontove ili popise uvlačenja kako biste se udaljili od standardnih rubova izgleda.

Dodavanje dodatnih značajki koje će vam pomoći da se istaknete na popisu nije uvjet. Ali ako uživate u stilu blok-rasporeda, uistinu se fokusira na vaše popise. Možete pokušati dodati svjetlu pozadinu ili ikone. A list Apart ima sjajnu preporuku na pripitomljavanje popisa za koje mislim da uključuje neke vrlo snažne dijelove znanja. Ali ako sadržaj stranice zadržavate linearno i koristite blokove popisa samo kada je to potrebno, ne biste trebali naići na bilo kakve zastoje u dizajnu.

Kako stvoriti In-Page Quotes

Izgled citata i citata ovih je dana vrlo ograničen. U ranom webu ne biste vidjeli mnogo tih elemenata u upotrebi. Možda u uvodnicima, esejima ili obrazovnim radovima. No, HTML5 je svakako malo ažurirao pravila što čini citiranje bloka mnogo lakšim.

Web stranica HTML5 Doctor sadrži fascinantan izvor za raspravu o ovoj točnoj temi. Oni raspravljaju o korištenju sadržaja unutar blokovskih citata koji se pojavljuju unutar strukture dokumenta. Možete uključiti i naslove, paragrafe, pa čak i popise i podnožja. Glavna uporaba a