Kafli 15: Letur & litir

Þegar við birtum texta er mikilvægt að huga að leturgerð og hvernig textinn er birtur, hvort sem það er sem meginmál, fyrirsagnir eða á einhvern annan hátt. CSS hefur mörg eigindi sem skilgreina hvernig það er gert.

Leturgerð segir til um hvaða hönnun á letri við notum til að birta texta. Í grunninn höfum við aðgang að almennum leturgerðum:

og vef öruggum (web safe) leturgerðum sem aðgengilegar eru á lang flestum tækjum:

Við nýtum síðan font eigindi til að velja og breyta hvernig leturgerðin hagar sér:

Dæmi þar sem margar stillingar á leturgerð eru settar:

p {

  font-family: helvetica, arial, sans-serif;

  font-style: italic;

  font-variant: small-caps;

  font-weight: bold;

  font-size: 1em;

  /* 1.5 línubil, ef grunnstærð er 16px mun línan verða 24px há */

  line-height: 1.5;

}

Með font shorthand getum við skilgreint mörg af þessum gildum í einu:

/* font: (style|variant|weight) size/line-height family; */

font: italic small-caps bold 1em/1.5 helvetica, arial, sans-serif;

Þegar við viljum setja textann okkar á baseline og fylgja vertical rhythm eða lóðréttum hrynjanda þurfum við að passa upp á hver og einasta lína og bil á milli þeirra séu margfeldi af grunnstærðinni okkar. Þessi grunnstærð er sett sem einhver tala sem við verðum síðan að fylgja í öllum útreikningum, til þess að geta séð að við séum að fylgja kerfinu okkar er hægt að setja inn línur sem hjálpa okkur að sjá kerfi.

Með @font-face at reglunni getum við sótt aðrar leturgerðir og gert þær aðgengilegar í CSS. Við skilgreinum hvað leturgerðin heitir og hvernig hún hagar sér (er hún italic eða bold o.s.fr.) og, hvar hana er að finna og á hvaða formi.

Dæmi þar sem Roboto leturgerðin er sótt í ./fonts/roboto.woff2 og hún skilgreind fyrir normal style og 400 weight. Leturgerðin er síðan notuð fyrir p element:

@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 400;

  src: url(path-to-font) format('woff2');

}

/* skilgreinum aðrar gerðir, t.d. italic, í öðrum @font-face blokkum */

p {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 400;

}

Athuguð að leturgerðin mun aðeins vera rétt fyrir skilgreind eigindi, ekki verður rétt birting ef við notum t.d. italic eða bold (weight stærri en 400). Það sem vafri mun gera er að nota gervi italic (e. faux italic) þar sem letrinu er einfaldlega hallað eða gervi bold (e. faux bold) útlit þar sem letrið er þykkt jafnt. Það er mjög mikill munur á þessu og alvöru hönnuðu letri þar sem búið er að hugsa út í útlit og lesanleika letursins.

Til þess að fá raun leturgerðina fyrir mismunandi stíla þarf að sækja þær allar sérstaklega (oft margar skrár sem hægir á síðu), eða nýta variable fonts.

Þegar við sækjum leturgerðir getum við lent í því að tæki sé búið að þátta allt HTMLið okkar og sé búið að birta all efni, en leturgerðin (eða leturgerðirnar) sé ekki komin. Ef við stillum það ekki sérstaklega getum við lent í því að efnið sé ósýnilegt þar til leturgerðin sé komin. font-display leyfir okkur að stjórna þessu. Fyrir utan auto sér þetta eigindi um að ákvarða og birta letur eins hratt og mögulegt er. Eftir biðtíma er leturgerð með minni forgang notuð. Hvort sé skipt út er síðan stillingaratriði:

Variable fonts er nýleg tækni þar sem leturgerðir eru hannaðar og útfærðar þannig að hægt sé að stilla og stjórna útliti þeirra. T.d. er hægt að stilla þyngd mun nánar, oft alveg frá mjög „léttu“ (200) letri yfir í mjög „þungt“ (900). Þetta þýðir að aðeins þarf að sækja eina leturgerð og hægt er að fá allar útgáfur (og töluvert fleiri) af birtingu þess leturs. Margar af þessum breytum fylgja hefðum úr gerð stafrænna leturgerða og geta því verið óljósar.

p {

  font-variation-settings:

    'wght' 375, /* weight */

    'wdth' 100, /* width */

    'opsz' 16,  /* optical size */

    'GRAD' 88;  /* Grade */

}

