En titt på bättre typografi för moderna webbplatser

Digital text kan formateras i så många smaker. Med vidareutvecklingen av webbfonter och webbläsarskript har vi sett nya projektkod för utvecklare att utnyttja. Webbdesigners söker också den bästa strategin för att koda sina webbplatser och bygga en enhetlig typografisk stil mellan alla sina sidor.

Massor av professionella webbdesigners har skrivit om ämnet, inklusive uppdaterade funktioner och tjänster. Du måste överväga varje webbsida som ett enstaka dokument som bryter mot din rotdesign. Under denna syn är det enkelt att se hur typografi kan flöda från sida till sida och erbjuda ett unikt utlopp för kreativitet. Och det här blir särskilt tydligt att bygga unika klasser för dina stycken och rubriker.

Nedan kommer jag att gå in på några fantastiska idéer för blivande typografiska designers intresserade av att bygga upp för webben. Bloggar, sociala nätverk och företag letar alltid efter att uppdatera sin nuvarande webbplats. Och CSS-stilar för webtypografi ger en utmärkt källa för att börja uppdatera dina sidor.

Skillnader i dagens internet

Den moderna webben har avancerat dramatiskt sedan början av 2000. Det finns massor av nya funktioner för webbdesigners att skapa fantastiska verk av grafisk design, logotyper, banners och praktiskt taget allt annat. Utgåvan av HTML5- och CSS3-specifikationer har också tagit sin tolv på den gamla vägen för att bygga webbfonter.

Det är nu helt möjligt att inkludera dina egna teckensnitt med CSS @ Font-face fast egendom. Du kan använda någon Sann typ(.ttf) eller Opentype(.otf) fil och lagra en kopia lokalt på din server. Då med lite CSS3 magi inkludera familjen någonstans på din webbsida!

Med denna teknik är det möjligt att se hur utvecklat vårt moderna Internet har blivit.

Och med jQuery som växer i popularitet varje dag är det ingen överraskning att vi kan bygga häpnadsväckande animationseffekter tillsammans med anpassade teckensnitt. Som ett alternativ till metoden ovan kan TTFGen plugin för jQuery låta dig inkludera TrueType-teckensnitt på din webbsida.

Denna metod är lite mer pålitlig eftersom du inte behöver en modern webbläsare som stöder CSS3-standarder för att få den att fungera. Men självklart kommer äldre webbläsare som Internet Explorer 6 att kämpa för att göra ordentligt.

Men tack och lov, de flesta användare har bytt till nyare webbläsarprogramvara som stöder dessa standarder! Och när du utvecklar på nätet bör du överväga exakt vem din marknad är för. Du kan inte behaga alla hela tiden, men du kan säkert försöka komma nära nog.

Syftet med digital typografi

Sort av en konstig idé att överväga, men vad är det verkliga syftet med digital text? Förmedla information, dela källor och ge din åsikt till Internet-användarnas värld. Text är den mest förenklade formen av media för att dela tankar och idéer. Men det är också väldigt komplext och innehåller stora detaljer som bilder / videoklipp inte bara kan använda.

Dina besökare kommer sannolikt att hitta din webbplats baserat på nyckelord i din text eller rubriker - bara en annan anledning att noggrant uppmärksamma din webbkopia. Och när du har fått lite uppmärksamhet åt din webbplats måste du hålla fast vid deras koncentration. Detta görs lättast med fet rubrik och jämn sidtext.

Om du skriver en artikel eller handledning måste du använda klart språk. Dess lika viktigt hur din sidtext ser ut och kvaliteten på ditt innehåll. Ju större din text visas desto lättare blir det att läsa och skanna efter nyckelord. Och eftersom stycken kommer att innehålla merparten av ditt innehåll, bör du spendera mycket tid prototyper för rätt passform. Punkter används för att förmedla ditt meddelande i bitstorlek bitar uppdelade i meningar. Förstå hur du skriver och planerar för att få en passande sidlayout.

Dessutom med din sidtext kommer media och sekundärt innehåll. Om dina stycken innehåller primärinformation, kanske du har grafer eller bilder för att krydda sidan. Dessa accenter är bara rätt beröring så att användarna flyttar genom din webbplats.

Videor och bilder kan bryta upp ditt innehåll och göra det verka som att läsare flyttar snabbare genom din artikel. Men använd dessa saker sparsamt och låt inte något överväldiga ditt kärnbudskap. Användare kommer (för det mesta) till din webbplats för information och vill inte ha för många distraheringar.

Alla de andra formateringsalternativen används för att ange funktionalitet eller syfte. Exempelvis är hyperlänkteksten ofta en annan färg än resten för att sticka ut som “klickbara”. Du kan arbeta med djärva eller kursiverade ord som lägger tonvikt på dina meningar. Och användningen av blockquotes eller preformatted text kan hjälpa till att avgränsa grundläggande uttalanden eller webbkod, respektive.

Webbsidor

En av de viktigaste tillgångarna till din webtypografi är rubrikstaggar. Om du inte känner till HTML-rubriker varierar från

till

med den förra som håller mest betydelse och minst minst. Denna markering är användbar för att förstå eftersom Google också rankar din domän och webbsidor baserat på innehållsstruktur. Således har du slutligen kontroll över vilka sökord du använder och vilken nivå av rubriker du skulle behöva.

