ટાઇપોગ્રાફી 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.
katherોટો ટાઇપોગ્રાફી સારી દેખાતી UI નો મોટો ભાગ છે.