Annar kostur við að geta breytt þessum gildum með CSS er að við getum notað kvikun og látið letrið okkar „lifna við“.

Nokkrar þjónustur eru til sem bjóða upp á ókeypis leturgerðir, til dæmis:

Við getum breytt útliti á texta:

Texta er hægt að skipta upp í dálka með columns. Við tilgreinum hámarksfjölda dálka sem við viljum skipta textanum í með column-count og hversu breiðir þeir mega í minnsta lagi vera með column-width. Vafrinn reiknar síðan út hvernig dálkar birtist best m.v. stærð foreldis, glugga o.s.fr. column-gap getur einnig tekið lengd og er þá pláss á milli dálka, column-rule getur skilgreint línu sem skiptir dálkum.

section {

  columns: 3 14em;

  column-gap: 2em;

  column-rule: inset 1px #999;

}

writing-mode eigindið leyfir okkur að stilla það hvort texti sé teiknaður lóðrétt eða lárétt og hvar hann byrjar.

writing-mode: horizontal-tb;

/* sjálgefið, lárétt frá vinstri til hægri, lóðrétt frá toppi til botns */

writing-mode: vertical-rl;

/* lárétt hægri til vinstri, lóðrétt frá toppi til botns */

writing-mode: vertical-lr;

/* lárétt vinstri til hægri, lóðrétt frá toppi til botns */

Við getum haft áhrif á það hvernig vefirnir okkar prentast út með CSS. Það á helst við síðan sjálf hefur mikið af óþörfum elementum fyrir prentun, t.d. valmynd eða fótur eða stýra því hvar síða má skiptast, t.d. viljum við ekki að mynd prentist á tveim síðum. Bæði er hægt að vísa sérstaklega í prent css með <link rel="stylesheet" media="print" href="print.css"> eða nota at-reglu:

@media print {

  nav,

  footer {

    display: none; /* ekki birta valmynd eða fót */

  }

  img {

    page-break-inside: avoid; /* forðast að prenta myndir á tveim síðum */

  }

}

Þegar við vinnum með myndir í CSS er það sem bakgrunnur á element. Við tilgreinum hvaða mynd á að birta og stillum síðan birtinguna á henni

Til að skilgreina margt af þessu í einu getum við notað background shorthandið:

/* background: [color] [image] [repeat] [attachment] [position] */

background: #fff url(bg.png) no-repeat left top; /**/

Við getum skilgreint stigul (gradient) sem bakgrunn á element en það eru litir sem blandast saman eftir ákveðnum formerkjum. Vafrar hafa mismunandi útfærslur og þarf að skilgreina með vafraforskeytum og gott að nota tól, t.d. Ultimate CSS Gradient Generator.

Til að breyta lit á texta elements notum við color.

Með rgba() og hsla() getum við stýrt því hversu gegnsæir litir eru frá, 0 alveg gegnsætt upp í 1 ekki gegnsætt.

Við getum einnig stýrt því hversu gegnsætt allt efni í elementi er með opacity sem tekur tölu frá 0 og upp í 1. Oft notum við opacity þegar við erum að láta eitthvað birtast eða hverfa á vefnum okkar. Einnig getum við notað opacity til að útbúa mjög mikið gegnsætt lag yfir myndir sem við ætlum að setja texta ofan á. Það gerir það að verkum að þó svo að myndin breytist muni textinn alltaf vera sýnilegur (t.d. ljós texti ofan á mynd með miklu hvítu).

.half-opaque {

  /* bakgrunnslitur er hálf gegnsær en allur texti mun vera ógegnsær */

  background-color: rgba(0, 0, 0, 0.5);

  color: #fff;

}

.protection {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* 80% gegnsæ vörn sem hægt er að setja ofan á mynd svo texti sjáist */

  background-color: rgba(255, 255, 255, 0.2);

}

.almost-all-opaque {

  /* allt efni í elementi er næstum alveg gegnsætt */

  opacity: 0.1;

}

Stundum höfum við element sem inniheldur texta en útlitslega viljum við birta mynd og hafa stjórn með CSS, t.d. logo í staðinn fyrir heiti fyrirtækis. Það væri einfaldlega hægt að hafa tómt element og bæta síðan myndinni á með CSS en aðgengislega gengur það ekki. Við getum haldið textanum á sínum stað til að hann sé lesinn en falið hann sjónrænt með CSS trikkum.

.hide-text {

  text-indent: 100%;

  white-space: nowrap;

  overflow: hidden;

}