Homepage » UI / UX » A tipográfia megértése 10 Hasznos eszközök és források

    A tipográfia megértése 10 Hasznos eszközök és források

    A tipográfia megértéséről szóló utolsó cikkemben arról írtam, hogy mi történik a tipográfia tervezésében, és hogyan manipulálhatom, hogy javuljon a webhely elrendezésében, és hogy javítsa a felhasználói élményt. Ebben a cikkben a lista vagyok 10 kedvenc eszközem a tipográfia számára az interneten.

    Ezek segíthetnek a HTML-rácsok és a tartalomterületek megépítésében, CSS-stílusok létrehozásában, betűtípusok létrehozásában és egy csomó egyéb jó dologban. Nézze meg az alábbi linkeket, és győződjön meg róla, hogy tudomásul veszi gondolatait a hozzászólás utáni területen.

    Ajánlott olvasás: A tipográfia megértése: Írás az interneten

    Betűtípus mátrix

    Ezt az online útmutatót a 24 órás tervező blog írta. A szabványos webes betűtípusok mátrix táblázata tartalmazza, amelyeket alapértelmezés szerint a különböző szoftvergyártók találnak. A népszerű címek közé tartoznak a Windows, a Mac OS X, a Microsoft Office és az Adobe Creative Suite programok.

    Szín kontraszt ellenőrzése

    A szín kontraszt gyakran problémát jelent, ha a szabványos fekete-fehér modellen kívül esik. Ha talál egy meccset, úgy érzi, mintha a design tökéletes lenne. A gyenge színkombináció azonban nagyon rossznak tűnik, és negatívan befolyásolja a tervezést. Ez a kis webes eszköz segíthet kiválasztani egy színkészletet, hogy megfeleljenek a stílus elrendezéséhez.

    HTML-Ipsum

    Szüksége van egy Lorem Ipsum eszközre, amely többet tehet, mint a kimeneti szöveg? Ez az online HTML-generátor kódblokkokat hoz létre a leggyakoribb oldalelemekhez. Néhány példa: rendezetlen listák, definíciós listák, webes űrlapok, táblázatok és sok más megoldás.

    Typechart

    A Typechart a CSS fejlesztői egyik kedvenc eszköze. Gyakran keresek egy adott betűtípust a rendszeremhez egy webprojekthez, de nem tudom megcsinálni az egész gyűjteményemet. Ez a félelmetes eszköz lehetővé teszi a betűkészletcsaládok népszerű választásainak szitálását, és akár a megfelelő CSS kód letöltését is!

    PX-to-EM.com

    Hacsak nem állítja vissza az alapértelmezett böngésző szövegméretét, valószínűleg olyan problémák találhatók, amelyek megfelelnek az ems-nek a pixelekkel. Ez a böngészőalkalmazás egy konverziós táblát és felhasználói felületet biztosít a px-em számára. Ez egy nagyon egyszerű eszköz, de ez egy praktikus útmutatót kínál, amely igazán egyszerű funkcionalitással rendelkezik - és nem tudod megverni az ingyenes árcédulát.

    CSS típus beállítása

    Nem ajánlom, hogy túl sokáig ragaszkodj a CSS Type Set-hez, mivel ez valóban kezdő eszköz. Lehetővé teszi, hogy CSS kódot hozzon létre a kiválasztott betűtípus tulajdonságok alapján. Miközben először nagyon hasznos, az idő múlva a mankóvá válik. És nem tudod motiválni, hogy magad is elsajátítsd a CSS tulajdonságokat. De ha időt kell takarítanunk egy projektre, ezt az eszközt nem lehet figyelmen kívül hagyni.

    tipikus

    Itt van egy igazán egyedi példa egy betűtípus előnézeti könyvtárra. A tipikus flipping magában foglal egy maréknyi betűtípust, amelyek az operációs rendszeredhez tartoznak. Automatikusan beolvassa a betűtípus-könyvtárat, hogy felveszi a legtöbb web-biztonságos megoldást. Összehasonlíthatja őket egymás mellett, és könnyedén választhat a kedvenc lehetőségek között. Ez egy másik nagyszerű időmegtakarító, amelyet könyvjelzőként jegyez, és nem gondolja az utolsó pillanatig.

    Tipográfiai rács

    Rengeteg beszélgetés van a rács tervezése során a HTML-ben és a CSS-ben. Valószínűleg megérti a hálózat működésének fogalmát, és a weboldal mérése pixelben nem különbözik. Ez a CSS-Tricks által készített grid-bemutató inkább egy vezérelt erőfeszítés, hogy bemutassa a digitális korszak tipográfiai alapjait. Ez sokkal fejlettebb téma a web design területén. De ha van némi türelmem, azt javaslom, hogy átnézzük a részleteket, hogy megtudjuk, hogyan befolyásolják ezek a hálózati tulajdonságok az oldal elrendezését.

    WhatTheFont!

    Mindannyian találtunk egy logót vagy képet, ami igazán jó, azonosíthatatlan betűtípust tartalmaz. Mi az, amit a Font néhány évig az interneten tett, és ez még mindig a kedvencem. Kiválaszthatja a feltölteni kívánt képet, és a szkript elemzi a képen belüli szöveget, hogy megfeleljen a hasonló betűtípusoknak. Az alkalmazás még akkor is összekapcsolja Önt a külső termékekkel, ahol minden fontot megvásárolhat.

    Alapvonal / vonalmagasság számológép

    Végül egy nagyon hatékony eszköz a vonalmagasság és a ritmus tulajdonságainak létrehozására. Egyszerűen adja meg az alap betűméret és a vonalmagasság értékeit, vagy mellékelje a saját CSS kódját az oldalra. Az alkalmazás néhány különböző stílusban előnézetet készít, így megismerheti, hogy ezek a tulajdonságok hogyan fognak megjelenni a saját webhelyén.