CSS Typography Properties

📌 Elements

💡 Fundamental Properties

CSS Typography mengontrol tampilan teks pada halaman web. Memahami property typography penting untuk desain yang readable dan estetik.

typography.css

                    
                        /* Font Properties */

                        body {

                          font-family: 'Segoe UI', sans-serif;

                          font-size: 1rem;

                          font-weight: 400;

                          font-style: normal;

                        }

                        /* Text Properties */

                        h1 {

                          color: #9333ea;

                          text-align: center;

                          text-transform: capitalize;

                          text-decoration: underline;

                        }

                        /* Spacing Properties */

                        p {

                          line-height: 1.6;

                          letter-spacing: 0.5px;

                          word-spacing: 2px;

                        }

📝 Penjelasan Detail:

• font-family - menentukan jenis font
• font-size - ukuran teks (px, em, rem, %)
• font-weight - ketebalan font (100-900 atau normal/bold)
• text-align - perataan teks (left, center, right, justify)
• line-height - spasi antar baris (penting untuk readability)

🛠️ Features

advanced-typography.css

                    
                        /* Web Fonts */

                        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

                        body {

                          font-family: 'Roboto', sans-serif;

                        }

                        /* Text Effects */

                        .fancy-text {

                          text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

                          text-overflow: ellipsis;

                          white-space: nowrap;

                          overflow: hidden;

                        }

                        /* Custom Selection */

                        ::selection {

                          background: #9333ea;

                          color: white;

                        }

ℹ️ Browser Support

Semua basic typography properties didukung penuh oleh semua browser modern. Web fonts (@font-face) didukung Chrome 4+, Firefox 3.5+, Safari 3.1+, IE 9+.

📊 Basic Tables

typography-values.css

                    
                        /* Font Weight Values */

                        100   /* Thin */

                        400   /* Normal */

                        700   /* Bold */

                        900   /* Black */

                        /* Text Transform Values */

                        none      /* Default */

                        capitalize /* Huruf pertama kapital */

                        uppercase  /* SEMUA HURUF BESAR */

                        lowercase  /* semua huruf kecil */

                        /* Text Decoration Values */

                        none       /* Default */

                        underline   /* Garis bawah */

                        overline    /* Garis atas */

                        line-through /* Coret tengah */

📝 Penjelasan Detail:

• Font weight menentukan ketebalan font (100-900)
• Text transform mengontrol kapitalisasi teks
• Text decoration menambahkan garis dekoratif
• rem units lebih baik untuk aksesibilitas (relatif ke root font-size)
• Line-height tanpa unit lebih fleksibel (1.5 lebih baik dari 24px)

🚀 Advanced Table

advanced-properties.css

                    
                        /* Variable Fonts */

                        @font-face {

                          font-family: 'Inter var';

                          src: url('Inter.var.woff2') format('woff2-variations');

                          font-weight: 100 900;

                          font-style: oblique 0deg 10deg;

                        }

                        /* Text Rendering */

                        body {

                          text-rendering: optimizeLegibility;

                          font-kerning: normal;

                          font-variant-ligatures: common-ligatures;

                        }

                        /* Vertical Rhythm */

                        h1, h2, h3, p {

                          margin-bottom: 1.5rem;

                          line-height: 1.3;

                        }

ℹ️ Browser Support

Variable fonts: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+. Text-rendering: Chrome 4+, Firefox 1+, Safari 5+, IE 9+. Font-kerning: Chrome 33+, Firefox 32+, Safari 9.1+, Edge 12+.

💡 Pro Tips

🎯 Best Practices

Gunakan system font stack untuk performance, set base line-height 1.5 untuk readability, dan gunakan clamp() untuk responsive typography.

best-practices.css

                    
                        /* ✅ Good - System font stack */

                        body {

                          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

                        }

                        /* ✅ Good - Responsive typography */

                        h1 {

                          font-size: clamp(1.75rem, 5vw, 2.5rem);

                        }

                        /* ❌ Avoid - Fixed pixel values */

                        p {

                          font-size: 16px;

                          line-height: 24px;

                        }

                        /* ❌ Avoid - Too many web fonts */

                        body {

                          font-family: 'Poppins', 'Montserrat', 'Raleway', sans-serif;

                        }

📝 Penjelasan Detail:

• System fonts - load lebih cepat dari web fonts
• clamp() - buat font-size responsive dengan minimum dan maximum
• Relative units - gunakan rem/em untuk aksesibilitas
• Limit font variations - 2-3 font family maksimal
• Vertical rhythm - pertahankan konsistensi spasi vertikal
• Variable fonts - single file dengan banyak variasi