Een kijkje in betere typografie voor moderne websites

Digitale tekst kan in zoveel smaken worden opgemaakt. Met de verdere vooruitgang van weblettertypen en browserscripts hebben we nieuwe projectcode gezien die ontwikkelaars konden gebruiken. Webontwerpers zijn ook op zoek naar de beste strategie om hun websites te coderen en een uniforme typografische stijl te creëren tussen al hun pagina's.

Tal van professionele webontwerpers hebben over het onderwerp geschreven, inclusief bijgewerkte functies en services. U moet elke webpagina beschouwen als een enkelvoudig document dat uw ontwerp van de rootlayout verbreekt. In deze weergave kunt u gemakkelijk zien hoe typografie van pagina naar pagina kan vloeien en een unieke uitlaatklep voor creativiteit bieden. En dit wordt vooral duidelijk door unieke klassen te bouwen voor je alinea's en kopjes.

Hieronder ga ik in op enkele fantastische ideeën voor aspirant-ontwerpers van typografie die geïnteresseerd zijn in het bouwen voor het web. Blogs, sociale netwerken en bedrijven zijn altijd op zoek om hun huidige website bij te werken. En CSS-stijlen voor webtypografie bieden een uitstekende bron om uw pagina's te verfrissen.

Verschillen in het internet van vandaag

Het moderne web is sinds begin 2000 dramatisch vooruitgegaan. Er zijn heel veel nieuwe functies voor webontwerpers om fantastische werken te maken van grafisch ontwerp, logo's, banners en vrijwel alles. De release van HTML5- en CSS3-specificaties heeft ook zijn tol geëist op de oude manier van het bouwen van weblettertypen.

Het is nu heel goed mogelijk om uw eigen lettertypen met de CSS op te nemen @ Font-face eigendom. U kunt elk gebruiken TrueType(.ttf) of Open type(.otf) bestand en sla een kopie lokaal op uw server op. Voeg vervolgens met wat CSS3-magie de hele familie toe op uw webpagina!

Alleen al onder deze techniek is het mogelijk om te zien hoe ontwikkeld ons moderne internet is geworden.

En omdat jQuery elke dag aan populariteit wint, is het geen verrassing dat we verbazingwekkende animatie-effecten kunnen maken in combinatie met aangepaste lettertypen. Als een alternatief voor de bovenstaande methode kunt u met de TTFGen-plug-in voor jQuery elk TrueType-lettertype opnemen op uw webpagina.

Deze methode is een beetje betrouwbaarder omdat u geen moderne browser nodig heeft die CSS3-standaarden ondersteunt om deze te laten werken. Maar natuurlijk zullen oudere browsers zoals Internet Explorer 6 moeite hebben om correct weer te geven.

Maar gelukkig zijn de meeste gebruikers overgestapt op nieuwere browsersoftware die deze standaarden ondersteunen! En wanneer u zich voor het web ontwikkelt, moet u overwegen voor wie uw markt bestemd is. Je kunt niet iedereen de hele tijd plezieren, maar je kunt wel proberen dichtbij genoeg te komen.

Het doel van digitale typografie

Een beetje een vreemd idee om over na te denken, maar wat is het echte doel van digitale tekst? Informatie overbrengen, bronnen delen en uw mening geven aan de wereld van internetgebruikers. Tekst is de meest simplistische vorm van media voor het delen van gedachten en ideeën. Maar het is ook erg complex en bevat belangrijke details die foto's / video's gewoon niet kunnen gebruiken.

Uw bezoekers zullen uw website waarschijnlijk vinden op basis van trefwoorden in uw tekst of koppen - slechts een andere reden om goed op uw webexemplaar te letten. En als je wat aandacht hebt besteed aan je website, moet je hun concentratie vasthouden. Dit gaat het gemakkelijkst met vetgedrukte koppen en pagina-tekst op gelijke afstanden.

