Typography
Ghid pentru tipografie și stiluri de text
Tipografie
Sistemul nostru tipografic combină claritate și căldură. Folosim familia Inter pentru o citibilitate excelentă pe toate dispozitivele și dimensiunile.
Familia de Fonturi
Font Principal
Inter
Inter este un font modern, optimizat pentru interfețe digitale. Oferă lizibilitate excelentă la toate dimensiunile.
Character Set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ĂÂÎȘȚ ăâîșț
Ierarhie Titluri
Display / Hero
72px / Bold
Producători Locali
Heading 1
48px / Bold
Prospețime Garantată
Heading 2
36px / Semibold
Direct de la Fermă la Masă
Heading 3
24px / Semibold
Produse Artizanale Românești
Heading 4
20px / Semibold
Categorie: Lactate și Brânzeturi
Text de Corp
Body Large
18px / Regular
Descoperă gustul autentic al produselor locale, cultivate cu pasiune de producătorii români. Fiecare produs poartă o poveste.
Body Regular
16px / Regular
Susținem agricultura locală și promovăm produsele tradiționale românești. Conectăm comunitățile într-un ecosistem durabil.
Body Small
14px / Regular
Produsele noastre sunt verificate pentru calitate și autenticitate. Fiecare producător este evaluat conform standardelor ridicate.
Caption
12px / Regular
Informații suplimentare, metadata, timestamps și alte detalii auxiliare.
Exemplu de Utilizare Completă
NOU PE PLATFORMĂ
Brânză de Burduf Artizanală
Din munții Apuseni, preparată după rețete tradiționale transmise din generație în generație.
Această brânză este produsă manual de familia Popescu, folosind lapte de oaie crescută la pășunat liber. Procesul de maturare durează minimum 60 de zile în condiții controlate.
Disponibil: 12 bucăți
Font Family
farme.ro folosește Inter ca font principal pentru toate textele și DM Sans pentru heading-uri. Inter este un font sans-serif modern, optimizat pentru lizibilitate pe ecrane.
font-family: 'Inter', system-ui, sans-serif; (body)font-family: 'DM Sans', system-ui, sans-serif; (headings)Variante Tipografice
Display
font-size: 3.75rem (60px) | font-weight: 700 | line-height: 1.1 | letter-spacing: -0.02emFolosit pentru titluri hero, landing pages, secțiuni principale foarte importante
Heading 1
font-size: 3rem (48px) | font-weight: 700 | line-height: 1.2 | letter-spacing: -0.01emFolosit pentru titluri principale de pagină
Heading 2
font-size: 2.25rem (36px) | font-weight: 600 | line-height: 1.3 | letter-spacing: -0.01emFolosit pentru secțiuni principale
Heading 3
font-size: 1.875rem (30px) | font-weight: 600 | line-height: 1.4Folosit pentru subsecțiuni
Heading 4
font-size: 1.5rem (24px) | font-weight: 600 | line-height: 1.4Folosit pentru titluri de carduri și componente
Body Large - Acesta este un text de corp mai mare, folosit pentru paragrafe introductive și conținut important.
font-size: 1.125rem (18px) | font-weight: 400 | line-height: 1.75Folosit pentru paragrafe introductive și conținut important
Body Medium - Acesta este textul de corp standard, folosit pentru majoritatea conținutului din aplicație.
font-size: 1rem (16px) | font-weight: 400 | line-height: 1.75Folosit pentru majoritatea conținutului din aplicație
Body Small - Acesta este textul de corp mai mic, folosit pentru informații secundare și captions.
font-size: 0.875rem (14px) | font-weight: 400 | line-height: 1.5Folosit pentru informații secundare și captions
Folosit pentru labels de form, butoane, și elemente UI
Folosit pentru informații suplimentare și hints
Folosit pentru categorii, tags, și elemente de categorizare
Stiluri de Text
Bold text - folosit pentru accent și importanță
font-weight: 700Italic text - folosit pentru emphasis subtil
font-style: italicUnderlined text - folosit pentru link-uri
text-decoration: underlineMuted text - folosit pentru informații secundare
color: muted-foregroundInline Code
Folosim inline code pentru a evidenția comenzi, variabile sau valori tehnice în text.
Exemplu: Folosește className="text-primary" pentru text verde.bg-card px-2 py-1 rounded text-body-sm font-monoBlockquote
"Produsele tradiționale românești reflectă bogăția și autenticitatea agriculturii noastre. Fiecare produs spune o poveste despre tradiție, meșteșug și pasiune."
Folosit pentru citate, testimoniale sau citate importante
border-l-4 border-primary pl-6 py-4 italic bg-cardRecomandări de Utilizare
Când folosim fiecare heading
- •
Display - Pentru hero sections, landing pages, titluri foarte importante
- •
H1 - Doar o dată pe pagină, pentru titlul principal
- •
H2 - Pentru secțiuni principale ale paginii
- •
H3 - Pentru subsecțiuni
- •
H4 - Pentru elemente mai mici, carduri, componente
Tonul tipografic farme.ro
Tipografia noastră este liniștită, clară și caldă. Evităm fonturi multiple sau stiluri prea diverse. Prioritizăm lizibilitatea și consistența.
- •
Folosim doar 2 fonturi: Inter (body) și DM Sans (headings)
- •
Line-height generos pentru lizibilitate (1.75 pentru body)
- •
Evităm text prea mic (minimum 14px pentru body)
Good Practices
- •
Nu folosi mai mult de 3-4 nivele de heading pe pagină (Display, H1, H2, H3)
- •
Nu combina fonturi multiple - păstrează consistența
- •
Folosește bold pentru accent, nu pentru întregul text
- •
Asigură contrast suficient între text și background (minim AA)
- •
Folosește variantele semantic (Text component) pentru consistență