Share
Laten we serieus worden over mobiele typografie; we weten allemaal dat mobiel enorm is, en we kunnen ook beamen dat typografie super belangrijk is binnen een ontwerp. Typografie is een fundamenteel ontwerpelement; Persoonlijk begin ik er het liefst mee bij het maken van elk ontwerp, omdat het helpt om een goed podium te vormen voor de rest van het ontwerp. Laten we het er dus over hebben hoe we onze mobiele typografie zo goed mogelijk kunnen maken.
Bij het ontwerpen voor mobiel is onze grootste vijand waarschijnlijk de fysieke schermgrootte. Sommige smartphones zijn super klein, zoals de oude, maar nog steeds veel gebruikte iPhone 4 / 4S. Volgens de UNITY gebruikt 15,9% van de mensen dit verouderde model nog steeds. In de VS komt dat neer op bijna 24 miljoen mensen. Ja, dat zijn veel mensen met kleine, piepkleine schermen. Dan hebben we ook grotere schermen zoals de nieuwe iPhone 6 Plus, Galaxy Note 4 of Nexus 6. Het feit dat er zo'n groot bereik is in schermformaten is een beperking op zich, want wat er goed uit ziet op een iPhone 4 zal niet altijd even goed zijn zien er goed uit op iPhone 6 Plus.
Misschien wilt u naar uw analyses kijken en zien wat het populairste apparaat van uw site is, pas het aan. Het is echter algemeen aanvaard dat een apparaat-agnostische benadering u op de lange termijn beter zal dienen.
Bekijk de afbeelding hierboven om te zien hoe de tekst op dezelfde grootte wordt weergegeven op elk apparaat. Ik kon zelfs niet helemaal "Kop 1" op de iPhone 5S passen, wat aantoont dat een responsieve typografie begint met de schermgrootte in het achterhoofd.
Enkele andere obstakels bij het ontwerpen voor een smartphone zijn de verlichting in de omgeving van de gebruiker en hoe dicht ze de telefoon op hun gezicht houden..
Laten we beginnen met de latte. Omdat we onze telefoons met onze handen gebruiken, hebben we de neiging om ze op armlengte of zelfs dichter bij ons gezicht te houden. Dit betekent dat het type kleiner kan zijn op een telefoon omdat de afstand tussen het scherm en onze ogen korter is dan die van een laptop of een desktopmonitor.
De mogelijkheid hebben om de lettergrootte te verkleinen, betekent ook dat we meer tekst in dezelfde hoeveelheid ruimte kunnen opnemen, waardoor we meer rustgevende "maatregelen" krijgen. Dit helpt op zijn beurt de kleinere schermgrootte te verlichten, maar slechts in geringe mate. Je kunt dit in actie zien in de onderstaande afbeelding.
Kleiner type voor kleinere schermenMensen gebruiken hun smartphones altijd, overal. In de metro, in het park, op hun banken of bed. Uw app of website kan in verschillende omgevingen met verschillende belichting worden gebruikt, wat betekent dat u ook rekening moet houden met het contrast. Lezen in het park is mogelijk - zelfs bij direct zonlicht - als het contrast van de tekst hoog genoeg is tegen de achtergrond. In dit scenario helpt het hebben van grotere tekst ook. Het is minder nodig om scherp te stellen op het contrast als de meting wordt uitgevoerd in een metro, waar de verlichting niet zo veel meer verblindt, of 's nachts in het bed.
Gizmodo heeft een uitgebreid artikel gepubliceerd over welk mobiel apparaat (inclusief tablets en smartphones) buitenshuis domineert. Ze voerden een vergelijking uit van hun kleuren in relatie tot verschillende zonlichtopties. Het blijkt dat Samsung Galaxy S beter presteerde dan de iPhone 4 in indirect zonlicht, dat is de ergste van de slechtste buitenverlichting. Bekijk het volledige artikel als u op zoek bent naar meer details hierover.
Mijn punt is simpel, er zijn zoveel bewegende delen als het gaat om het ontwerpen voor leesbaarheid op een mobiel apparaat. Ken uw gebruikers zodat u het beste kunt bepalen hoe hun leeservaring eruit moet zien, begin met hun telefoontypen en eindig met hun omgeving.
Er zijn veel tutorials beschikbaar die je helpen bij het bepalen van de specifieke pixels die je tekst zou moeten hebben, gebaseerd op gouden verhoudingen of gewoon kijken naar wat er goed uitziet. Het vinden van een goede typografische schaal voor desktop is eenvoudig. Het is eigenlijk best gemakkelijk om het ook voor mobiele apparaten te doen. Typecast heeft een prachtig artikel waarin wordt uitgelegd hoe u de metingen voor uw mobiele en desktop-typografie kunt uitvoeren: een meer moderne schaal voor webtypografie. Het artikel legt duidelijk uit waarom typografie responsief moet zijn. Maar ik wil meer details krijgen dan simpelweg zeggen: "Mensen hebben de neiging om anders te lezen op mobiele apparaten" - het is zoveel meer dan dat!
U ziet dat mobiel het minste is vast medium waarmee we als ontwerpers te maken hebben gehad. Zoals ik eerder heb gezegd, lezen mensen overal op hun telefoon, in steeds veranderende omgevingen. Om hun leeservaring het best te optimaliseren, moeten we de psychologie begrijpen van wat in feite zorgt voor een goede leeservaring.
Ik zou graag willen denken dat het ontwerpen van de beste leeservaring voor mobiel begint met de perfecte hoofdtekst. Welk lettertype u ook kiest, u moet ervoor zorgen dat het flexibel genoeg is om bestand te zijn tegen verschillende schermformaten in dezelfde lettergrootte en er nog steeds goed uit te zien. Als u Helvetica Neue kiest voor uw lettertypefamilie, moet u ervoor zorgen dat deze er goed uitziet op een iPhone 4s in 16px en op een Nokia en een Galaxy-telefoon.
Houd ook rekening met het lettertype als u een lettertype selecteert, omdat sommige telefoons normale, gewaagde of lichte teksten anders weergeven dan andere.
Dat klopt, koppen zijn net zo belangrijk! Je hebt meer creatieve vrijheid met koppen omdat ze wat leesbaarheid voor impact kunnen opofferen, maar ook hun schaal overwegen. Een kop, zoals aangetoond in de eerste afbeelding met mobiele schermformaten, is veel waarschijnlijker om onleesbaar te worden omdat deze te groot is op een klein scherm. Een grote kop is ook een verspilling van ruimte, omdat u zou kunnen voorkomen dat gebruikers het vlees van de inhoud te pakken krijgen.
Een ander ding om in gedachten te houden bij het perfectioneren van je lichaamstekst is het verticale ritme. Verticaal ritme is een term die verwijst naar de verticale spatiëring en uitlijning van typografie en andere elementen op de pagina. De voorwaarde ritme betekent een repetitief patroon. Een goed verticaal ritme zorgt ervoor dat de leeservaring gemakkelijk is, omdat het een uitgebalanceerde lay-out mogelijk maakt die de lezer gemakkelijk de ogen begeleidt.
Genomen van http://modulargrid.orgOf de basislijn nu los of strak is, de consistentie is het belangrijkste. Maar het is belangrijk om te beseffen dat de basislijn op mobiele apparaten de kleine schermgrootte kan weerspiegelen. Wees niet bang om dingen aan te scherpen, vooral als je de lettergrootte hebt verkleind, maar een comfortabel verticaal ritme hebt om ervoor te zorgen dat lezen voor je lezer soepel verloopt.
Als je hulp nodig hebt om aan de slag te gaan met het uitzoeken van de beste metingen voor je verticale ritme, heeft Andre Morton een verticale ritmegenerator op zijn blog.
Er zijn enkele vuistregels die ik graag met je wil delen als het gaat om het ontwerpen van typografie in het algemeen, maar dat geldt vooral voor responsieve en mobiele typografie.
U moet nooit afspatiëring aanpassen voor websites of apps van welke aard dan ook. Het is een moeilijk proces en zeer onbetrouwbaar voor het web! Bij kwaliteitslettertypen is de tekenspatiëring goed uitgedacht en als het lettertype dat u hebt gekozen geen goede tekenspatiëring heeft, kunt u het.
Als er geen duidelijke vod aan de rechter- of linkerkant van uw tekst is, kan dit net zo goed worden gerechtvaardigd (en tekst mag nooit op het web worden gerechtvaardigd). Een slechte doek veroorzaakt gaten en gapende breuken in de witruimte; het is gemakkelijker om tekst te lezen en te scannen als er een duidelijke vod is. Hoe breekt uw tekst op verschillende schermformaten? Een oplossing kan een zeer eenvoudige aanpassing zijn die ofwel een paar pixels wegneemt van het element dat de tekst bevat, ofwel er een beetje aan toevoegt.
Er is niets zozeer misleidend als het proberen om een klein gebied op een telefoon te tikken en niet te kunnen omdat het te klein is - of erger nog, in plaats daarvan op iets anders tikken. Misschien is het beste advies hier om er zo min mogelijk van te maken! Als er slechts één inline-link is, is het eenvoudiger om erop te tikken, omdat er niets anders is dat per ongeluk kan worden geopend. Zorg er vervolgens voor dat de link duidelijk is. Dit kan op verschillende manieren worden gedaan, bijvoorbeeld door de links vet te maken of door te leunen op het standaard onderstrepingspatroon. Soms is alleen het veranderen van de kleur niet genoeg als het contrast te laag is (weet u nog hoe we het hadden over kleuren van schermen en verlichtingsproblemen?)
Zorg er ten slotte voor dat inline-links meer aanraakgebied hebben dan wordt waargenomen. Dit kan worden bereikt door te solliciteren weergave: inline-block; om elementen te verankeren, maar zorg ervoor dat een vulling of extra lijnhoogte je solliciteert, vervormt de hoofdtekst niet.
Het ontwerpen van typografie voor mobiel heeft veel bewegende delen waarvan je op de hoogte moet zijn. Ik hoop dat dit bericht u enig inzicht heeft gegeven over hoe u uw ontwerpen voor mobiel kunt verbeteren. Laat ons uw eigen tips en trucs weten in de opmerkingen!
Accentsconagua