Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Bekk Fagdag 3. mars 2020

Introduksjon

Bakgrunn

Juicy details

Spørsmål

Agenda

Del 1: Typografi

Alexander Vassbotn Røyne-Helgesen

Manager Interactive, Frontend @ Bekk

Designskisse og frontendimplementering, hvor skjærer det seg?

Bekk Fagdag 3. mars 2020

Del 1: Typografi

Introduksjon

Tech Lead for design systemer hos nåværende kunde

@phun_ky

Designskisse og frontendimplementering, hvor skjærer det seg?

Bekk Fagdag 3. mars 2020

Del 1: Typografi

Introduksjon

~23 år

Designskisse og frontendimplementering, hvor skjærer det seg?

Bekk Fagdag 3. mars 2020

Del 1: Typografi

Bakgrunn

Bakgrunn

Del 1: Typografi

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Del 1: Typografi

Den første "normale" paragrafen skal være 24px under lead paragrafen

  1. Font-size 18px
  2. Line-height 28px
  3. Margin-bottom 24px

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

.lead{
  font-family: "If Sans Bold", Arial, sans-serif;
  font-weight: normal;
  font-variation-settings: 'wght' 126;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: normal;
  margin-bottom: 24px;
 }

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

LGTM!

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Eller?

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

~ 20%

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Utviklere og designere snakker ofte forskjellige språk

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

CSS gir oss illusjonen at den forstår design

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

.heading{
  font-size: 18px;
  line-height: 28px;
 }

Det ser ganske lett ut?

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

CSS

Design

Til venstre, det CSS gjør. Til høyre er hva designeren forventer å se. CSS sentrerer teksten i linjehøyde. Designeren retter inn teksten til baseline (bunn av linjehøyde).

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Utviklere sitter igjen med å tweake CSSen til det ser bra nok ut

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

En tilnærming kan være å finne metrikkene (dimensjoner, egenskaper) og justere posisjonen basert på dette. Dette er en  langtekkelig, manuell tilnærming for hver eneste font og linjehøyde som er brukt

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Noen versjoner av typografikalkulatorer, for å finne metrikkene (dimensjonene, egenskapene)

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Fra venstre til høyre: 1. Ingenting er gjort 2. med basekick 3. Normalisert, med linjehøyder justert basert på baseline grid (4px/8px)

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Fra venstre til høyre: 1. Ingenting er gjort 2. med basekick 3. Normalisert, med linjehøyder justert basert på baseline grid (4px/8px)

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Font Metrics API

Del 2: Farger

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Takk for meg!

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Bekk Fagdag 3. mars 2020

Designskisse og frontendimplementering, hvor skjærer det seg?

Del 1: Typografi

Alexander Vassbotn Røyne-Helgesen

Manager Interactive, Frontend @ Bekk

Tech Lead for design systemer hos nåværende kunde

@phun_ky