ტიპოგრაფია კონტროლირებულია font-* და text-* თვისებების ოჯახით. მათი სწორად დაყენება არის ის, რაც გვერდს პოლირებული და კითხვადი ხდის.
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
ბრაუზერი ცდილობს თითოეულ მათ თანმიმდევრობით, სანამ რომელიმე ხელმისაწვდომი არ იქნება. ყოველთვის დასრულდეთ ზოგადი ოჯახით (sans-serif, serif, monospace) ისე, რომ ტექსტი ასახავს მაშინაც კი, თუ მომხმარებლის ფონტები ვერ ჩატვირთობს. system-ui იყენებს OS-ის ნატიურ ფონტს (სწრაფი, ჩამოტვირთვა არ აქვს).
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
ერთეულის გარეშე line-height ამრავლებს თითოეული ელემენტის საკუთარ ფონტის ზომას, ამიტომ ის რჩება პროპორციული, როდესაც ჩასმული ელემენტებს განსხვავებული ზომები აქვთ — რეკომენდებული მიდგომა.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
ტექსტის თვისებები განაპირობებენ წაკითხვადობას და ვიზუალურ იერარქიას — font-size/weight ხაზს გასაყვანად, line-height (~1.5) მოსახერხებელი კითხვისთვის, ზედაზღვეული წყობილობები საიმედოობისთვის და text-overflow სუფთა შეკვეცისთვის.
ხელოვნური ტიპოგრაფია წარმოადგენს ლამაზი UI-ის უმეტეს ნაწილს.