Typography

Avaa ChatGPT:ssä

Typografiakuviot käytetään yhtenäisten fonttityylien ylläpitämiseen sovelluksessa.

Fontti-perhe

Fontti-perheominaisuuksia käytetään määrittämään priorisoitu luettelo fontti-perheiden nimistä.

Oletuksena käytetään järjestelmän fonttikekoa:

• Segoe UI Windowsissa
• Roboto Androidissa ja Chrome OS:ssä
• San Francisco macOS:ssa ja iOS:ssä
• Muilla järjestelmillä käytetään varavaihtoehtoina Helvetica, Arial.

Voit soveltaa tai muuttaa fontti-perhettä käyttämällä --dwc-font-family -kustomoitua ominaisuutta.

Esimerkki

:root {
  --dwc-font-family: "Roboto", sans-serif;
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-family-sans	-apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'	Sphinx of black quartz, judge my vow.
--dwc-font-family-mono	Menlo, Monaco, 'Courier New', monospace	Sphinx of black quartz, judge my vow.
--dwc-font-family	var(--dwc-font-family-sans)	Sphinx of black quartz, judge my vow.

Fontin koko

Fonttikoko-ominaisuudet määrittävät joukon fonttikokoja valittavaksi. s on vakio koko, jota useimmat komponentit käyttävät oletuksena. Kaikki fonttikoot on määritetty em-yksiköissä.

EM-yksikkö

em on suhteellinen pituusyksikkö, joka on suhteessa fontin kokoon vanhempana, tyypillisesti typografisissa ominaisuuksissa kuten fontti-koko, ja elementin omaan fonttikokoon muissa ominaisuuksissa kuten leveys.

Esimerkki

.title {
  font-size: var(--dwc-font-size-3xl);
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-size-2xs	0.75rem	Aa
--dwc-font-size-xs	0.813rem	Aa
--dwc-font-size-s	0.875rem	Aa
--dwc-font-size-m	1rem	Aa
--dwc-font-size-l	1.125rem	Aa
--dwc-font-size-xl	1.375rem	Aa
--dwc-font-size-2xl	1.75rem	Aa
--dwc-font-size-3xl	2.25rem	Aa
--dwc-font-size	var(--dwc-font-size-s)	Aa

Fontin paino

font-weight CSS-ominaisuus asettaa fontin painon (tai paksuuden).

Esimerkki

p {
  font-weight: var(--dwc-font-weight-semibold);
}

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-weight-lighter	200	Aa
--dwc-font-weight-light	300	Aa
--dwc-font-weight-normal	400	Aa
--dwc-font-weight-semibold	500	Aa
--dwc-font-weight-bold	700	Aa
--dwc-font-weight-bolder	800	Aa

Rivikorkeus

Line-height CSS-ominaisuus asettaa rivikehyksen korkeuden. Sitä käytetään yleisesti tekstirivien välin asettamiseen.

Esimerkki

p {
  line-height: var(--dwc-font-line-height-m);
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-line-height-2xs	0.95	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-xs	1.1	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-s	1.25	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-m	1.375	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-l	1.5	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-xl	1.75	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-2xl	2	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height	var(--dwc-font-line-height-m)	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.