Typografi styres af en familie af font-* og text-* egenskaber. At få dem rigtigt er det meste af det, der gør en side udseende poleret og læsbar.
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
Browseren prøver hver enkelt i rækkefølge, indtil en er tilgængelig. Afslut altid med en generisk familie (sans-serif, serif, monospace), så tekst genranders selv hvis brugerdefinerede skrifttyper mislykkes. system-ui bruger operativsystemets native skrifttype (hurtig, ingen download).
.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 */
En uden-enhed line-height multiplicerer hver elements egen font-size, så det forbliver proportionalt når indlejrede elementer har forskellige størrelser — den anbefalede tilgang.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
Tekst-egenskaber driver læsbarhed og visuelt hierarki — font-size/weight for vægtning, line-height (~1.5) for behagelig læsning, fallback-stakke for pålidelighed og text-overflow for ren afkorning.
God typografi er størstedelen af godt udseende brugerflade.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér