Vy över typografi (Heading 1)

Här visar vi hur typografin fungerar i praktiken: rubriker i olika nivåer, brödtext, länkar, italic, bold, listor och citat. Syftet är att ge en tydlig överblick över hur textstilar beter sig i ramverket innan design och varumärkesanpassning appliceras.

Struktur genom konsekventa textstilar (Heading 2)

Cypress bygger på ett definierat typografisystem som används konsekvent genom hela projektet. Det minskar avvikelser i produktionen och gör det enklare att arbeta parallellt i team.

Det innebär bland annat:

• Fördefinierade rubriknivåer (H1–H6)
• Standardiserad brödtext med optimerad radlängd
• Tydliga länkstilar integrerade i textflödet
• Stöd för italic och bold som semantisk betoning
• Enhetlig hantering av citat och listor

Vill du se hur strukturen används i praktiken kan du gå vidare till våra grundsektioner.

Visa grundsektioner

Rubriknivåer och hierarki (Heading 3)

Rubriknivåerna i Cypress (H1–H6) är definierade för att skapa en tydlig och konsekvent innehållsstruktur. Varje nivå har en bestämd funktion, från sidans huvudrubrik till underrubriker inom sektioner och mindre informationsblock.

Det handlar inte om att välja storlek visuellt utan om att använda rätt nivå semantiskt.

Hierarkin är inte bara visuell utan också strukturell. Korrekt användning av rubriknivåer:

• Skapar en logisk läsordning
• Förbättrar tillgänglighet
• Underlättar SEO och indexering
• Gör innehållet mer förutsägbart i produktion

H1 används en gång per sida, medan H2–H6 organiserar innehållet inom och mellan sektioner. Storlek, radavstånd och marginaler är balanserade för att fungera både i korta och längre textflöden.

En tydlig hierarki (Heading 4)

Bra typografi skapar inte bara ett visuellt uttryck – den skapar orientering. I Cypress används rubriknivåerna konsekvent för att bygga upp en logisk innehållsstruktur.

Ett vanligt arbetsflöde kan exempelvis se ut så här:

1. Definiera sidans syfte och huvudsakliga budskap
2. Strukturera innehållet med korrekt rubrikhierarki
3. Applicera relevanta sektioner från ramverket

Den här strukturen gör att både utveckling och vidareförvaltning blir mer förutsägbar.

Ramverk före design (Heading 5)

Cypress är inte ett färdigt uttryck, utan en teknisk och strukturell grund. Typografi, färger och komponenter justeras per projekt men inom samma stabila ram.

Det handlar om att kombinera struktur och flexibilitet snarare än att kompromissa mellan dem. En gemensam bas gör att vi kan arbeta snabbare utan att skapa onödig komplexitet.

Förutsägbarhet i produktion (Heading 6)

När standarder är definierade från början minskar behovet av speciallösningar senare i projektet. Det gäller allt från rubrikskalor till hur länkar och knappar presenteras i olika kontexter.

Konsekvens skapar kvalitet – särskilt över tid.