25+ Tipográfiai trendek 2023-ra

 25+ Tipográfiai trendek 2023-ra

John Morrison

25+ Tipográfiai trendek 2023-ra

Szeretne egy gyors ráncfelvarrást adni a dizájnjának? Az új és érdekes tipográfiai trendek használata lehet a megoldás. A tervezők merész színeket, kivágásokat, gradienseket és még testreszabásokat is használnak, hogy olyan betűket hozzanak létre, amelyek kiemelkednek.

A betűtípusok megváltoztatása vagy egy kép vagy fejléc újrateremtése egy divatos stílusban friss megjelenést kölcsönözhet a designnak anélkül, hogy teljes körű átalakításba kellene kezdenie. Nem tudja, hol kezdje? Ez a lista a tipográfiai trendeket mutatja be példákkal együtt, amelyek inspirációként szolgálhatnak a felhasználásukhoz.

Íme, az idei év legfontosabb tipográfiai trendjei.

Betűtípusok felfedezése

Minden Caps Minden

Íme egy tipográfiai trend, amire nem is számítottunk: minden nagybetűs betű egy weboldal tervezésénél.

A megfelelő betűtípussal azonban működhet - és még olvasható is lehet anélkül, hogy túl agresszívnak tűnne -. Egy barátságos sans serif betűs betűtípus, sok szóközzel, megközelíthető, ha csupa nagybetűs betűket, sok helyet használunk a designban, és nagyon rövid szövegdarabokat.

Ha végiggörgeted a fenti Run Puma példát, láthatod, hogy pontosan ezt teszik. Az egész narratíva csupa nagybetűvel van írva, és bár merész, mégsem feltétlenül taszító. Ez a tipográfiai trend a megfelelő tartalommal és stílussal működik.

Vékony és sűrített

A következő két trend nagyon yin és yang jellegű. Itt a vékony és sűrített betűk egyre népszerűbbek. Az egykor tabu volt, de a nagy felbontású képernyők túlsúlya miatt ez a tipográfiai stílus olvashatóbbá és könnyebben feldolgozhatóvá vált.

Ennek a trendnek is csak a megfelelő szavakra és betűtípusra van szüksége ahhoz, hogy hatásos legyen, és akkor működik a legjobban, ha nem mélyül el kivételesen hosszú szövegrészekben.

A fenti példában a vékony és sűrített betűk tökéletesen illeszkednek az általános design stílusához, és a tekercsen egy monospaced, jól olvasható opcióval egészülnek ki.

Táblák

A vékony betűtípusok másik végpontján a táblás betűk használata áll.

Bár a vastag címsorok mindig is meglehetősen népszerűek voltak, sok tervező ódzkodott attól, hogy mindent beleadjon a táblákba, mert a nagybetűkhöz hasonlóan ezek is úgy tűnhetnek, mintha ordítanának a felhasználókkal. A trükk az, hogy a távolságtartást, a rövid megfogalmazást és az olvasható betűtípusokat úgy kombináljuk, hogy a használat előny, ne pedig kihívás legyen.

A fenti példában azt szeretjük, hogy a honlap alján egy kisebb méretű, táblás főcímet használunk, szuper barátságos és lágy képekkel, hogy ellensúlyozza a betűtípus súlyát. A szavak fontosságát megközelíthető módon emeli ki.

Két színű címsorok

Mostanában nagyon sok szín jelent meg a címlapokban. Ez a tervezési trend gyorsan terjed, és jó okkal - a színek segíthetnek hangsúlyt adni bizonyos szavaknak vagy kifejezéseknek, amelyek fontosak a tervezés szempontjából.

Ami egy kicsit más, mint amit most látunk, az az, hogy a színeket a szavak között szórjuk szét, és nem csak egy szóval a mondat elején vagy végén.

A megjelenés szép és elegáns, de a kihívás az, hogy figyeljünk a szavakra és arra, hogy hogyan olvashatók, ha csak az egyik vagy csak a másik színt nézzük. Biztosítani kell, hogy a szavak színtől függetlenül könnyen és gyorsan olvashatók legyenek.

Szöveg az útvonalon

