🎨 CSS Lesson 03 — Typography

1. font-family

font-family: Arial, sans-serif;
font-family: 'Times New Roman', serif;
font-family: 'Fira Code', monospace;     /* Google Font */
/* fallback list — ပထမ မရရင် ဒုတိယ သုံး */

2. font-size — px, em, rem

font-size: 16px;     /* absolute — fixed pixel */
font-size: 1em;      /* relative to PARENT font-size */
font-size: 1rem;     /* relative to ROOT (html) font-size ✅ best */
font-size: 120%;     /* percentage of parent */
font-size: 1.5vw;    /* viewport width */

3. font-weight

font-weight: normal;   /* 400 */
font-weight: bold;     /* 700 */
font-weight: 100;      /* Thin */
font-weight: 300;      /* Light */
font-weight: 900;      /* Black */

4. line-height & letter-spacing

line-height: 1;       /* tight */
line-height: 1.5;     /* comfortable ✅ recommended */
line-height: 2;       /* double space */

letter-spacing: -1px; /* tight letters */
letter-spacing: 2px;  /* wide letters */
letter-spacing: 5px;  /* very spaced */

5. text-align, text-decoration, text-transform

text-align: left | center | right | justify

text-decoration: none;              /* link underline ဖယ် */
text-decoration: underline;
text-decoration: line-through;      /* strikethrough */
text-decoration: underline dotted red;

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;         /* First Letter */

6. text-shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
/*           x   y  blur   color */

/* Multiple shadows */
text-shadow: 1px 1px 0 #fff, 2px 2px 4px rgba(0,0,0,0.5);

7. Live Typography Playground