Végső útmutató a tipográfiához: Pontméret, Nagybetűk és Kisbetűk, Em és En Kötőjelek és egyebek

A tipográfia egy olyan terület, amely az írott szóval, valamint a betűk és karakterek megjelenítésével foglalkozik.

Ugyanazok a betűk különböző módon stílusozhatók a különböző érzelmek közvetítésére. És mindenféle kompromisszum van a stílus és az olvashatóság körül.

Ebben a cikkben megnézzük a tipográfiával kapcsolatos kisebb - de még mindig fontos - részleteket, például a pontméretet, a nagy és kisbetűket, az em vs en kötőjeleket, a rendszermagot és egyebeket.

Pontméret

A pontméret a standardizálás bevezetésének a tipográfiába. A pontméret a legkisebb mértékegység.

Fémtípusban a pontméret arra a fémtest magasságára vonatkozik, amelyre a betűkép karakterét rávetik. A digitális betűtípusokban a fém testet egy láthatatlan doboz helyettesíti, em em néven . Minden karakter belefér abba a négyzetbe vagy mezőbe. A betűtípus em mérete megegyezik a pont méretével.

html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }

A pontméretet a betűméreten kívül a vezető (vonalmagasság), a vonalhossz és egyéb elemek mérésére is használják.

A digitális betűtípusokban egy pont megegyezik 1/72 hüvelykkel . Tizenkét pont tesz egy képet. Hat pica egy hüvelyk. A picák és pontok ábrázolásának általános módja a következő:

  • 1 pica = 1p
  • 1 pont = 1 pont vagy p1
  • 6 pica és 3 pont = 6p3
  • 7 pontos Open Sans 9 pont vezetéssel = 7/9 Open Sans

Az optimális nyomtatási pontméret általában 10-12 pont, míg a web esetében az optimális pontméret 15-25 pont.

A CSS-ben meg kell adnia a betűméretet em-ekben vagy rem-ekben, mint pixelekben, mivel az előbbiek méretezhetőek. Nemrégiben sok szó esett a folyadék tipográfiáról az újonnan bevezetett vw és vh egységekkel.

Tudjon meg többet itt: Folyadék tipográfia

Ne feledje, hogy az ugyanazon pontméretben beállított különböző betűtípusok az egyedi jellemzőik miatt nem tűnnek azonos méretűnek, nevezetesen: x-magasság, körvonal-moduláció vagy kontraszt és karakter-szélesség.

Nagy-és kisbetű

A nagybetűket (UC) alternatív módon sapkáknak és tőkének nevezik. Ez egy nagyobb betűkészlet. A kisbetűk (LC) a kis karakterek betűtípusa. Mindaddig, amíg a Shift billentyűt nem nyomják meg, és a Caps lock nem aktív, minden beírt betű kisbetűvel van feltüntetve. A nagy- és kisbetű gyakran szinonimája a Majuscule és a Minuscule szónak.

Sok nyelv betűinek két különböző írásos ábrázolása van, nagy- és kisbetű , más néven majuscule és minuscule.

A nagy- és kisbetűk gyakran keverednek ugyanabban a szövegdarabban. Az esetek használatáról a nyelvtan dönt, de különféle esetstílusok is léteznek. Bizonyos esetstílusok elterjedtek a számítógépes programozásban, névadási szokásoknak nevezik őket, például a CamelCase és a snake_case.

Nagybetűs:

ABCDEFGHIJKLMNOPQRSTU VWXYZ

Kisbetű:

abcdefghijklmnopqrstu vwxyz

A nagybetűs írás a következő okok miatt fontos:

  • Jelszavak: A jelszavak megkülönböztetik a kis- és nagybetűket, ezért a nagybetűs írás további biztonsági szintet jelent.
  • Mérések: A számítógépes mérés és más mérések kezelésekor a nagybetűk fontosak a mérés pontos típusának azonosításához. Például az „Mb” (röviden a megabit) és az „MB” (rövid a megabájt) két különböző típusú mérés, különböző értékekkel.
  • Parancsok
  • Fájlnevek, könyvtárak és elérési utak.

