Een kijkje in: betere typografie voor moderne websites

Digitale tekst kan in zoveel smaken worden geformatteerd. 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 rootlay-outontwerp afbreekt. In deze weergave kunt u eenvoudig zien hoe typografie van pagina naar pagina kan stromen 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 verbeterd. 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 hebben ook hun tol geëist van de oude manier om weblettertypen te bouwen.

Het is nu heel goed mogelijk om uw eigen lettertypen toe te voegen aan de eigenschap CSS @font-face . U kunt elk TrueType- (.ttf) of OpenType (.otf) -bestand gebruiken en lokaal een kopie op uw server opslaan. Dan met wat CSS3 magie, neem de familie overal op uw webpagina op!

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 bouwen in combinatie met aangepaste lettertypen. Als 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 te renderen.

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 eenmaal 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. Het is net zo belangrijk hoe uw paginatekst eruit ziet als 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 meeste inhoud bevatten, moet u veel tijd besteden aan prototypen voor de juiste pasvorm. Alinea's worden gebruikt om uw bericht in bit-sized brokken onder te verdelen 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 hebben precies de juiste touch 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. Zo is hyperlinktekst vaak een andere kleur dan de rest om op te vallen als 'klikbaar'. U kunt werken met vetgedrukte of cursieve woorden die de nadruk leggen op uw 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 voor koppen om te zien wat je leuk vindt.

Photoshop is uitstekend voor dit scenario. U kunt ook verschillende koppen in HTML coderen om te zien hoe ze er in de browser uitzien. Het is belangrijk om te werken met de paginastroom en ontwerpkoppen op basis van hun rang.

Bijvoorbeeld uw

tags moeten het meest opvallen tussen al uw paginakoppen.

en

zijn de populairste tags en worden door Google aanbevolen 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.

Spacing 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 het hoofdgedeelte van de inhoud. 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 holdingstekst 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.

Wanneer u uw links opmaakt, moet u het volgende in overweging nemen - hoe wijzigingen eruitzien in uw pagina-instellingen, aan wat voor soort achtergrondkleur u werkt en welke kleur de contrasttekst is?

Links moeten schaamteloos van de pagina worden weergegeven als klikbare items - dat is tenslotte hun functie. Daarom werkt het oude blauw met onderstreepte teksteffect zo goed. Maar als u vindt dat een alternatieve kleur beter werkt, moet u het uitproberen. Er is geen one-size-fits-all oplossing voor link-ontwerpen. Blader gewoon wat rond op het web en u zult zeker iets bijzonders samenstellen.

Een interessant punt is een paar functies die u moet proberen te 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 een vergelijkbare 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 online aanbieden van een kleine verzameling ideeën, producten, mensen of links 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 een lijst met items bekijken. Houd elk lijstitem gescheiden en bevindt zich op een nieuwe regel op uw pagina. Voeg wat extra ruimte tussen hen toe, indien mogelijk. Dit geeft wat ademruimte en lijkt een mooie breuk voor de artikeltekst. Als je wilt kun je 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. U kunt proberen een lichte achtergrond of pictogrammen toe te voegen. A List Apart heeft een geweldige beschrijving van temmenlijsten waarvan ik denk dat het een aantal 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.

Hoe citaten in de pagina te 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 bijgewerkt, wat het citeren van blockquotes een stuk eenvoudiger maakt.

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