Als u een artikel of zelfstudie schrijft, moet u duidelijke taal gebruiken. Haar net zo belangrijk hoe uw paginatekst er uitziet en de kwaliteit van uw inhoud. Hoe groter uw tekst, des te gemakkelijker het is om te lezen en te scannen op trefwoorden. En aangezien paragrafen de meerderheid van uw inhoud bevatten, zou u veel tijd moeten besteden aan prototyping voor de juiste pasvorm. Alinea's worden gebruikt om uw bericht in bit-sized brokken over te brengen, opgesplitst in zinnen. Begrijp hoe u schrijft en vooruit plant om een ​​passende paginalay-out te krijgen.

Bovendien komt met uw paginatekst media en secundaire inhoud. Als uw alinea's primaire informatie bevatten, heeft u misschien grafieken of afbeeldingen om de pagina leuker te maken. Deze accenten zijn precies wat u nodig hebt om gebruikers door uw site te laten bewegen.

Video's en afbeeldingen kunnen uw inhoud uiteenhalen en het lijkt erop dat lezers sneller door uw artikel gaan. Maar gebruik deze items spaarzaam en laat niets je kernboodschap overspoelen. Gebruikers komen (meestal) naar uw site voor informatie en willen niet te veel afleiding.

Alle andere opmaakopties worden gebruikt om functionaliteit of doel te specificeren. Hyperlink-tekst is bijvoorbeeld vaak een andere kleur dan de rest om op te vallen “clickable”. Je kunt werken met gedurfde of cursieve woorden die extra nadruk leggen op je zinnen. En het gebruik van blockquotes of vooraf opgemaakte tekst kan helpen om respectievelijk fundamentele uitspraken of webcodes af te bakenen.

Webpagina Kopteksten

Een van de belangrijkste troeven van uw webtypografie zijn heading-tags. Als u niet bekend bent met HTML-koppen, bereik van

naar

met de eerstgenoemden die het meeste belang hebben en het laatste het minst. Deze opmaak is handig om te begrijpen, aangezien Google ook uw domein en webpagina's rangschikt op basis van de inhoudsstructuur. Zo heeft u uiteindelijk controle over welke zoekwoorden u gebruikt en welke lagen u nodig heeft.

Hoewel de standaard HTML5-specificatie maximaal 6 verschillende kopstijlen bevat, raad ik aan om tussen 3-4 te gebruiken. Het is niet nodig om ze allemaal op uw pagina's op te nemen. En het is ook zeer onwaarschijnlijk dat je een gebruik zult vinden voor 6 verschillende rubrieken. Wanneer je eerst gaat zitten om je stijlen te bouwen, probeer dan een paar voorbeelden te schrijven voor de koppen om te zien wat je leuk vindt.

Photoshop is uitstekend voor dit scenario. U kunt ook proberen verschillende koppen in HTML te coderen om te zien hoe ze er in de browser uitzien. Wat belangrijk is, is om te werken met de paginastroom en ontwerpkoppen volgens hun rangorde.

Bijvoorbeeld uw

tags moeten het meest opvallen tussen al uw paginakoppen.

en

zijn de meest populaire tags en worden aanbevolen door Google voor het crawlen van pagina-inhoud. Als u ontwerpeffecten gebruikt, zoals vetgedrukte letters, onderstreepte randen of verschillende kleuren, kunnen uw titels van de pagina springen.

Afstand is ook belangrijk als het gaat om koppen, of een deel van je inhoud voor die kwestie. Zorg ervoor dat u extra marges toevoegt tussen uw koppen en hoofdinhoudsgebied. Als u uw lettertype groot genoeg hebt gemaakt, moet elke kop opvallen als zijn eigen kernblok. Deze look is ideaal als u de aandacht van uw lezers wilt trekken met een duidelijke boodschap.

Bouwen aan unieke hyperlinks

Er is veel te zeggen over het onderwerp van paginakoppelingen. Op de een of andere manier moet je hyperlinks in je code gebruiken. Ze zijn uiterst belangrijk als de belangrijkste navigatie-interface tussen verschillende pagina's op uw site. Je kunt ook een link plaatsen naar andere blogs of zelfs je gearchiveerde blogposts als referentie op een later tijdstip.