Även om standard HTML5-specifikationen innehåller upp till 6 olika rubrikformat, rekommenderar jag att du använder mellan 3-4. Det är inte nödvändigt att inkludera dem alla i dina sidor. Och det är också mycket osannolikt att du hittar en användning för 6 olika rubriker. När du först sitter ner för att bygga dina stilar, försök med att utarbeta några exempel för rubriker för att se vad du vill.

Photoshop är utmärkt för detta scenario. Du kan också försöka koda ut olika rubriker i HTML för att se hur de ser ut i webbläsaren. Det som är viktigt är att arbeta med ditt sidflöde och designrubriker enligt deras rangordning.

Till exempel, din

Taggar bör ställa ut de flesta bland alla dina sidrubriker.

och

är de mest populära taggarna och rekommenderas av Google för att krypta sidinnehåll. Med hjälp av designeffekter som fetstil, understreck, streckade gränser eller olika färger hjälper dina titlar att hoppa av sidan.

Spacing är också viktigt när det gäller rubriker eller någon del av ditt innehåll för den delen. Se till att du lägger till ytterligare marginaler mellan rubrikerna och huvudinnehållet. Om du har skrivit ditt teckensnitt tillräckligt stort, ska varje rubrik sticka ut som sin egen kärnblock. Denna look är perfekt om du vill ta tag i dina läsares uppmärksamhet med ett tydligt meddelande.

Bygga unika hyperlänkar

Det finns mycket att säga om ämnet sidlänkar. På något sätt måste du använda hyperlänkar i din kod. De är oerhört viktiga som huvudnavigationsgränssnittet mellan olika sidor på din webbplats. Du kan också länka till andra bloggar eller till och med dina arkiverade blogginlägg som referens senare.

Du borde plocka hålltexten för din länk mycket noggrant. Detta är det specifika innehållet som kommer att accentueras av en länkstil. Till exempel "klicka här" är mycket populär och används mestadels för direktladdningar. Försök att undvika detta systematiska tillvägagångssätt och istället bli lite kreativ med din hyperlänktekst. Dina besökare är mycket mer benägna att klicka på en länk om de också kan känna igen sammanhang och kanske räkna ut vad den nya sidan innehåller.

När du ska stila dina länkar bör du överväga följande - hur förändringar skulle se ut i din sidinställning, vilken typ av bakgrundsfärg jobbar du med, och vilken färg är texten för kontrast?

Länkar ska visas blatant av sidan som klickbara objekt - trots allt är det deras funktion. Det är därför den gamla blåen med underskriftstexten fungerar så bra. Men om du finner att en alternativ färg fungerar bättre borde du prova det. Det finns ingen storleksanpassad lösning för länkdesigner. Bara bläddra runt på nätet lite och du kommer säkert att sätta ihop något som är enastående.

En intressant punkt är några funktioner du bör försöka undviker. Saker som att ändra textfontfamilj eller teckenstorlek kan vara mycket irriterande. Detta kommer att orsaka att texten snedvrider och flyttar, vilket kan placera muspekaren precis utanför länkzonen. På liknande sätt borde du undvika att lägga till extra marginaler / vaddering på dina länkar eller svängningseffekter. Dessa fungerar mycket bättre när du stannar enkelt. En färgförändring eller lagt underlag går långt i användarupplevelse.

Konstruktion av stilade listor

Chansen är bra, du måste också arbeta med listor vid någon tidpunkt. Inkluderat är både beställda och oordnade listor i HTML. Dessa är perfekta för att erbjuda en liten samling ideer, produkter, människor eller länkar på nätet i mycket liten mängd utrymme. Styling är inte så annorlunda än stycken eller rubriker, heller.

Dina besökare ska förstå omedelbart att de tittar på en lista över objekt. Håll varje listobjekt separat och placerade på en ny rad på din sida. Lägg till lite extra utrymme mellan dem, om möjligt. Detta kommer att ge lite andningsrum och visas som en bra uppbrytning för artikeltext. Om du vill kan du till och med djärva fonten eller indrymmet listar lite för att stå bort från standardlayoutmarginalerna.

Att lägga till ytterligare funktioner som hjälper din lista att sticka ut är inte ett krav. Men om du gillar blocklayoutstilen har det verkligen fokus på dina listor. Du kan försöka lägga till en ljus bakgrund eller ikoner. En lista Apart har en bra writeup på taming listor som jag tror innehåller några mycket kraftfulla kunskaper. Men om du håller sidinnehållet linjärt och bara använder listblock vid behov, borde du inte gå in i några konstruktionsbackbackar.

Hur man skapar in-sidcitationstecken

Utseendet på citat och citat är väldigt begränsat idag. På den tidiga webben skulle du inte se mycket av dessa element i bruk. Kanske i redaktioner, uppsatser eller pedagogiska papper. Men HTML5 har verkligen uppdaterat reglerna lite, vilket gör att citera blockquotes mycket enklare.

HTML5 Doctor-webbplatsen innehåller en fascinerande resurs för att diskutera detta exakta ämne. De diskuterar användningen av innehåll i blockquotes som visas internt i dokumentstrukturen. Så du kan inkludera rubriker, stycken och även listor och sidfotar också. Huvudanvändningen av a