Ems és Ens

Az Ems és az Ens az „írásjel” nevű írásjel egyik formája. Bár megjelenésükben hasonlóak a kötőjelhez, különböző célokat szolgálnak.

Em Dash

Használjon Em kötőjelet a mondat törésének jelölésére. Helyettesítse vesszővel vagy szünet jelölésére egy mondatban. Használják őket arra is, hogy idézetet rendeljenek egy előadóhoz. Az Em kötőjel egy em széles - egy betűméret pontméretének szélessége. Ne tegyen szóközt egy kötőjel elé és után.

Például: A szomszéd házának zaja - megöl.

  • Parancs egy Em kötőjelhez mac-on: Shift-Option-kötőjel
  • Parancs az Em kötőjelhez Microsoft Word-ben: Alt + Ctrl + (mínusz)
  • Em kötőjel HTML-ben: vagy

En Dash

Használjon En kötőjelet a „to” szó helyettesítésére vagy számtartomány jelölésére. Az En kötőjel az Em kötőjel szélességének fele. Ne tegyen szóközt a kötőjel elé és után.

Például: Az első világháború 1914–1918 között tartott.

  • Parancs egy En kötőjelhez mac-on: Option-kötőjel
  • Parancs egy En kötőjelhez a Microsoft Word-en: Ctrl + (mínusz)
  • En kötőjel HTML-ben: vagy

Kerning és követés

A Kerning két különálló karakter közötti szóközre utal.

A követés a szavak közötti távolságra utal.

Egyes betűtípusokat nem úgy terveztek, hogy azokat túl lazán kerneljék vagy kövessék, és fordítva. Ha az egyik kern vagy túl szorosan vagy túl lazán nyomon követi, megkockáztatja az olvashatóság és az olvashatóság feláldozását.

Annak eldöntésekor, hogy mennyire szoros vagy laza a rendszermag vagy a szöveg nyomon követése, ajánlatos először figyelembe venni a szöveg interakciójának mértékét. Ha ki akarják nyomtatni, milyen messze lesz a néző a kinyomtatott szövegtől? El fognak hajtani? Háttérvilágítású képernyőn olvasható lesz?

Figyelembe kell venni a pozitív és a negatív talajt is a követés és a kernelés során. A túl szoros vagy túl laza követés kínos alak / föld viszonyokat eredményezhet, amelyek elvonják a felhasználót.

Olvashatóság és olvashatóság

Olvashatóság

Az olvashatóság azt jelenti, hogy meg tudjuk különböztetni a szöveg különböző karaktereit. Az olvasható szöveg azt jelenti, hogy könnyen értelmezhető. Az olvashatóság figyelembevételével nézze meg a betűtípus egyedi jellemzőit. Néhány szempont a következő:

  • Minden betűtípust a kontextusának és a tervezett felhasználásnak megfelelően kell használnia . Vizsgálja meg a történelmet és a legjobb felhasználási eseteket. Például: A Garamondot a legjobban nyomtatott szövegek nagy részéhez, míg Georgia a képernyőkhöz.
  • Ne feledje, hogy a betűkészlet a megjelenített szöveget vagy a törzsszöveget tartalmazza .
  • A betűkészlet x-magassága a betűkészletben az „x” kisbetűk mérete. A közepes vagy magas x magasságú betűkészlet még kis méretben is olvasható szöveget eredményez.
  • Hagyományosan a serif betűtípusok olvashatóbbak a törzsszöveg számára, mint a sans-serif társaik.

Olvashatóság

Az olvashatóság azt jelenti, hogy a szavak csoportját vagy a szövegtömböket úgy rendezzük el, hogy a szöveg könnyebben hozzáférhető legyen. Az ötlet az, hogy csökkentse a szöveg elolvasásához szükséges erőfeszítéseket.

Stephen Coles megjegyzi, hogy az olvashatóság nemcsak a „Tudod olvasni?” Kérdést vet fel. de vajon „el akarja-e olvasni?” .

