30 van de beste webtypografiebronnen online
Het lijkt erop dat er twee kampen zijn onder webontwerpers: zij die webtypografie omarmen, ermee experimenteren en nieuwe dingen uitproberen in vrijwel al hun ontwerpen; en degenen die het vermijden als de pest, kiezen voor standaard, webveilige lettertypestapels met weinig variatie.
Het lijkt ook veel van de ontwerpers die in de tweede groepswens vallen, omdat ze meer op de eerste groep leken.
De onderstaande bronnen kunnen u helpen bij het verbeteren van uw webtypografie, ongeacht op welk kamp u valt.
Er zijn tools voor het maken van unieke typografie, referenties en artikelen die u typografische principes kunnen leren, en veel inspiratie en nieuws om u op de hoogte te houden van de staat van webtypografie.
Typografie Tools
Typetester
Met Typetester kunt u maximaal drie lettertypen vergelijken, zij aan zij, met elke gewenste voorbeeldtekst. U kunt de baseline lettertypegrootte, lettertype, grootte, richting, tracking, uitlijning, woordspatiëring, decoratie, kleur en achtergrondkleur opgeven om een zeer nauwkeurig beeld te krijgen van hoe uw lettertypen er op de eigenlijke website uit zullen zien. Als u dan alles ziet zoals u het wilt, kunt u de CSS pakken.
HTML Ipsum
HTML-Ipsum is een lorem ipsum-generator speciaal voor webdesign. In plaats van alleen maar stukjes tekst te geven, kan HTML-Ipsum u vooraf opgemaakte tekst geven, zoals alinea's, geordende lijsten, lege tabellen, formulieren en navigatielijsten. Voorgeformatteerde tekst zoals deze is een geweldige manier om tijd te besparen bij het maken van mockups voor websites en initiële ontwerpen.
Typechart
Met Typechart kunt u door vooraf geformuleerde, webveilige lettertypen bladeren en deze bekijken zoals ze op een Windows-pc en een Mac worden weergegeven. U kunt de meegeleverde lettertypen sorteren op basis van de grootte, het lettertype en de nadruk.
WP-Typografie
WP-Typography is een WordPress-plug-in die u helpt uw standaard WP-typografie aantrekkelijker te maken. Het ondersteunt woordafbreking, regelafstand, intelligente tekens vervangen (inclusief aanhalingstekens, streepjes, ellipsen en wiskundige symbolen) en CSS-haakjes voor het stylen van specifieke dingen (inclusief ampersands, acroniemen en getallen).
CSS Type Set
Met CSS Type Set kunt u een tekstblok opmaken en vervolgens de CSS kopiëren. Het is een eenvoudige CSS-generator die geweldig is voor het tegelijkertijd opmaken van één lettertype. Hiermee kunt u het lettertype, de grootte, de afstand, de richting, de versiering en de kleur regelen.
Flippen typisch
Flipping Typical toont u tekst in verschillende lettertypen die u op uw computer hebt geïnstalleerd. Het is een geweldige manier om een aantal lettertypen naast elkaar te vergelijken, allemaal tegelijk. De enige waarschuwing: slechts enkele van de getoonde lettertypen zijn webveilig.
Typografisch raster
Een gevestigd verticaal ritme is een van de dingen die geweldige typografie onderscheidt van goede typografie. Het typografische raster helpt bij het vaststellen van dat verticale ritme voor jou. Het bevat ook een verticaal raster als richtlijn voor het plaatsen van zowel typografie als andere elementen.
Wat het lettertype
WhatTheFont biedt een eenvoudige manier om erachter te komen wat een bepaald lettertype is. Upload een afbeelding (of geef een URL op) en WhatTheFont bepaalt welk lettertype wordt gebruikt. Dit is een geweldige manier om lettertypen te vinden die zijn gebruikt in afbeeldingen of Flash-bestanden.
CSS met verticaal ritme
Zoals eerder vermeld, zorgt een consistent verticaal ritme ervoor dat de grote typografie zich onderscheidt van wat alleen "goed" is. Deze tool kan je helpen bij het maken van CSS voor typografie met een consistent verticaal ritme. Voer eenvoudig de lettertypefamilie, basistekstgrootte, basislijnhoogte en doellettergroottes in en bereken om CSS te krijgen voor een consistent verticaal ritme.
Baseline Rhythm Calculator
Nog een geweldige verticale ritmecalculator. Deze laat echter zien, hoe verschillende lettergroottes er naast elkaar uitzien wanneer ze zijn ingesteld met je gevestigde verticale ritme. Het is een geweldige manier om ervoor te zorgen dat alle lettergrootten die u gebruikt er goed uitzien.
Font Burner
Met Font Burner kunt u lettertypen op uw websites insluiten met behulp van sIFR, met behulp van een grafische interface. Er zijn momenteel meer dan 1000 lettertypen beschikbaar via Font Burner en er is ook een WordPress-plug-in beschikbaar. Het enige dat u hoeft te doen om het te gebruiken, is het lettertype dat u wilt gebruiken te vinden, de insluitcode te kopiëren en deze vervolgens in de code van uw website te plakken.
Blinde tekstgenerator
Met deze dummy-tekstgenerator kunt u niet alleen lorem ipsum maken, maar ook een aantal andere dummy-teksttypen. Tegelijkertijd kunt u die tekst ook rechtstreeks in de generator formatteren (klik op Geavanceerde opties) en kopieer vervolgens de CSS.
Baseline
De basislijn is een raster- en typografiekader met bestanden om de standaardinstellingen van de browser te resetten en een eenvoudige typografische lay-out te maken. Het is een goede optie voor ontwerpers die een rasterlay-out willen gebruiken en ook wat hulp willen bij het ontwerpen van de typografie van de site. De typografie-instellingen bevatten koppen, lijsten, alinea's, blockquotes en tabellen, evenals enkele andere markup-code.
Font Matrix
Font Matrix geeft de lettertypen weer die zijn meegeleverd met Mac- en Windows-besturingssystemen, Microsoft Office en Adobe Creative Suite, allemaal in een raster waarmee u gemakkelijk kunt zien welke lettertypen het meest waarschijnlijk op welke typen computers te vinden zijn. Als uw site bijvoorbeeld voornamelijk op ontwerpers is gericht, kunt u het eerste lettertype in uw fontstack maken dat bij Adobe Creative Suite wordt geleverd, terwijl als de site is gericht op zakelijke gebruikers, het eerste lettertype dat erin wordt opgenomen iets van Microsoft Office kan zijn.
typograph
Met Typograaf kun je experimenteren met verschillende schalen en andere elementen van verticaal ritme. Het bevat een verscheidenheid aan traditionele schalen (inclusief Le Corbusier en Fibonacci) en andere lay-outopties.
Web Font Services
Typekit
Typekit biedt lettertypen van verschillende typen verkopers en gieterijen, waaronder The League of Movable Type, FontFont en Veer (u kunt de volledige lijst met lettertypen bekijken zonder u aan te melden voor een account). Ze bieden ook geavanceerde besturingsopties voor het stylen van uw lettertypen, oneindige schaalbaarheid en een colofon die uw bezoekers vertelt welke lettertypen uw site gebruikt. Prijzen voor Typekit zijn redelijk, variërend van gratis voor gedeeltelijke toegang tot maximaal $ 100 / jaar voor sites met veel verkeer.
Kernest
Kernest is een weblettertype-service die OFL-, GPL-, GUST- en Creative Commons-lettertypen gebruikt, evenals die met commerciële licenties. Veel van hun lettertypen zijn gratis te gebruiken (de service zelf is gratis), terwijl andere abonnementskosten hebben vanaf een paar dollar.
Lettertypen Live van Ascender
Ascender biedt zijn eigen weblettertype-service, Fonts Live. Ze hebben meer dan 110 lettertypen beschikbaar, met lettertypen van Monotype, Microsoft, Bigelow & Holmes en anderen, evenals hun eigen lettertypen.
Google Font API
Google biedt een beperkte selectie van open source weblettertypen. Hoewel de selectie niet groot is, is deze gratis en wordt deze ondersteund door Google, wat betekent dat het niet waarschijnlijk is dat u problemen met de capaciteit of vertragingen oploopt.
TypeFront
TypeFont benadert weblettertypen een beetje anders. In plaats van een bibliotheek met webvriendelijke lettertypen aan te bieden, kunt u uw eigen lettertypen uploaden met een webvriendelijke licentie. Dit is een goede optie als de lettertypen die u wilt gebruiken momenteel niet worden aangeboden door een van de andere weblettertypediensten. Er is een gratis abonnement voor sites met weinig verkeer, evenals betaalde abonnementen.
Typotheek Weblettertypen
Typotheque biedt een eigen weblettertyperservice om hun lettertypen beschikbaar te maken voor @ font-face-implementaties. Het voordeel is dat er slechts eenmalige licentiekosten zijn voor zowel print- als webapplicaties. Het nadeel is dat de selectie beperkt is tot alleen hun lettertypen.
Typografiebronnen en artikelen
De elementen van typografische stijl toegepast op internet
Dit is een zeer grondige naslaggids voor iedereen die niet alleen de basis van goede webtypografie wil leren, maar ook meer geavanceerde technieken en principes. Het is opgesplitst in hoofdstukken en subhoofdstukken, inclusief horizontale en verticale beweging, blokken & alinea's, paginering, grootte en nog veel meer. Het is een work in progress, dus verwacht in de toekomst meer informatie.
Mooi webtype
Nice Web Type heeft heel veel informatie over de implementatie van webtypografie. Ze hebben "aantekeningen" over alles, van het begin van webtypografie tot het gebruik van CSS @ font-face. Ze bespreken ook regelmatig trends en nieuwe ideeën en hebben een pagina gewijd aan wat zij beschouwen als de beste lettertypen die er zijn.
12 Voorbeelden van alinatypografie
Deze verzameling voorbeeld-alinea-indelingen van Jon Tan biedt een goed startpunt voor iedereen die een site met veel tekst ontwerpt. Veel ontwerpers kijken voorbij aan alle mogelijkheden die horen bij paragraaf-styling en kiezen voor meer traditionele, conservatieve opties. Dit artikel bewijst dat het niet zo moeilijk is om uit de doos te stappen en iets interessants te doen met de alinea's in je ontwerpen.
Typografisch contrast en stroom
Dit is een fantastische gids van WebDesignerWall over de principes van flow en contrast in webtypografie. Het verdeelt deze principes in verschillende secties, inclusief grootte, lettertype / classificatie, kleur en gewicht.
Herziene lettertypestapel
In dit artikel wordt de uitbreiding van de gebruikelijke webveilige CSS-lettertypestapels besproken door andere vaak geïnstalleerde lettertypen te verkennen. Het onderzoekt ook de lettertypestapels van een aantal populaire websites, samen met aanbevelingen voor hoe ze hun stacks kunnen verbeteren.
Over webtypografie
Dit artikel door Jason Santa Maria op A List Apart is een zeer uitgebreide blik op het koppelen van lettertypen in de ontwerpen van uw website. Het is een onderwerp dat niet vaak wordt besproken, maar dat van groot belang is voor het maken van geweldige typografische ontwerpen op internet.
Denken met Type
Thinking with Type is de begeleidende website voor het boek met dezelfde titel van Ellen Lupton. Het biedt voldoende basisinformatie over typografie. Hoewel veel ervan is gericht op druktypografie, kan veel van de opgenomen informatie worden toegepast op webtypografie.
10 geweldige tips voor het verbeteren van uw webtypografie
Een lijst met tien eenvoudige dingen die u kunt doen om de typografie in uw websiteontwerpen te verbeteren. Het bevat informatie over lettertype, grootte, schaal en hiërarchie, toonaangevende en meer.
Typografie Inspiratie, Trends & Nieuws
Typophile
Typophile is een forum voor letterenthousiastelingen en typografen. Als je wilt weten wat er in de wereld van typografie gebeurt, is Typophile een geweldige plek om te kijken. Het is ook een goede plaats om hulp te krijgen bij typografische problemen die je hebt.
Ik hou van typografie
ILT is een blog geheel gewijd aan typografie. Het bespreekt zowel ontwerp- als zakelijke onderwerpen, vanuit een professioneel standpunt. Hun archief is enorm, dus er is voldoende informatie over huidige en afgelopen nieuws en trends om je bezig te houden.
we houden van typografie
WLT is een galerij van typografie, belettering, bewegwijzering en ander type. Gebruikers kunnen afbeeldingen indienen van het type waar ze van houden, en het is een geweldige plek om inspiratie op te doen voor typografie voor uw volgende project.
Typografie voor koppen
Elements of Design heeft een geweldige galerij met meer dan 120 voorbeelden van algemene typografie. Ze voeren het gamma uit van eenvoudig tot complex, in verschillende lettertypen en stijlen. Het is een uitstekende plaats om naar toe te gaan als je op zoek bent naar een beetje inspiratie. Ze hebben ook een galerij van trek aanhalingstekens met 20+ voorbeelden.
Typographica
Typographica biedt typebeoordelingen, commentaar en typografieboekrecensies. Hun typebeoordelingen zijn bijzonder informatief als u meer wilt weten over wat een goed lettertype is.
Behind the Scenes of Exquisite Web Typography
Dit is eigenlijk de eerste in een vijfdelige serie. Dit bericht kijkt naar de typografie achter A List Apart, waarbij de lettertypen en stijlen worden onderverdeeld die voor verschillende delen van de site worden gebruikt. Volgende berichten bekijken: Jesús RodrÃguez Velasco , Jon Tan , Designr.it , en De Codex Transportica .
Typesites
Typesites is een blog waarin regelmatig geweldige webtypografieontwerpen worden getoond. De sites die ze aanbieden zijn divers, maar ze bevatten allemaal inspiratie gebruik van het type.
Gecompileerd exclusief voor Webdesigner Depot door Cameron Chapman