टाइपोग्राफी font-* र text-* गुणहरूको परिवारद्वारा नियन्त्रित हुन्छ। तिनलाई सही गर्नु भनेको पृष्ठलाई पालिशड र पढ्न योग्य बनाउने अधिकांश काम हो।
css
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
ब्राउजरले क्रमशः प्रत्येकलाई प्रयास गर्छ जबसम्म एक उपलब्ध छैन। सधैं generic family (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 */
एक unitless line-height प्रत्येक तत्वको आफ्नो font-size सँग गुणा हुन्छ, त्यसैले यो आनुपातिक रहन्छ जब nested तत्वहरूको फरक आकार हुन्छ — अनुशंसित दृष्टिकोण।
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
पाठ गुणहरूले पठनीयता र दृश्य पदानुक्रम चलाउँछ — जोर दिनको लागि font-size/weight, आरामदायक पढ्नको लागि line-height (~1.5), विश्वसनीयताको लागि fallback stacks, र सफा truncation को लागि text-overflow।
अच्छो टाइपोग्राफी भनेको राम्रो दिखिने UI को अधिकांश भाग हो।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्