Ինտերֆեյսի տպագրություն

1) Տպագրության դերը սննդի մեջ

Լավ տպագրություն

արագացնում է սկանումը և նվազեցնում ճանաչողական բեռը,

ձևավորում է հիերարխիա և օգնում է կենտրոնանալ վիճակում,

բարձրացնում է ծրարը (CTA, ձևեր) և նվազեցնում սխալները,

ինտերֆեյսը դարձնում է մատչելի և դիմացկունություն։

2) Հիմնական պարամետրերը

Քեգլ (հիմնական տեքստը) '16-18 px desktop, 15-16 px mobile-ում։

Միջտարածաշրջանային ֆորումը (105-height): 1։ 45–1. 6 տեքստի համար, 1։ 2–1. 35 վերնագրերի համար։

Տողի երկարությունը (measure) 45-80 նշաններ; Սայդբարիում 36-60 է։

Միջբուկվինի լուծումը (tracking) '0-1 տոկոսը սովորական տեքստի համար։ գլխարկի համար + 2-4 տոկոսն է։

Հակադրություն (WCAG) 'սովորական թիվ 4 տեքստը։ 5: 1, մեծ/ճարպաթթու 3:1։

Գրանցում 'խուսափեք մշտական ALL CAPS-ից։ օգտագործեք պիտակների/չիպերի համար, փոխհատուցեք tracking-ը։

3) Հիերարխիա և չափսերի սանդղակ

Ռուսական մոդուլային մոտեցումը '8-pt ցանցը + տպագրական սանդղակ։

Սանդալան (օրինակ)

Display: 40/48 (LH 1. 15)

H1: 32/40 (1. 25)

H2: 24/32 (1. 25)

H3: 20/28 (1. 3)

H4: 18/26 (1. 4)

Body/L: 18/28 (1. 55)

Body/M: 16/26 (1. 55)

Body/S: 14/22 (1. 5)

Caption: 12/18 (1. 5)

Mono/UI: 12–14/18–20

Կանոնները

Հարևան մակարդակների միջև նկատելի քայլ է (առնվազն 12-16 տոկոսը)։

Հիերարխիան կառուցված է չափսի, քաշի, ինտերլինյաժի, գույների (հաշվի առնելով հակադրությունը) և մինչև հարևան բլոկների հեռավորությունները։

4) Կապվիսոտա, ռուսական գիծ և գյուղ

Հավասարեցրեք տարրերը վերնագրերի գլխարկով (հարմարավետ իկոններով)։

Պահպանեք տեքստի հիմնական գիծը 4/8-pt քայլով, հավասար ռիթմերը պարզեցնում են ընթերցանությունը։

Օպտիկական շեղումները 'բլոկի վերևում գտնվող վերնագրերը ավելի մեծ են, քան դրա տակ (օրինակ ՝ + 4-8 px վերևում)։

5) Սկսած և variable տառատեսակները

Նվազագույն հավաքածու ՝ Regular, Directions, SemiBold (Bold)։

Մի օգտագործեք Ultra-Light/Thin UI-ում։

Variable-տառատեսակները (wght/opsz)

Body: 420-470 (օպտիկական ավելի պարզ, քան 400)։

UI labels: 500–550.
Headers/CTA: 600–650.

Կեգլի նվազեցնելիս մի փոքր բարձրացրեք քաշը (փոխհատուցումը)։

Անջատեք դեկորատիվ լիգուրները UI թվերում։ պահեք կիտրոնի/լատիներենի լիգրանտները։

6) Թվեր, սեղաններ և դանավիզ

Միացրեք tabular figures (մոնոշիրային թվեր) գումարների, գործակիցների, թայմերի, վարկանիշների համար։

Նշանները +/105 - միշտ տեսանելի են նաև բավարար հակադրությամբ։ բացասական արժեքներ հատկացրեք ոչ միայն գույներով (իկոնկա/սլաքներ/ճարպկություն)։

Դրամական արժեքների համար օգտագործեք նեղ բացթողում որպես ալյումինի բարակ բաժանիչ (կամ տեղական ձևաչափ)։

Աղյուսակներում հավասարեցրեք տասանորդ կետով։ մոնոշիրինային տառատեսակը մոնոշիրային է։

Առանցքի ստորագրման գրաֆիկներում կա 12 px (mobile) և 3613-14 px (desktop), LH 1։ 3; լեգենդներ 244։ 5: 1 ֆոնին։

7) Ձևեր, ինպուտներ, հաղորդագրություններ

Պիտակները 12-14 px, LH 1։ 3–1. 4, կարգավորիչ կամ մեդիա։

Placeholder-ը չպետք է լինի «օդի մոխրագույն», նպատակը 3: 1 ֆոնի վրա, տեսողական տարբերությունը տեքստից։

Սխալներ/հաջողություններ/հելպ տեքստը 12-14 px; մի ապավինեք միայն գույնին (իկոնկա/տեքստ)։

8) Մութ/լուսավոր թեմաներ

Մութ թեմայում խուսափեք # FFF-ից # 000-ով 'բարձրացրեք ֆոն L-0։ 14–0. 18, իսկ տեքստը կրճատեք մինչև L 240։ 9 - ավելի քիչ բլիթներ։

Ինտերլինյաժը dark կարող է լինել + 0։ ավելի բարձր է հարմարավետության համար։

Հղումներ/շեշտադրումներ dark - նվազեցրեք հարստությունը և բարձրացրեք լուսավորությունը 0-ով։ 02–0. 04.

9) Տեղայնացումը և բազմությունը