Ezt a tipográfiai dizájntrendet talán egy perc alatt megtalálod. Figyeld meg a fenti példa bal alsó sarkában lévő kör alakú szöveget (zöld kör) - a betűk egy pályán jönnek létre, hogy kör alakú formát alkossanak.

Rengeteg weboldal használja ezt a technikát szöveggel - gyakran animációval is párosítva -, hogy segítsen a felhasználókat az oldalra terelni, vagy valamilyen cselekvésre vagy interakcióra ösztönözze őket.

Sok esetben ez a szövegelem is körkörös.

Amikor egy ösvényen szöveggel dolgozol, fontos, hogy néhány könnyen olvasható szót használj. Nem akarod, hogy az üzenet itt elvesszen a hatásban.

Háttér szövegelemek

A tervezők mindent felhasználnak a rétegzett háttér mélységének és hatásainak létrehozására, beleértve a tipográfiát is. A legtöbb esetben ez egy szuper finom technika (ahogy a fenti példában is látható).

Gyakran a túlméretezett betűk vagy szavak a háttér részét képezik, olyan módon beállítva, hogy nagyon kevés színkontrasztot kaptak az elsődleges háttérszíntől. Ez a háttérhatás szép mélységet hoz létre egy szinte vízjel hatásban.

Ami itt jó, hogy egy kis extra hangsúlyt kap egy kulcsszó vagy logó. A kihívást az jelentheti, ha a szöveg tetején szöveg van. Itt a méret és a méretarány kontrasztja létfontosságú, hogy minden olvasható maradjon.

Outline betűtípusok

A körvonalas betűtípusok nagy dolog.

Ezt a trendet leginkább a weboldalak fő szövegének hero területén találod meg. Bár a felhasználások némileg változnak, van néhány elem, amelyet szinte minden alkalommal megtalálsz:

  • Sans serif betűtípus
  • Csupa nagybetűs szöveg a körvonalazott betűkhöz
  • Kitöltött betűkkel párosítva
  • Túlméretezett szövegelemek

A körvonalas betűtípusok használata nagyon szórakoztató lehet. Csak az olvashatósággal kapcsolatban kell óvatosnak lenned. A betűk gyorsan elveszhetnek a háttérben lévő képek és videók között. Ezért vigyázz a színekkel, a kontrasztokkal és az elhelyezéssel.

És ne vidd túlzásba: a körvonalazott betűtípus a legjobban egy-egy hangsúlyos pont kiemelésére alkalmas, nem pedig az egész üzenet megalkotására.

Dőlt betűkkel

Ez egy olyan tipográfiai trend, amire talán nem is számítana - a dőlt betű.

Sokáig úgy gondolták, hogy a dőlt betűs tipográfiát ritkán használják a weboldalak tervezésében, mostanában azonban mindenhol megjelenik. A dőlt betűs tipográfia a hős fejlécektől kezdve a kisebb szövegelemeken át a más betűtípussal párosított hangsúlyos szavakig mostanában nagy divatja van.

A dőlt betűket gyakran úgy használják, hogy beleolvadjanak a körülöttük lévő betűelemekbe, akár félkövér vagy aláhúzott betűkkel is (mint a fenti példában), hogy a legjobban beleolvadjanak.

"Olvashatatlan" rétegek

A következő két tipográfiai trend és némileg hasonló, és mindkettő megszeg egy váratlan szabályt: kissé olvashatatlanok. De ez nem baj, mert a design többi része kitölti az üres helyeket, és interaktívvá teszi az oldalt.

Ebben a tendencia példában a túlméretezett szövegelemek egy előtérelem mögötti rétegben vannak. A képernyőn minden más típuselem jól olvasható, hogy bőséges támogatást nyújtson a nem előtérelemnek.

A fenti példában az előtérben lévő objektum is - a fenti példában - be- és kiolvad a szöveg fölött, hogy oda-vissza olvasható legyen.

Az utolsó elem, amely segít az egészet összefogni, az az elképzelés, hogy a szó nem létfontosságú a design szempontjából. Ez a márkanév, amelyet a logóból ismerhetsz, de kevésbé fontos, mint az, hogy mit csinál a cég/weboldal.