Jason Santa Maria A webes tipográfia című könyvében rámutat, hogy az olvasás nem lineáris tevékenység. Szakcádnak nevezett oda-vissza mozgással olvastuk , amely a szemünk egyik pontról a másikra ugrál. Ezenkívül az ismerős szavakkal ellátott szöveg megkönnyíti számunkra az olvasást. Az olvashatóság mérlegelésekor a következőkre kell emlékezni:

  • A kontraszt a löket vastagságának változására utal a levél különböző részein. Nagyobb a kontraszt, annál nagyobb a stroke változása. Használjon közepes vagy alacsony kontrasztú betűtípust hosszú szövegtestekhez.
  • A vonalmagasság a két sor közötti távolságra vonatkozik. Nem akarja, hogy a szövegtömb ne legyen túl szoros vagy túl laza. A vonal magasságát CSS-ben a 'line-height' tulajdonsággal szabályozhatja. A legtöbb szöveg esetén 1,2 és 1,5 közötti értéket állíthat be (egységek nélkül).
  • A sorhossz (mérték) a szövegsorban szereplő átlagos karakterek számára vonatkozik. A nagy sor hossza akadályozza az olvashatóságot, mivel megnehezíti a szemünk számára a szöveg beolvasását. Általában soronként körülbelül 45-75 karakter az optimális a szövegtest számára. Ha azt tervezi, hogy a sor hosszát meghaladja, akkor vigyázzon a vonal magasságának növelésére is, hogy a szöveg két sora között legyen elegendő hely. A CSS-ben megadhatja a tároló szélességét, és az em egység használatával közelíthet egy meghatározott számú karakterhez, a betűkészlet szélesség / magasság arányától függően. Példa: szélesség: 35em;
  • A követés a szöveg karakterei közötti távolság beállítására vonatkozik. A követés hozzáadása a szóköz karakterek közötti hozzáadását jelenti és fordítva. Kis betűméreteknél, azaz kevesebb, mint 10 pontnál, a követés hozzáadása segít az olvashatóság javításában. Hasonlóképpen, nagy fejlécek esetén használja a negatív nyomkövetést, hogy közelebb hozza a betűket. A nyomkövetést a CSS-ben a „betűköz” tulajdonság segítségével szabályozhatja. Például: levélköz: 0,05em;
  • A betűméret a szövegben használt betűtípus méretére vonatkozik. Mobil megjelenítéshez használjon legalább 12 képpontos méretet. A betűméretet a „font-size” tulajdonságon keresztül vezérelheti a CSS-ben. Példa: font-size: 48px;

Amint láthatja, az optimális olvashatóság és olvashatóság érdekében sok tényezőt kell figyelembe vennie. Ne feledje, hogy a fent leírt tényezők egyikére sem vonatkoznak szigorú szabályok. Ezek csupán iránymutatások, amelyek segíthetnek a tipográfiai szem edzésében.

Szín és színérték

A színelméletben egy tónusértéket úgy állítunk elő, hogy fehér, szürke vagy fekete színt adunk a kiválasztott színhez. Ez nem változtatja meg az árnyalatot, de a színtelenséget, más néven telítettséget. A tónusérték tárgyalásakor három fő kifejezést kell megvitatni: árnyalat, hang és árnyék.

Az árnyalat a fehér szín hozzáadása. Az árnyalat felhasználható egy terület kiemelésére, valamint a mélység illúziójának megalkotására az objektumon.

A tónus a szürke szín hozzáadása. A tonális szín elnémítottabb és kevésbé telített színt hoz létre.

Az árnyalat a fekete szín hozzáadása. Az árnyék felhasználható sötétebbé, a terület pedig a mélység illúziójának megteremtésére szolgál.

A színek tónusértékének megváltoztatásával létrehozhatja a képek mélységének illúzióját, valamint megváltoztathatja a telítettség szintjét, hogy jobban alkalmazza a színt a kívánt érzelemhez vagy hangulathoz.

További információ a tipográfiáról:

  • Tipográfia: levélformák anatómiája
  • 8 pontos rács: tipográfia az interneten
  • Miért változtathatja meg a tipográfia a tervét?