Font Properties

font-size

Controls the size of the text. Can be specified in various units.

/* Absolute units */
.absolute-pixels {
    font-size: 16px;  /* Pixels */
}

.absolute-points {
    font-size: 12pt;  /* Points */
}

/* Relative units */
.relative-em {
    font-size: 1.2em;  /* Relative to parent element's font size */
}

.relative-rem {
    font-size: 1.2rem;  /* Relative to root element's font size */
}

.relative-vh {
    font-size: 3vh;  /* Relative to viewport height */
}

.relative-percent {
    font-size: 120%;  /* Percentage of parent element's font size */
}

/* Keyword values */
.keyword-small {
    font-size: small;
}

.keyword-medium {
    font-size: medium;
}

.keyword-large {
    font-size: large;
}

.keyword-larger {
    font-size: larger;  /* Relative to parent element */
}

/* Root element sizing for rem units */
:root {
    font-size: 16px;  /* Base font size */
}

/* Responsive scaling */
@media (max-width: 768px) {
    :root {
        font-size: 14px;  /* Smaller base size on small screens */
    }
}

/* Using rem units throughout */
h1 {
    font-size: 2.5rem;  /* 40px at base size */
}

h2 {
    font-size: 2rem;    /* 32px at base size */
}

p {
    font-size: 1rem;    /* 16px at base size */
}

.small-text {
    font-size: 0.875rem; /* 14px at base size */
}

font-weight

Specifies the thickness of characters in text.

/* Numeric weights */
.thin {
    font-weight: 100;
}

.light {
    font-weight: 300;
}

.normal {
    font-weight: 400;  /* Same as normal */
}

.medium {
    font-weight: 500;
}

.semi-bold {
    font-weight: 600;
}

.bold {
    font-weight: 700;  /* Same as bold */
}

.extra-bold {
    font-weight: 800;
}

.black {
    font-weight: 900;
}

/* Keyword values */
.normal-keyword {
    font-weight: normal;  /* 400 */
}

.bold-keyword {
    font-weight: bold;    /* 700 */
}

/* Relative values */
.bolder {
    font-weight: bolder;  /* Bolder than parent */
}

.lighter {
    font-weight: lighter; /* Lighter than parent */
}

font-style

Specifies whether text should be rendered in an italic or normal style.

/* Font style values */
.normal-style {
    font-style: normal;  /* Default */
}

.italic {
    font-style: italic;  /* Slanted version of the font */
}

.oblique {
    font-style: oblique;  /* Artificially slanted version */
}

font-variant

Controls alternate glyphs used in a font, such as small-caps.

/* Font variant values */
.normal-variant {
    font-variant: normal;  /* Default */
}

.small-caps {
    font-variant: small-caps;  /* Small capital letters */
}

/* Modern property with more options */
.advanced-variant {
    font-variant: small-caps slashed-zero;
}

/* Individual properties */
.numeric-variant {
    font-variant-numeric: oldstyle-nums tabular-nums;
}

font-stretch

Controls the width of characters, from condensed to expanded.

/* Font stretch values */
.ultra-condensed {
    font-stretch: ultra-condensed;  /* 50% */
}

.condensed {
    font-stretch: condensed;  /* 75% */
}

.normal-stretch {
    font-stretch: normal;  /* 100% */
}

.expanded {
    font-stretch: expanded;  /* 125% */
}

.ultra-expanded {
    font-stretch: ultra-expanded;  /* 200% */
}

/* Percentage values */
.custom-stretch {
    font-stretch: 90%;
}

line-height

Controls the space between lines of text, also known as "leading".

/* Line height values */
.normal-line-height {
    line-height: normal;  /* Browser default, typically ~1.2 */
}

.specific-line-height {
    line-height: 1.5;  /* 1.5 times the font size (recommended) */
}

.line-height-px {
    line-height: 24px;  /* Absolute value - NOT recommended */
}

.line-height-percent {
    line-height: 150%;  /* Percentage of the font size */
}

/* Best practice for body text */
body {
    line-height: 1.5;  /* Good for readability */
}

/* Tighter line height for headings */
h1, h2, h3 {
    line-height: 1.2;
}

font Shorthand

The font shorthand property allows you to set multiple font properties in a single declaration.

/* Font shorthand syntax */
/* font: [font-style] [font-variant] [font-weight] [font-stretch] font-size[/line-height] font-family */

/* Examples */
.complete-shorthand {
    font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
}

.basic-shorthand {
    font: bold 14px Arial, sans-serif;  /* Style and variant default to normal */
}

/* Required properties: font-size and font-family */
.minimal-shorthand {
    font: 16px Georgia, serif;
}