A képernyőről eltűnő szöveg

Az "olvashatatlan" rétegek trendjét követik azok a szövegelemek, amelyek elveszítik olvashatóságukat, mert animálódnak a képernyőn, illetve a képernyőről. Ez a tipográfiai hatás mindenütt jelen van, és gyakran párosul túlméretezett betűtípussal és csak néhány szóval, amelyek a képernyő bal oldala felé gördülnek.

Ez a tipográfiai trend akkor működik a legjobban, ha nincs sok más mozgás a képernyőn, és a szavak néhány másodpercnyi nézés után is olvashatóak. Ha a szöveg túl bonyolult, azt kockáztatja, hogy a felhasználók soha nem jönnek rá, mit mondanak a szavak.

Az előző példához hasonlóan ügyeljen arra, hogy a támogató szöveges elemek sok információt tartalmazzanak, hogy az emberek pontosan tudják, miről szól a design.

Kísérleti betűtípusok

A kísérleti betűtípusok divatosak, kifejező és érdekes stílusukkal rengeteg személyiséget adnak a tervezési projektekhez. A kísérleti betűtípusok sokféle formában léteznek - tartalmazhatnak funky formákat vagy vonalakat, színeket vagy animációt.

A legjobb része ezeknek a típusstílusoknak az, hogy egyedi és nagyon különleges hangulatot kölcsönözhetnek egy projektnek.

Számos különböző alapítótól vagy független betűtervezőtől származó kísérleti betűtípusokat találhatsz. Ha szeretnél egy pillantást vetni néhány új kísérleti lehetőségre, látogass el a Typelab oldalára.

Serifs

Visszatérnek a szerifek. Az egykor "online nehezen olvashatónak" tartott, a karaktereken apró extra vonásokkal ellátott tipográfia mindenütt felbukkan.

Egyébként pedig az online olvashatósági probléma a szerifákkal kapcsolatban egy teljes mítosz.

Ha webes projektekhez szerifákat szeretne használni, keressen olyan betűstílusokat, amelyekben a szabályos és a vastagabb vonások között vannak, és figyeljen a sortávolságra a fel- és lemenővégek, valamint a szerifák vagy ligatúrák esetében, hogy minden szó könnyen érthető legyen.

Ez a tipográfiai stílus a fenti példához hasonló egyszerű, szögletes szerifektől a bonyolultabb díszítésekig sok karakterrel és bájjal rendelkezik. Szépen feldobhatja az egyszerű és a teret jól kihasználó tervezési vázlatokat.

Rövid, kövér betűtípusok (alacsony X-magasság)

Egy másik nagy divatban lévő betűtípus stílus a rövid termetű és széles állású betűtípusok. Sok ilyen betűtípus rendelkezik csupa nagybetűs karakterkészlettel, de amikor kisbetűs betűket tartalmaznak, az alacsony x-magasságról azonosíthatók.

Ez a típusstílus általában akkor működik a legjobban, ha nem versenyez vele sok minden a vásznon. Az olvashatóság miatt rövidebb szavakhoz vagy mondatokhoz is ez a legmegfelelőbb.

Ezek a rövid, kövér betűtípusok a legjobban a szupermodern hangulatú mintákhoz illenek. Sok esetben szinte futurisztikusak a terjedelmükben és a kialakításukban.

Kézírás stílusok

A Sharpie filctoll stílus igen népszerű a weboldalak tervezői körében, ha megjelenítő betűtípusokról van szó. És rengeteg kézírásos betűtípus közül választhatsz, hogy pontosan a megfelelő megjelenést és hangulatot kapd.

A jelenlegi kézírásos betűtípusok nagy része a nyomtatott betűkre összpontosít, a nagy- és kisbetűs karakterek vastagabb vonásokkal és egy kis érdességgel rendelkeznek.

A betűtípusok tartalmazhatnak kis extra díszítéseket is, amelyek még különlegesebbé tesznek bizonyos karaktereket. A kurzív vagy script típusú kézírási stílusoknál valószínűleg hosszú farok és bonyolult suhintások is előfordulnak.

Balra igazítás

A balra igazított szöveg olvasható, elegáns, és klasszikus hangulatú, középponton kívüli egyensúlyt teremthet.

