Share
Webdesign is in wezen slechts een evolutie van de principes en theorieën die werden gecreëerd tijdens de evolutie van drukwerk. De ontwerpindustrie bracht veel technieken op het web, maar sommige duurden langer om onder de knie te krijgen in een virtuele omgeving. Helaas hebben we geen enkel platform waarop onze inhoud kan worden weergegeven; we moeten vechten met meerdere browsers, besturingssystemen en schermformaten.
Naarmate het web zich heeft ontwikkeld, hebben ook de ontwerpprincipes die we waarnemen. Op grid gebaseerd ontwerp is de laatste jaren gestegen, waarbij ontwerpers hun site kunnen opmaken volgens een kolomvormig raster. Rastersystemen zijn een zeer populaire manier om elementen te ordenen en uit te lijnen, en om algemene volgorde aan een pagina toe te voegen, door proportionaliteit en balans toe te passen.
Op basis van onze kennis van het gebruik van verhoudingen en balans, kan een ander printontwerpprincipe worden gebruikt: het basislijnraster.
Het basislijnraster is een techniek die wordt gebruikt om uw webgebaseerde typografie te verbeteren. In wezen lijnt het al uw tekst uit op een verticaal raster waarbij de onderkant van elke letter op het raster wordt geplaatst, net als op gelinieerd papier. Het eindresultaat is een perfect georganiseerd geheel van teksten, met een onbewuste herkenning van evenwicht en congruentie.
Zoals ik al eerder zei, is afdrukken een statisch medium. Als u ontwerpt voor een afdrukindeling, kunt u aangeven wat al uw kijkers zullen zien. Vanwege de alternatieve platforms kan uw ontwerp echter op het web worden geïnterpreteerd, uw CSS zal onvermijdelijk uw lijnhoogte en andere typografische waarden anders weergeven voor verschillende gebruikers. Voor veel ontwerpers blijkt dit gewoon gissen en voorspellen wat de eindgebruiker zal zien.
Veel ontwerpers van gedrukte media gebruiken baseline-rasters in combinatie met hun ontwerpsuite, of het nu InDesign of een ander is. Grids in print zijn terug te voeren tot het begin van de jaren 1200 en zijn niet beperkt tot webdesign. In feite worden alles van de raster- tot de gulden snede (dat wil zeggen de meeste op wiskunde gebaseerde theorieën) gedeeld in andere aspecten van het leven, met name architectuur.
Het raster maakt het mogelijk om alle elementen van ontwerp - type karakters, fotografie, tekening en kleur - in een formele relatie tot elkaar te brengen; dat wil zeggen dat het rastersysteem een middel is om orde in een ontwerp te brengen. Een opzettelijk samengesteld ontwerp heeft een duidelijker, overzichtelijker en succesvoller effect dan een willekeurig samengestelde advertentie. - Josef M? Ller Brockmann
Laten we nu kijken naar hoe we ons basislijnraster eigenlijk maken.
Ten eerste moeten we een regelhoogte definiëren voor het basislijnraster op basis van een verhouding met onze lettergrootte; voor dit voorbeeld is 1: 1,5 een aardig bedrag dat ons een genereuze 50% leidende positie biedt. Als we een tekstgrootte van 12px hadden, zou de lijnhoogte (met deze verhouding van 1: 1,5) 18px zijn. 150% is een aardig bedrag dat ons een ontwerp biedt dat gemakkelijk te lezen is, maar deze waarde kan anders zijn. U moet echter proberen bij benadering 130% tot 160% te houden bij het overwegen van de lijnhoogte.
Voordat we verder gaan, zou u precies moeten weten hoe de CSS line-height-eigenschap werkt. De lijnhoogte is de totale, collectieve hoogte van de tekstregel, niet de tekst zelf. Het werkt door hierboven padding toe te voegen en onder de tekst om het uit te sparen. Als we daadwerkelijk tekst nemen en deze op een geregeerde achtergrond plaatsen, zien we de tekst tussen de regels staan, niet noodzakelijk op de regels.
Om het simpel te houden, laten we aannemen dat onze tekst een basisgrootte van 10px heeft. Door vast te houden aan onze ruwe ratio, betekent dit dat onze lijnhoogte 15px zal zijn, hoewel we dit kunnen variëren. (Om een kanttekening te maken, 10px is vrij klein en ik zou het niet altijd aanraden in de meeste gevallen, maar ik gebruik het hier puur om het op de wiskundeafdeling gemakkelijker te maken). Om verschillende elementen in ons basissysteem te laten passen, moeten we ze in onze CSS plaatsen.
Voordat we verder gaan, gaan deze voorbeelden er echter van uit dat je een of andere CSS-reset gebruikt. Als dat niet zo is, kunnen standaardmarges het werk dat we vandaag doen verstoren.
Om dingen uit te schakelen, moeten we, nadat we de lijnhoogte hebben ingesteld, een consistente marge onder elke kop en alinea passen. Omdat we hier met een 15px raster werken, schoppen we dingen af door de standaard ondermarge van een alinealabel te overschrijven (standaard is dit 1em, in dit geval 10px) om hetzelfde te zijn als onze lijnhoogte binnen de tekst. Hiermee wordt een proportionele lege regel onder elke alinea gemaakt die gelijk is aan de hoogte als er tekst in de alinea staat.
p margin-bottom: 15px;
Evenzo, voor kopteksten, moeten we gewoon doorgaan met het gehoorzamen van 15 pixels. Door eenvoudigweg onze marge naast de 150% lijnhoogte te markeren, creëren we een vergelijkbare, consistente breuk.
h1 font-size: 20px; regelhoogte: 30px; margin-bottom: 15px;
Voordat ik verder ga, wil ik er wel op wijzen dat uw tekst niet altijd daadwerkelijk aan de lijn staat, als u er een heeft toegepast op uw achtergrond. Maak je echter geen zorgen, zolang de regelhoogte hetzelfde blijft. Als uw tekst in het midden van uw regels zweeft, kunt u eenvoudig spelen met uw marges, maar dat is niet nodig.
Hoe gaan we vervolgens om met lijsten? Ten eerste willen we onze standaardmarge toepassen op dezelfde manier als bij onze alinea's. Dit geeft de pauzes een niveau van consistentie met de inhoud.
ul, ol margin-bottom: 15px;
Dit begint nu gemakkelijk te worden! Als je nog een regelhoogte van 15px hebt die elders is gedefinieerd, zullen je lijsten mooi aansluiten op de rest van de inhoud.
Beelden worden het een beetje moeilijker. Bij voorkeur willen we dezelfde consistentie in onze marges hebben, dus de afbeelding wordt op dezelfde manier behandeld alsof het een blok tekst is. Dit betekent wel dat uw afbeeldingen moeten worden gedimensioneerd in veelvouden van uw regelhoogte-waarde, in dit geval 15.
In mijn voorbeeld heb ik de afbeelding naar rechts laten zweven, dus ik heb een marge van 15 px toegepast op de linkerkant en de onderkant. Naast onze bestaande marge onder de alinea, gaf dit ons een consistente marge die gelijk is aan de rest van ons basislijnraster.
img.left float: left; marge: 0 0 15px 15px;
Dit zijn natuurlijk niet de enige elementen die we moeten aanpassen om te voldoen aan ons nieuwe basislijnraster. De sleutel is om ervoor te zorgen dat u binnen een consistente toename werkt, dus alles is beperkt tot hetzelfde raster. Dit kan ertoe leiden dat de harmonie en balans duidelijk worden op uw webpagina wanneer deze wordt gebruikt met grote hoeveelheden tekst.
Dit is ons voltooide voorbeeld, een eenvoudige webpagina met paragrafen, titels, een afbeelding en een lijst. Als je je liniaal wilt uitschakelen, kan dat, maar ik kan je verzekeren dat alles het consistente raster volgt dat is gebaseerd op onze typografie.
We zijn nog maar net begonnen met het gebruik van basislijnrasters. Het kan een stuk moeilijker worden wanneer je ze probeert toe te passen op complexere ontwerpen, waarvan er maar een paar op internet worden gebruikt. Het is echter mogelijk en kan resulteren in een gebalanceerd, proportioneel ontwerp dat kan bijdragen aan een betere eindgebruikerservaring.
Het basislijnraster is een goede manier om wat balans en proportie aan uw typografie toe te voegen. Het is een van die subtiele implementaties die een natuurlijk gevoel in uw ontwerpen kunnen toevoegen. In het geval van het basislijnraster komt onze typografie overeen met gestandaardiseerde spatiëring, wat het een harmonieus gevoel geeft.
Helaas moeten we echter nog steeds de dreiging van browser-incompatibiliteit bestrijden die ervoor kan zorgen dat onze CSS verschillend rendert voor verschillende gebruikers wanneer ze browsen op alternatieve browsers, besturingssystemen of apparaten. Dit is een taak die er niet uit lijkt te zien, hoewel het toevoegen van een basislijnraster andere voordelen biedt. Dit type rastersysteem kan bijvoorbeeld enorm helpen bij het schalen en daarom een browser dwingen om zijn CSS opnieuw te renderen. Baseline-rasters bieden iets meer flexibiliteit en aanmoediging voor de browser om dingen goed te doen.
Dit is een korter artikel dan gewoonlijk, maar dat komt omdat baseline-rasters niet zoveel hebben om uit te leggen of te laten zien hoe te gebruiken. De echte magie komt wanneer de ontwerper tweaks en testen om ervoor te zorgen dat zijn basislijnraster werkt, en bovenal het ontwerp visueel aantrekkelijk maakt (iets meer). Voor een alternatieve draai aan dingen, lees het artikel van A List Apart over dit onderwerp. Tot de volgende keer, gelukkig ontwerpen!
Accentsconagua