U moet de holdingtekst voor uw link heel zorgvuldig kiezen. Dit is de specifieke inhoud die wordt geaccentueerd door een linkstijl. "Klik hier" is bijvoorbeeld erg populair en wordt meestal gebruikt voor directe downloads. Probeer deze systematische aanpak te vermijden en in plaats daarvan een beetje creatief te worden met uw hyperlinktekst. Uw bezoekers zullen veel eerder op een link klikken als ze de context ook kunnen herkennen en misschien kunnen achterhalen wat de nieuwe pagina zal bevatten.

Houd rekening met het volgende bij het stijlen van uw links - hoe veranderingen eruit zouden zien in uw pagina-instellingen, op wat voor soort achtergrondkleur werk je?, en welke kleur is de tekst voor contrast?

Links moeten schaamteloos van de pagina worden weergegeven als klikbare items - dat is tenslotte hun functie. Daarom werkt het oude blauw met onderstrepingsteksteffect zo goed. Maar als je vindt dat een alternatieve kleur beter werkt, zou je het eens moeten proberen. Er is geen one-size-fits-all oplossing voor link-ontwerpen. Blader gewoon een beetje over het web en u zult zeker iets bijzonders samenstellen.

Een aandachtspunt is een paar functies die u zou moeten proberen vermijden. Dingen zoals het wijzigen van de lettertypefamilie of lettergrootte kunnen erg vervelend zijn. Hierdoor wordt de tekst vervormd en verplaatst, waardoor de muisaanwijzer mogelijk net buiten de koppelingszone komt. Op dezelfde manier moet je vermijden extra marges / opvulling toe te voegen aan je links of hover-effecten. Deze werken veel beter als je eenvoudig blijft. Een kleurverandering of onderstreping voegt een lange weg af in de gebruikerservaring.

Constructie van gestileerde lijsten

De kans is groot dat je op een gegeven moment ook met lijsten moet werken. Inbegrepen zijn zowel geordende als ongeordende lijsten in HTML. Deze zijn perfect voor het aanbieden van een kleine verzameling ideeën, producten, mensen of links online in een zeer kleine hoeveelheid ruimte. Styling is ook niet zo heel anders dan alinea's of kopjes.

Uw bezoekers moeten onmiddellijk begrijpen dat ze naar een lijst met items kijken. Houd elk lijstitem gescheiden en bevindt zich op een nieuwe regel op uw pagina. Voeg indien mogelijk wat extra ruimte tussen hen toe. Dit geeft wat ademruimte en lijkt een mooie breuk voor de artikeltekst. Als u wilt kunt u het lettertype of de inspringlijsten zelfs een beetje vet maken om weg te staan ​​van de standaard lay-outmarges.

Het toevoegen van extra functies om uw lijst te laten opvallen, is geen vereiste. Maar als je van de stijl van de bloklay-out geniet, houdt het echt de nadruk op je lijsten. Je zou kunnen proberen een lichte achtergrond of pictogrammen toe te voegen. A List Apart heeft een geweldige beschrijving van temmenlijsten waarvan ik denk dat het enkele zeer krachtige weetjes bevat. Maar als u de pagina-inhoud lineair houdt en alleen lijstblokken gebruikt wanneer dat nodig is, mag u geen ontwerp-tegenvallers tegenkomen.

In-Page Quotes maken

Het uiterlijk van citaten en citaten is tegenwoordig erg beperkt. In het vroege web zou je niet veel van deze elementen in gebruik zien. Misschien in editorials, essays of educatieve papers. Maar HTML5 heeft de regels zeker een beetje geüpdatet waardoor het citeren van blockquotes een stuk eenvoudiger wordt.

De HTML5 Doctor-website bevat een fascinerende bron voor het bespreken van dit exacte onderwerp. Ze bespreken het gebruik van inhoud in blockquotes die intern in de documentstructuur verschijnen. U kunt dus ook kopteksten, alinea's en zelfs lijsten en voetteksten opnemen. Het belangrijkste gebruik van een