A balra igazított tipográfia használatának trükkje, hogy figyeljünk a sortávolságokra és a szöveg méretére. Gondoljunk a teljes szövegelemre egyetlen elemként. A több soros szöveg és a több szó nagyobbnak fog tűnni, mint néhány szó. Ennek megfelelően állítsuk be a méretet és a sortávolságot.

A még következetesebb megjelenés érdekében fontolja meg más elemek balra igazítását is. Hozzon létre egy rácsos "margót" az elemek nyugvására, mint például a fenti példa a The Urban Village Project-től. Vegye figyelembe, hogy a márkanév, a két szintű szöveg és a cselekvésre hívó gomb mind ugyanarra a láthatatlan síkra vannak balra igazítva.

Lekerekített Sans Serifs

Ez egy olyan trend, amelyet nagyjából bárki használhat, és olyan egyszerű, hogy talán észre sem veszed, amíg el nem kezded keresni. A projektek tele vannak lekerekített, egyszerű sans-serif betűtípusokkal.

Az a nagyszerű ebben a trendben, hogy mindenhez passzol. A lekerekített szeriusz nélküli betűtípusok a legolvashatóbb betűtípusok közé tartoznak. A legtöbb tervező, aki ezt a trendet alkalmazza, közepes vagy vastag, egyenletes vonalvezetésű betűtípusokat használ, megfelelő betűközzel is.

Ezzel a tipográfiai trenddel kapcsolatban minden az optimális olvashatóságra összpontosít. Ráadásul más tipográfiai trendekkel párosítva még modernebb megjelenést biztosíthat. A fenti példában lekerekített szeriusz nélküli betűket és balra igazított szöveget egyaránt használunk.

Finom árnyalatok

A tervezők nem tudnak betelni a gradiensekkel. (Bevallom, én is közéjük tartozom!)

A tipográfiában hangsúlyként alkalmazott finom gradiensek jelentik e trend következő evolúcióját.

A trendben az a jó, hogy a gradiensek olyan finomak, hogy elsőre talán észre sem veszed őket. Csak egy kis színeltérés van, ami segít a szemet a betűkön átvezetni.

Az árnyalatok a legjobban vastagabb betűtípusoknál és bizonyos szavak vagy mondatok kiemelésére használhatók.

Vigyázzon, hogy ne vigye túlzásba. A jó szövegátmenetek egyenletes kontrasztot tartanak fenn a szó egészén, hogy ne legyen zavaró az olvasás, és hogy a szöveg elkülönüljön a háttértől.

Animált tipográfia

A design egyik legnagyobb általános trendje az animáció. És nincs ok arra, hogy ez ne vonatkozhatna a tipográfiára is.

Egyre több designban használnak olyan betűket, amelyek mozognak, eltolódnak, vagy amelyekre a lebegő állapot hat (mint például a fenti példa). Mindezek a technikák interaktívabb, gazdagabb felhasználói élményt eredményezhetnek.

A szöveg animálásakor fontos figyelembe venni, hogy a felhasználók hogyan és hol fogják olvasni az információt (egyes animált elemek, például a videó, még nem működnek jól minden mobileszközön). Tegyen olyan kiigazításokat, hogy még ha az animáció nem is működik megfelelően, akkor is értékes felhasználói élményt nyújtson, ahol az üzenetek egyértelműek.

Ebben a tekintetben a legjobb szöveganimációk gyakran olyan betűkkel kezdődnek, amelyek világosak és jól láthatóak. Az animáció egy késleltetés után vagy a felhasználói interakció részeként kerül a játékba. Ez örömet okozhat és meglepheti a felhasználókat (talán még több időt is eredményezhet a helyszínen).

Gondosan fontolja meg a sebességet a tipográfiai animációk esetében - ha a szöveg túl gyorsan mozog, a felhasználók teljesen lemaradnak az üzenetről; ha a szöveg túl lassan mozog, a felhasználók esetleg elkattintanak, mielőtt elolvasnák az egész tartalmat. Pontosan megfelelőnek kell lennie. (A felhasználói tesztelés segíthet megtalálni az ideális sebességet.)

