Apa itu Titik Henti Gaya Teks?

Agar sebuah situs web dapat dilihat di berbagai perangkat, ukuran teks dan jarak juga perlu disesuaikan berdasarkan ukuran layar. Framer menawarkan fitur yang sangat mudah untuk mengatur ini. Itulah Text Style Breakpoints.

Cara Membuat Titik Henti Gaya Teks

1. Buka tab Assets di sebelah kiri dan pindah ke bagian Styles

2. Pilih gaya teks yang diinginkan (Contoh: H1, Body M, dll.)

3. Klik tombol Add Breakpoints pada bagian Breakpoints di bawah jendela Edit Style

Tiga Titik Henti yang Disediakan Secara Default

• Desktop (L) Min width: 1200

• Tablet (M) Min width: 810

• Mobile (S)

Atribut Titik Henti

• Font Size (Ukuran Font)

• Line Height (Tinggi Baris)

• Letter Spacing (Spasi Huruf)

• Paragraph Spacing (Spasi Paragraf)

Perhatian: Karena atribut dapat disesuaikan per titik henti, dimungkinkan untuk mengatur ukuran H1 ke 56px pada desktop dan menguranginya menjadi 32px pada perangkat mobile.

Mengapa Fitur Ini Penting?

Elemen yang paling sering digunakan dalam desain adalah teks. Karena teks bisa kehilangan keterbacaan atau terlalu besar sehingga merusak tata letak tergantung pada ukuran layar, mengatur titik henti yang sesuai dengan ukuran layar sangatlah penting.

Keuntungan Pengaturan Titik Henti

• Otomatis menyesuaikan ukuran huruf untuk antarmuka responsif

• Mempertahankan konsistensi gaya yang sudah dirancang oleh desainer sebelumnya

Konten ini merupakan terjemahan dan adaptasi dari dokumen resmi Framer ‘Setting Text Styles breakpoints’.