Ընտրեք ընտանիքներ, որոնք ունեն կիրիլիցա/լատիներեն/հունարեն, ակցենտրիկ նշաններ և արժեթղթեր։

RTL 'iconte/հավասարման հայելիներ, բայց ոչ թվեր և լատիներեն։ փորձիր դիմանալ։

Autoperenoss («hyphens: 71») ներառել միայն երկար կոնտենտային գոտիներում։ UI կոճակները արգելում են փոխանցումը։

Թուրքական/լատանական ռուսական ձևի համար «Մոսկվա/2019»։

Վրացական և թայերեն համար բարձրացրեք հիմնական կեգլը 1 px-ով (գծագրման հատկությունները)։

10) Հասանելիություն (A11y)

Տեքստի հակադրություն ՝ տե՛ ս 242։

Ֆոկուս-պողպատը տեսանելի է առանց գույնի 'under.ru, շրջանակ, ստվեր, 108։

Տառատեսակի չափը համակարգայնորեն մեծանում է (աջակցություն OS 24size)։

Մի ծածկեք իմաստը միայն գույնով/քաշով, ավելացրեք հստակ ստորագրություններ և սրբապատկերներ։

11) Տառատեսակների բեռնումը և ներկայացումը

Նպատակները 'նվազեցնել արգելափակումը, ապահովել կանխատեսելի FOUT և կայուն CLS։

Ենթաբազմությունները (www.set) 'լատիներեն, կիրիլիցա, թվեր/խորհրդանիշներ - առանձին ֆայլեր։

Շվեյցարիա ՝ «woff2» (հիմնական), «woff» որպես fallback։

«font-play: swap» (կամ «optional» երկրորդական կոմպոզիցիաների համար)։

Քննադատների նախնական բեռնումը

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Variable-տառատեսակը 3-4 ստատիկայի փոխարեն, հաճախ ավելի ձեռնտու է քաշով։

Բյուջե ՝ 24150-200 KB ընդհանուր կրիտիկական ճանապարհի համար (gzip/brotli)։

Ռենդեր 'խուսափեք տեքստում բազմաթիվ ստվերներից/դիմակներից։ օգտագործեք տեխնոլոգիական էֆեկտները տնտեսապես։

12) Տպագրություն (դիզայնի համակարգ)

Անվանումը

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

JSON-ի օրինակ

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

CSS շերտը

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Վերստկա և ռիթմ

8-pt ուղղահայաց մոդուլ; Աբզայացիների միջև հեռավորությունը = 1 նմ բազային շարժիչ։

Ցուցակները ՝ ռուսական մարկերները հավասար են տեքստի գծին։

Կոճակները և դաշտերը բազմակի գծեր են (օրինակ ՝ 40/48/56 px)։

14) iGaming (պրակտիկա)

Գործակիցներ/շանսեր, հավասարակշռություններ, թայմերներ, օգտագործեք tabular թվեր, մոնոշիրին կրիտիկական սյուներում։

Առաջնորդներ/վարկանիշներ 'հավասարեցում տարբերակով, արժույթների մեկ ձևաչափ, որը ակնհայտ է «108/108»։

Պատասխանատու ծանուցումները (18 +, սահմանները, ռիսկերը) առնվազն AAA-ն հակադրությամբ չեն օգտագործում ALL CAPS-ը։

Պրոմո-բաններ 'տեքստը միայն պլաստմասսեների/հավատալիքների վրա, որոնք վերահսկում են հակադրությունը։

15) Anti-patterna

Light/Thin փոքրիկ կեգլերում։

Գունավոր ֆոնի վրա մոխրագույն տեքստը առանց հակադրության ստուգման։

Երկու և ավելի ներդաշնակություններ «գեղեցկության համար»։

Երկար տողերը (> 90 նիշ) և խիտ 108-height <1։ 35.

Աղյուսակների համամասնության լայնության քանակը/« ցատկող »գումարները։

Հարկադիր փոխանցումները կոճակների/պիտակների մեջ։

16) Chek-Show-Travew

Ընթերցանությունը

• Բոդի 16-18 px; LH ≥ 1. 45.
• Տողի երկարությունը 45-80 նիշ է։

Հիերարխիա

• Սանդալը քայլ առ քայլ 12 տոկոսն է։ նահանջները համաձայնեցված են ցանցի հետ։

Թվեր/սեղաններ

• Tabular-nums գումարների/գործակիցների համար; հավասարեցում տասանորդ։

Հասանելիություն

• WCAG-ի հակադրությունը հասնում է. ֆոկուս ստիլները տեսնում են առանց գույնի։

Պերֆորանսը

• Subset/woff2; `font-display: swap`; բյուջեն 200 KB է։

Տեղայնացում

• Կիրիլիցայի/լատիներեն/RTL աջակցություն; փորձարկումները/դիակրիտիկան ստուգված են։

17) A/B և մետրերը

Փորձարկեք 'cegle Body 351 px, վերնագրերի մասշտաբի քայլ, CTA քաշը, ինտերլյաժը։

Չափեք ՝ read Time, scrope depth, CTR CTA, ձևերի սխալներ, CLS (տեքստի տեքստ)։

Live ռեզյումե

Տպագրությունը ինտերֆեյսի կմախքն է։ Տվեք կանխատեսելի սանդղակ, պահեք հակադրություն և ռիթմ, օգտագործեք variable տառատեսակներ և tabular թվեր, օպտիմիզացրեք բեռնումը։ Այդ ժամանակ UI-ն արագ կարդա, աշխատի կայուն և ընդլայնված թեմաների և լեզուների տակ։