Halmozott szövegblokkok

Bár a tipográfia tendenciája a valamivel kisebb méret felé mutat, még mindig ugyanolyan súlya van. A tervezők több sornyi szöveget halmoznak egymásra, különösen a hős fejlécekben, hogy több szóval súlyozott üzenetet közvetítsenek.

A tendencia azért fontos, mert azt mutatja, hogy a felhasználókkal való kommunikáció egy kicsit teljesebbé válik, és kevésbé számítanak arra, hogy egy szó elég lesz ahhoz, hogy valakit rávegyenek egy dizájnra. A vizuálisan vonzó módon megjelenített több információ jobb megoldást jelenthet, ami nagyobb felhasználói elkötelezettséghez vezet.

Lásd még: 30+ A legjobb üzleti terv sablonok a Word 2023 számára

A több soros szöveg egymásra helyezésénél a legfontosabb szempontok a következők: olyan betűtípust kell találni, amely több betűvel (vagy akár csupa nagybetűvel, ami népszerű opció) is olvasható, megfelelő sortávolsággal rendelkezik, hogy a sorok könnyen megkülönböztethetők legyenek, és a szövegben lévő szünetek logikusak legyenek.a szavak elolvasására, és hogy a felhasználóknak a következő szövegsorra kell lépniük, mielőtt a design bármely más részét elolvasnák.

A sortörésekkel és a könnyű olvashatósággal kapcsolatos kihívások miatt a szöveghalmok gyakran a képernyő egyik oldalán helyezkednek el, hogy a tervezőnek nagyobb kontrollja legyen. Ez a struktúra harmóniát is teremthet egy szöveges elem és egy másik vizuális elem között a képernyőn, hogy aszimmetrikus egyensúlyt teremtsen, ami vonzó látványt nyújt.

Színes betűtípusok és típusok

Míg korábban sok volt a fekete-fehér szöveg a minimalistább stílusokban, a színek újra felbukkannak.

A színes betűtípusok egy külön kategóriát alkotnak, és mindenhol felbukkantak. Népszerűbbek, mint azt sokan eredetileg várták, és szórakoztatóan alkalmazhatók a tervezési projektekben.

A színes betűtípusokról mindent elolvashatsz itt, a kezdőknek szóló útmutatónkban. A színes betűtípusok koncepciója több projektet nyitott meg a tipográfiában használt színek számára is.

Míg a minimalistább stílusokban sok volt a fekete-fehér szöveg, addig a színek visszatértek. Sok tervező élénk színű tipográfiát használ a minimál stílusokkal, mint például a fenti Tilted Chair. A szín extra vizuális érdeklődést és hangsúlyt adhat a színes szavaknak.

Az élénk opciók, mint például a példában szereplő piros, segítenek vonzani a tekintetet, és nagyszerű ugródeszkaként szolgálnak az üzenetküldéshez, a márkaidentitás kialakításához és a felhasználók bevonzásához a designba.

Kiemelt típus

Ez egyike azoknak a trendeknek, amelyeket kissé meglepő látni: a betűk kiemelése a hangsúlyok kiemelése érdekében.

Az egyszerű kiemelésektől kezdve a háttértől elkülönített betűkön át az aláhúzásokig és az animált kiemelésekig rengeteg módja van az ilyen típusú tervezési trendek használatának. És bár leírva kissé furcsán hangzik, a tényleges látvány elég lenyűgöző.

Ez a technika olyan szavak esetében a legjobb, amelyeket a felhasználóknak valóban látni kell. Rövidebb szövegblokkok esetében is jobban működik, hogy a kiemelés ne legyen nyomasztó, és ne vegye át az irányítást a design felett.

Lásd még: 10 tipp az ikonok tervezéséhez, amelyek nem szarok

Kivágások és fedések

Mindkét technika sok vizuális érdekességet nyújt, és szórakoztató lehet létrehozni.

A réteghatások nagyszerű módja annak, hogy egy design sokkal kevésbé laposnak tűnjön. A tipográfiával való kivitelezés szép lehetőség lehet.

