Share
Weet je wat ik leuk vind? Het internet. Specifiek, ik hou van dat gevoel wanneer je op een van die prachtige kleine hoekjes van schoonheid stuitert met een bijzonder mooie typografie. Vandaag plaatsen we het vergrootglas op 10 geweldige voorbeelden van webtypografie in een nieuwe maandelijkse reeks die u nieuwe typografische inspiratie bezorgt!
Inspirerende web-typografie, Een Webdesigntuts + maandelijkse serie: Tijdens mijn reizen op het world wide web heb ik kennis genomen van de voorbeelden van sites die mij als ontwerper inspireren. Door het type te gebruiken op een manier die innovatief, kunstzinnig of gewoonweg fantastisch is, hebben deze sites me geholpen mijn eigen typografische vaardigheden te verbeteren ... en ik hoop dat ze ook voor u inspirerend zullen blijken te zijn. In deze serie zullen we niet alleen deze sites vermelden ... we zullen eigenlijk onderzoeken hoe en waarom ze werken.
Zonder verder uitstel presenteer ik hierbij de samengestelde verzameling van deze maand van 10 voorbeelden van inspirerende typografie. Als ik deze maand mijn favoriet niet hit, moet u deze hieronder delen in het gedeelte Opmerkingen!
De designblog van Brian Hoff maakt gebruik van een mengsel van Sentinel en Tungsten voor de koptekst en andere kleine koppen, en FF Dagny Web Pro voor zowel de hoofdtekst als de berichttitels. De combinatie van deze twee verbluffend verschillende stijlen van type werken heel goed van elkaar af.
De header ziet er trots en professioneel uit, met de twee uitstekende gezichten van Hoefler & Frere-Jones die elkaar prachtig aanvullen. De gecondenseerde, verticale vorm van Tungsten contrasteert met de fijn gedetailleerde cursieve Sentinel om een titel te produceren die zowel leesbaar als aangenaam is voor het oog.
Voor het lichaam gebeurt er niet echt veel, en ik denk dat dat de manier is waarom de ontwerper het wil hebben. Dagny is een prachtig, no-nonsense lettertype dat zowel in kleine tekst als in grotere, gewaagde titels werkt. Niet veel anders om hier te zeggen, afgezien van het is een geweldige keuze van het lettertype, en een die iedereen die het ziet, zeker zal waarderen.
Ah ja. Geen goede typografische post zou compleet zijn zonder Mike Kus '2009 herontwerp van carsonified.com te vermelden. De site heeft enorm grote Cooper Black in dienst, een lettertype waarvan echte macht is duidelijk wanneer ingesteld op zo'n enorme omvang. Je ziet alle details van het lettertype en krijgt echt een idee van wat voor soort bedrijf Carsonified is.
De rest van het type op de pagina komt uit de weg, met nauwelijks merkbaar Helvetica in de navigatie, en Georgia voor de body-kopie en de meeste titels. Ik weet niet zeker welk lettertype wordt gebruikt voor de titels aan de rechterkant van hun startpagina, maar ik zie dat de handgetekende eigenschappen mooi contrasteren met het bijna typemachine-achtige gevoel van Cooper, alsof ze twee kanten van de dezelfde munt.
Echt, echter, wat ik denk dat het bij elkaar past, het ontwerp van deze site zijn de kleuren. Elke pagina heeft een unieke achtergrondkleur die perfect past bij de kleur van de tekst. De kleuren verschillen echt van pagina tot pagina, maar ze delen allemaal een nostalgisch, levendig gevoel, een die werkt met groen, blauw en zelfs fel oranje. Het mooie van de tekstkleur is dat deze genoeg contrast heeft tegen een donkere achtergrond, evenals een zeer heldere achtergrond.
De site van Tyler Galpin is een prachtige mix van industrieel, gedetailleerd en emotioneel. Hij gebruikt een breed scala aan lettertypen voor slechts de slogan - iets dat er meestal stom uitziet, maar hier kiest Tyler precies de juiste om het te laten werken. Hoewel ze er zo anders uitzien dan het blote oog, geven alle lettertypen een enkelvoudig bericht weer.
Niet om het punt te believen, maar ik zou willen zeggen dat het belangrijkste kenmerk van deze site het enorme aantal lettertypen is dat er doorheen wordt gebruikt. Het ene moment kijk je naar een mooie slab-serif, dan scroll je wat naar beneden, en wat is dit? Een script? Hier? Je kunt het zien door te kijken hoeveel tijd en moeite het kostte om het type te kiezen dat je in slechts enkele seconden kunt bekijken.
Een ander belangrijk element van deze site is hoe elke pagina werd "op maat ontworpen," als u wilt, zonder een standaard CMS-sjabloon te gebruiken. Elke pagina is ook voorzien van nog meer lettertypen, waardoor consistentie ontstaat door het totale gebrek aan consistentie op de hele site.
Laten we praten over kleuren. Galp.in heeft een van de meest ingetogen kleurenpaletten die ik de laatste tijd op het web heb gezien. Eenvoudig zwart op wit, met spatten van geel en rood die voor nadruk worden binnen gegooid, en benadrukken het. Het is echt verbazingwekkend wat een enkele kleur kan doen om een opvallend visueel contrast in de juiste handen te creëren. Mooie typografie, prachtige website.
De website van Jan Cavan is heel uniek. Ze vertrouwt sterk op textuur en niet zozeer op type. Dus waarom is zij opgenomen in deze roundup? Het type dat ze heeft op haar site is zeer smaakvol gekozen. De hoofdtitel van elke pagina is bijvoorbeeld ingesteld in een levendig, retro-stijl script, een gedurfde keuze voor een gedurfd ontwerp. Deze 'retro script'-lettertypen zijn echter lastig te gebruiken op het internet ... en dit ontwerp vermijdt zorgvuldig all-cliche' met een ingetogen toepassing.
Ik kan niet echt zeggen waarom ik zo veel van dit ontwerp geniet, maar ik denk dat het iets te maken heeft met de kleur, of misschien met de textuur? Wacht, ik denk dat ik het heb. Alle elementen van het ontwerp passen perfect bij elkaar en niemand krijgt meer aandacht dan een ander.
Er zijn ook veel subtiele dingen aan de hand hier. De titels van de blogposts zijn ingesteld in 'caps', een beslissing die goed past bij het stijlvolle serif dat ze kiest om ze in te stellen. Al deze kleine dingen in het ontwerp van Jan dragen bij aan de retro sfeer die de pagina uitstraalt.
?? De studio van Nathan Strandberg & Katie Kirk. ?? De naam van het spel is hier subtiliteit en deze prachtige website stelt niet teleur. Van het prachtige type tot de levendige kleuren, het is echt een ervaring om achthourday.com te bezoeken. Alle lettertypen zijn smaakvol gekozen, met een kop in een mooie schreefloze letter en een subtitel. Alle tekst is in evenwicht; niets roept om uw aandacht. Dit is een zeer gastvrije website.
Zoals ik al zei, speelt kleur een grote rol in de typografie, maar ook in het ontwerp als geheel. Die mooie rood-oranje wordt overal gebruikt, vergezeld door andere zachte kleuren. Op deze site lijkt het type en de kleur te zijn intrinsiek samen geweven. Het type zou niet werken zonder de kleur, en omgekeerd.
Er is niets speciaals aan de lettertypen zelf. Natuurlijk zien ze er nog steeds goed uit, maar lang niet zo perfect als nu. Dat maakt deze site vooral leuk om te onderzoeken om te ontdekken hoe het type en de kleur met elkaar in wisselwerking staan.
Een geweldige website voor een geweldig doel door Matthew Smith. Wat ik leuk vind aan deze site is de aandacht voor detail. Kijk naar die subtiele cursivering in de titels. Mooi. Ik bewonder zijn gebruik van Georgië voor de koppen. Het wordt normaal gesproken gebruikt voor hoofdtekst, maar als je het in de maat zet die hij voor de kop heeft gedaan, pronkt het echt prachtige details van het eeuwenoude lettertype.
Let op de manier waarop het licht boven de tekst in de kop schijnt. Het zijn die kleine dingen die een ontwerp geweldig maken.
Georgia wordt ook gebruikt voor die mooie knoppen, met die combinatie van caps en cursief. Dit ontwerp laat echt de flexibiliteit van één lettertype zien en ik ben er dol op.
Ik wil ook vermelden dat bijna alle tekst op de pagina echte tekst is, ingesloten via @ font-face, dus petten van Mike Meyer voor dat.
Een ander ontwerp van Mike Kus, deze met een zeer unieke typografie. Omdat het meeste beeld gebaseerd is, kan ik niet zeggen welk lettertype in dit ontwerp wordt gebruikt, maar ik kan wel zeggen dat het het beeld dat Twitter als bedrijf uitstraalt heel goed weergeeft; het is leuk, licht en een beetje gek.
Wat kleur betreft, je hebt het vertrouwde Twitter-blauw dat op de hele site wordt gebruikt voor het grootste deel van de tekst, en het werkt prachtig. Er is ook een heel mooi rood gebruikt voor verfraaiingen en aandachttrekkers die zeer vreedzaam naast de pagina's van de site kunnen bestaan.
Wat mij hier zo verbaast, is dat, zelfs als het bedrijf niet bij elke beurt het bedrijf vermeldde, je nog steeds kon zeggen dat dit een Twitter-site is. Het projecteert hun unieke merk op elk niveau, met het type, de kleur, de illustratie en zelfs de textuur. Wat een leuke kleine site.
Slab-serif, sans-serif, serif, deze site gebruikt allerlei soorten en gebruikt ze goed. Het is een goede keuze om de schrijvende reeksen voor de grootste titels te verlaten, waardoor het zware opheffen, als je dat wilt, wordt overgelaten aan cursief Times New Roman - een lettertype dat normaal niet wordt gebruikt in webontwerp, maar een lettertype dat goed werkt als het correct wordt gebruikt.
De kleine body-kopie wordt overgelaten aan Tahoma, een andere gedurfde keuze die goed werkt in een klein formaat. Je merkt amper dat het er zelfs is, en ik weet zeker dat de ontwerper het zo wilde hebben.
Nogmaals, ik ben niet zeker wat er wordt gebruikt voor de grote titels, hoewel ik waarschijnlijk mijn geld zou steken op Rockwell, een echt goede keuze.
In kleur gebruikt dit ontwerp een zelden gebruikt licht op donker schema dat niet werkt met langere tekstlichamen, maar voor een beeldzware site als deze, denk ik dat het heel, heel goed werkt. Zoals gewoonlijk wordt een andere kleur gebruikt voor nadruk, en in deze situatie is die kleur een mooie, rijke sinaasappel. Het is een zeer stijlvolle keuze, en ik heb veel respect voor de beslissing.
Voor ?? een verzameling van schuimige awesomeness, ?? door het dynamische duo Jina Bolton en Meagan Fisher komt het woord dat in me opkomt classy. Alle typen zijn zeer leesbaar en in kleuren ingesteld die een mooie aanvulling vormen op de heerlijke afbeeldingen die de site bevat. Terwijl ik naar deze site kijk, ben ik onder de indruk van de kwaliteit van de details in dit ontwerp, van het mooi geplaatste type tot de koffie geïnspireerde kleuren.
Ik ben er vrij zeker van dat het logo en de ondertitels in Archer zitten, een eenvoudige, leesbare, slab-serif van Hoefler & Frere-Jones. Nogmaals, dit, in combinatie met Georgië, zorgt voor een stijlvol, leesbaar ervaring.
Een ander ding waar ik absoluut dol op ben in deze site zijn de kleuren. Omdat het duidelijk een koffie-thema-site is, zijn de kleuren niet alleen passend, maar ook mooi. Toegegeven, het effect is waarschijnlijk groter gezien het aantal koffie gekleurde afbeeldingen op de site.
Kortom, een absoluut geweldige website van totaal geweldige mensen.
?? Knap ontwerp en ontwikkeling, ?? leest Iron to Iron, en knap is het. Het hele ontwerp voelt aan trots en op de een of andere manier vorstelijk, alsof het zorgvuldig is vervaardigd door de interne ontwerper van de rechtbank.
Type-wijs, dit ontwerp is eenvoudig heerlijk. Die gecondenseerde verduisterde tekst is geniaal. Je kunt het niet echt lezen, maar het legt niet echt druk op je om het te proberen. Het zijn die soorten details en bloeit die deze site mooi maken. In dit geval is er geen praktisch doel voor de venn-diagram-achtige vorm op de achtergrond van de kop, maar het ziet er geweldig uit, en voegt nog een andere dimensie toe aan dit ontwerp.
De paragrafen van het lichaam zijn gezet in no-nonsense Georgia, en ik vind dat het hen goed van pas komt, vooral als je dat breed-zijn-zonder-vindt dat ze eronder zitten (voor de koppen).
Transparantie in de kleuren wordt met groot succes gebruikt, waarbij de meeste kleuren eenvoudig verschillende niveaus van dezelfde kleur en blauwgroen zijn.
Wat een echt geweldige manier om deze kleine verzameling prachtige websites te beëindigen.
Welnu, het is weer die tijd van de post. We hebben gelachen, een beetje gehuild, maar samen zijn we tot de conclusie gekomen, en hier moet ik je verlaten. Zoals ik hierboven heb genoemd, als ik deze maand je eigen favoriet niet heb geraakt, deel deze dan hieronder in de sectie Reacties! Ik zal het zeker volgende maand controleren op het bericht!
Lees meer over Web Typography in mijn bericht over Het juiste lettertype kiezen: een praktische gids voor typografie op het web!
Accentsconagua