அச்சுக்கலை 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-ன் பெரும்பகுதியாகும்.