A kivágások és az overlay-ek olyan szövegelemekre utalnak, amelyeknek nincs színkitöltése. A kivágás lehetővé teszi, hogy a háttérrétegben lévő bármi megjelenjen a betűtervezésen keresztül, mint például a fenti példában az animált sportképek. Az overlay gyakran átlátszó betűket jelent a háttér felett, így a betűkön keresztül a háttér is látható, miközben a betűk olvashatók.

Mindkét technika sok vizuális érdekességet nyújt, és szórakoztató lehet létrehozni. A legjobban nagy betűkkel, nem sok szóval és kijelzős betűtípussal működnek.

Az átfedések nagyszerűen működnek fotókkal, textúrákkal vagy akár videoháttérrel. Csak ügyelj arra, hogy elkerüld a sok más design-effektust, amikor ezt a technikát használod (nem akarod túlterhelni a felhasználót).

Más elemekkel való rétegezés

A legtöbb projektben a szöveges és egyéb elemek meglehetősen elkülönülnek egymástól. Ez az elképzelés azonban eléggé megváltozott, és a tervezők már nem zárkóznak el attól, hogy a szöveg és egyéb elemek átfedjék egymást. A végeredmény nagyon jó lehet, és segíthet a felhasználóknak, hogy egy kicsit jobban a képernyőn megjelenő szavakra koncentráljanak.

Míg a tipográfiai trend leggyakoribb gyakorlati felhasználásai a dobozos képeket vagy a színeket átfedő szöveges elemek, az MJND még egy fokkal feljebb rúgja a dolgot. Ez a design a képen látható személyt úgy olvasztja össze a tipográfiával, hogy az kivágódik körülötte (mintha a személy belesétálna a szavakba).

Ez a technika a nyomdai tervezésből származik, ahol népszerűbb - és őszintén szólva könnyebben kivitelezhető -, és lenyűgöző megjelenítést eredményezhet. A trükk a megfelelő kép és az egyes betűk olvashatóságának megőrzése. (Vigyázzunk, hogy ne hozzunk létre nem kívánt szavakat a hiányzó karaktervonások vagy -részek miatt.)

Szöveg gradiensekkel

Minden idők talán legkevésbé értékelt design technikája a gradiens. Komolyan rossz hírnevet kap a rossz használat miatt. De ha jól csinálják, a gradiensek lenyűgözőek. Ez a helyzet a fenti példánál, a Design Spin-nél.

A főcímnek csak a megfelelő részén található egy egyszerű kék-zöld színváltás. Könnyen olvasható és érthető, és pontosan a megfelelő helyet hangsúlyozza. A gradiens modernnek és frissnek hat, és egy kicsit több vizuális intrikát ad, mint egyetlen szín önmagában. Tökéletesen illeszkedik az oldal minimalista kialakításához, és a görgetőgombban lévő gradienssel együtt a főoldalon is van egy irányjelző.tipográfia a következő lépéshez, amelyet a felhasználónak meg kell tennie.

"Overdone" hatások

Nincs olyan hatás, ami nem jöhet szóba.

Nem gyakran fordul elő, hogy a "túlzásba vitt" kifejezést kedvezően használjuk, amikor bármilyen tervezési technikáról beszélünk. De amikor a túlzásba vitt tipográfiai trendről van szó, akkor működhet.

Ez a típustrend retró hangulatú, és olyan szöveg és szöveghatások jellemzik, amelyek annyira túlzásba viszik, hogy el kell olvasni a szavakat. Vannak kontúrok és árnyékok, fazetták és fakók és őrült színek. Nincs olyan effekt, ami ne lenne megengedett.

És minél több effektet halmozol fel, annál több felhasználó nézheti meg. Ez a stílus a legjobban egy egyszerű dizájn sémával működik, mint például a fenti Schnitzel Love.

Következtetés

Személy szerint a tipográfiai trendek az egyik kedvenc témám, amibe szívesen belemerülök. A betűkészítés minden designnak alapvető része.

A kedvenc tipográfiai trendjeim azok, amelyek a megszokott határokat feszegetik, de az olvashatóságot megtartják. Mit szeretsz a tipográfia terén? Beszéljünk róla a Twitteren (csak említsd meg a @carriecousins és a @designshack nevet!).

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.