Nemrég írtam egy hosszabb cikket az aranymetszés, az „isteni arányok” használatáról a webdesignban. Emlékeztetőül: az aranymetszés matematikailag nagyon pontosan leírható arányrendszere jelenik meg számtalan természeti formában, többek között az emberi test belső arányaiban is, és emiatt az egymáshoz képest az ilyen módon viszonyuló elemeket – aszimmetriájuk ellenére is – arányosnak, harmonikusnak érzékeljük. Gyakorlatban felhasználva pedig ez a titokzatos 1 : 1,618 aránypár, vagy a csodás csigákat rajzoló Fibonacci számsor (1, 1, 2, 3, 5, 8, 13, 21…) segíthet elegánsabbá, kiegyensúlyozattabbá tenni a műveinket, legyen szó web- vagy UX designról, az oldalunk tipográfiájáról vagy a logók, grafikai elemek belső szerkezetéről.
A mai cikkben egy olyan eszközt szeretnék bemutatni, ami, ha lehet, még egyszerűbbé teszi az aranymetszés bevezetését a honlaptervünkbe. Ez a GRT, azaz Golden Ratio Typography Calculator, egy online webalkalmazás, amivel gyerekjáték elvégezni a megfelelő számításokat, és ráadásul még egy titkos fegyvert is tartogat a tarsolyában, amivel rengeteg webdesigner szívébe azonnal belophatja magát.
Lássuk, hogyan is kell használni!
Az oldalt megnyitva egy nagyon egyszerű interfésszel találkozhatunk, három mezőt kell kitölteni, azaz összesen három dolgot kell előre tudnunk:
- melyik betűkészletet szeretnénk használni (az elérhető fontok listája egy legördülő menüben választható),
- mi legyen az alap folyószöveg betűmérete,
- hány képpont széles legyen a tartalom, amit éppen be szeretnénk rendezni a layoutban.
Ha mindezt eldöntöttük és bevittük az adatokat a menübe, egy gombnyomás, és megkapjuk az összes számot, amire szükségünk lehet, azaz a H1, H2, stb. betűméreteket, és a hozzájuk tartozó sorközöket.
Az összes lényeges számot a bal oldali oldalsávon láthatjuk, de a jobb oldali szöveges mezőben (ami azonnal a beállított fontra és betűméretre vált) is rejlenek meglepetések: a + jelekre bökve kibomlik egy demo layout, ahol az összes lényegi elemet akcióban láthatjuk, majd a második fülön jön a meglepetés, itt ugyanis a megtervezett design teljes reszponzív CSS kódját is legenerálja nekünk a GRT kalkulátor.
A kapott CSS kód egy .grt osztály alá van berendezve, ezt innentől szabadon használhatja bárki a saját webdesignjában. Nagyon kényelmes és roppant hasznos eszköz, adott helyzetben okos használata sok fejfájást és számológépezgetést megspórolhat az egyszeri webdesignernek.
