Mengelola font dan ukuran font dengan Divi 5
Diterbitkan: 2025-05-26Font dan tipografi mengatur nada untuk situs Anda. Melakukannya dengan benar dapat membantu merek Anda dan meningkatkan keterbacaan. Divi 5 membuat bekerja dengan font dengan cepat dan mudah. Dengan fitur -fitur baru Divi, seperti variabel desain dan preset grup opsi, menyiapkan font menjadi mudah.
Posting ini mengajarkan Anda cara mengelola font dan ukuran font di Divi 5, menciptakan tipografi responsif yang berskala dengan indah di seluruh perangkat.
Divi 5 siap untuk membangun situs web baru, tetapi kami memberikan sentuhan akhir pada sistem kompatibilitas mundur. Sementara itu, tahan di situs pembaruan yang dibangun di D4. Kami akan memberi tahu Anda kapan perubahan itu terjadi.
- 1 pertimbangan saat memikirkan font untuk situs web baru
- 2 Cara Mengelola Ukuran Font dan Font di Divi 5
- 2.1 Langkah 1: Memilih pasangan font
- 2.2 Langkah 2: Mengatur font untuk header dan tubuh primer
- 2.3 Langkah 3: Membuat Ukuran Font
- 2.4 Langkah 5: Menambahkan ukuran font dari variabel manager ke preset
- 3 Praktik Terbaik Untuk Font di Divi 5
- 4 Tipografi dalam Divi 5 adalah menghirup udara segar
Pertimbangan saat memikirkan font untuk situs web baru
Saat memulai situs baru, pilihan font membentuk kesan pertama pengguna. Pertimbangkan poin -poin ini untuk memastikan tipografi Anda mendukung konten Anda:
- Keterbacaan : Pilih font yang jelas, terutama untuk teks tubuh.
- Konsistensi : Batasi font Anda - dua atau tiga bekerja paling baik, dengan setidaknya satu untuk judul dan satu untuk teks tubuh.
- Responsif : Pastikan font beradaptasi dengan ukuran layar yang berbeda (idealnya dari 320px hingga 1440px).
- Kompatibilitas : Pilih font yang aman atau populer untuk menghindari masalah tampilan.
Cara mengelola font dan ukuran font di divi 5
Mari kita gunakan tata letak premade dari Divi's Library. Kami akan memilih tata letak halaman arahan dari paket "Business CV" dan mengubah tipografi menggunakan fitur baru Divi 5. Jika Anda memiliki situs Divi 5 yang ada tetapi ingin meningkatkan tipografi, Anda dapat mengikuti langkah -langkah yang sama ini tanpa menggunakan tata letak ini.
Langkah 1: Memilih pasangan font
Pasangan font yang baik gaya campuran dan keterbacaan. Google Fonts juga merupakan taruhan yang aman karena dibangun menjadi divi dan mudah digunakan.
Dalam contoh di bawah ini, kami akan tetap menggunakan Poppins Paket tata letak untuk judul dan teks tubuh. Anda dapat mencoba memasangkan Lora dan Roboto juga.
Langkah 2: Mengatur font untuk header dan tubuh primer
Sekarang setelah Anda memilih font, kami dapat menambahkannya ke situs web menggunakan Divi. Di editor visual, buka manajer variabel di kiri atas. Variabel Desain Divi memungkinkan Anda mengontrol font secara global di situs web Anda.
Ada dua variabel font default untuk judul utama dan font tubuh Anda. Pergi ke bagian font, dan atur " Poppins " sebagai font heading dan " roboto " sebagai font tubuh.
Tetapkan font Anda ke apa pun yang cocok dengan desain dan persyaratan merek Anda
Pada titik ini, mungkin juga merupakan ide yang baik untuk memastikan warna merek Anda ditetapkan sebagai variabel desain juga, terutama jika Anda berencana menggunakan beberapa warna dalam teks.
Pastikan untuk menyimpan variabel Anda saat selesai memasukkannya
Langkah 3: Membuat Ukuran Font
Sekarang untuk bagian yang lebih terlibat. Yang terbaik adalah memikirkan cara membuat tipografi Anda terlihat bagus di setiap ukuran perangkat. Dengan Divi 5, Anda memiliki dua opsi. Opsi pertama dan lebih disukai adalah menggunakan clamp (), dan yang kedua adalah mengatur font beberapa kali di berbagai breakpoint.
Bagaimana Anda membangun ukuran font Anda untuk setiap tingkat tajuk, teks tubuh, dan situasi teks lainnya sepenuhnya terserah Anda.
Cairan tipografi dengan klem ()
Clamp () memungkinkan Anda menetapkan nilai minimum, nilai yang disukai, dan nilai maksimum. Di pos lain, kami masuk ke kedalaman tentang klem () dan memberikan cara mudah untuk mengetahui nilai -nilai tersebut. Tapi inilah contohnya:
| Ukuran nama | fungsi klem () |
|---|---|
| H1 (besar) | Clamp (2.1rem, 10VW, 10REM) |
| H1 | Clamp (1.5rem, 5VW, 4.5rem) |
| H2 | Clamp (1.425rem, 4VW, 3.25rem) |
| H3 | Clamp (1.375rem, 3vw, 2.25rem) |
| H4 | Clamp (1.25rem, 2VW, 1.75rem) |
| H5 | Clamp (1.125rem, 1.75VW, 1.5rem) |
| H6 | Clamp (1Rem, 1.5VW, 1.25rem) |
| Tubuh | klem (0,875rem, 1VW, 1.125rem) |
| Tubuh kecil | Clamp (0,75rem, 1VW, 1REM) |
| Tombol | klem (0,875rem, 1VW, 1.125rem) |
Tata letak ini memiliki ukuran H1 default dan ukuran H1 yang unik (dan lebih besar) untuk nama orang tersebut di bagian pertama. Kami membawa prinsip yang sama dalam bagan ukuran di atas dan menambahkan variasi font tubuh yang lebih kecil.
Anda dapat menguji ukuran font Anda dalam dokumen HTML sederhana untuk melihat hal -hal secara terpisah (ini juga dapat dilakukan di dalam Divi). Inilah yang terlihat seperti ukuran font di atas dengan pasangan font.
Setelah Anda merasa nyaman dengan ukuran font Anda, Anda dapat menambahkannya sebagai variabel desain. Berikan masing -masing nama yang dapat dilihat dan tempel nilai di sebelah kanan.
Unit tetap dengan breakpoints
Clamp () adalah opsi yang paling fleksibel untuk ukuran font, tetapi banyak pengguna masih menggunakan nilai tetap seperti piksel atau REM. Anda dapat menggunakannya bersama breakpoint yang dapat disesuaikan divi untuk mengukur font Anda ke atas dan ke bawah sesuai kebutuhan.
Karena jumlah nilai Anda untuk efek yang sama tiga kali lipat saat menggunakannya dengan cara ini (bukan nilai 10 klem () di atas, ini akan menjadi 30 nilai individu). Tidak selalu disarankan untuk mengisi manajer variabel dengan nilai -nilai ini, tetapi Anda bisa jika Anda mau,
| Ukuran nama | Desktop | Tablet | Mobile |
|---|---|---|---|
| H1 (besar) | 10rem | 5rem | 2.1rem |
| H1 | 4.5rem | 3rem | 1.5rem |
| H2 | 3.25rem | 2.25rem | 1.425rem |
| H3 | 2.25rem | 1.8rem | 1.375rem |
| H4 | 1.75rem | 1.5rem | 1.25rem |
| H5 | 1.5rem | 1.3rem | 1.125rem |
| H6 | 1.25rem | 1.125rem | 1rem |
| Tubuh | 1.125rem | 1rem | 0.875rem |
| Tubuh kecil | 1rem | 0.875rem | 0.75rem |
| Tombol | 1.125rem | 1rem | 0.875rem |
Anda dapat membangun struktur ukuran Anda untuk setiap breakpoint dan membawanya ke langkah berikutnya. Alih -alih menempatkannya sebagai variabel desain, Anda dapat menerapkannya langsung ke grup opsi dan preset elemen.
Langkah 5: Menambahkan ukuran font dari variabel manager ke preset
Dengan set variabel nomor Anda (atau setidaknya diformulasikan), sekarang saatnya untuk menerapkannya pada preset. Salah satu kasus penggunaan terbaik untuk preset grup opsi adalah tipografi. Anda dapat membuat tujuh (7) preset grup opsi heading/judul yang dapat Anda gunakan untuk modul apa pun yang menggunakan bidang heading/judul (seperti heading, blurb, akordeon, dan modul orang, misalnya).
Hal yang sama berlaku untuk grup opsi teks. Saya dapat mengatur dua (2) preset (satu untuk normal saya dan satu untuk teks tubuh kecil saya), dan modul apa pun yang menggunakan grup opsi teks dapat menggunakan gaya tersebut. Untuk gaya tajuk dan teks, ini jauh lebih efisien daripada menerapkan gaya tersebut sebagai preset elemen untuk semua berbagai modul yang mungkin Anda gunakan di seluruh situs web Anda.
Menetapkan nilai tetap ke breakpoints
Video di bawah ini menunjukkan langkah -langkah dasar jika Anda memilih nilai tetap di beberapa breakpoint. Klik pada modul teks, buka tab Desain , kurangi grup opsi teks, klik ikon OG , buat preset baru, dan terapkan gaya Anda di setiap breakpoint. Gulir ke bagian bawah sidebar kanan dan simpan preset Anda ( sangat penting ). Ulangi ini untuk variasi teks sebanyak yang Anda lakukan (seperti pilihan kecil, teratur, dan besar).
Tetapkan preset OG yang Anda harapkan untuk menggunakan paling banyak sebagai preset default Anda untuk grup opsi itu. Jika Anda melihat bintang di sebelahnya, itu adalah default Anda saat ini (ini akan berlaku di seluruh situs Anda, dengan asumsi tidak ada gaya modul lain atau preset elemen yang diterapkan di seluruh).
Menetapkan fungsi Clamp () (lebih mudah)
Prosesnya serupa saat menggunakan variabel desain dengan fungsi klem (), tetapi jauh lebih mudah. Dalam contoh video di bawah ini, kami telah menetapkan dua ukuran heading pada level grup opsi. Satu -satunya perbedaan dari di atas adalah bahwa kita tidak menempelkan nilai tetapi menggunakan variabel yang kita atur sebelumnya. Saat menyiapkan preset OG Anda, pastikan font default dipilih dan atur warna seperti yang Anda inginkan. Beberapa orang menyukai pengaturan warna di tingkat modul sebagai gantinya, tetapi terserah Anda.
Anda akan mengatur setiap level heading H1-H6 sebagai preset grup opsi kustom baru.
Terapkan preset ini ke judul tata letak Anda menggunakan preset grup opsi yang Anda buat. Keindahan preset grup opsi adalah bahwa mereka bekerja di seluruh modul dalam grup opsi itu, seperti teks, uraian, dan modul header.
Praktik terbaik untuk font di Divi 5
Untuk memaksimalkan tipografi Anda, ingatlah tips ini:
- Selalu atur variabel font global lebih awal.
- Gunakan jarak dan ukuran yang konsisten (ya, Anda dapat mengatur jarak huruf dan tinggi garis sebagai variabel desain juga).
- Pratinjau secara teratur tampilan responsif di seluruh ukuran layar.
- Hindari terlalu banyak font atau bobot font.
Tipografi di Divi 5 adalah menghirup udara segar
Anda sekarang memiliki sistem tipografi lengkap berkat fitur terbaru Divi.
Font hidup sebagai variabel desain. Sama dengan ukuran font saat Anda menggunakan clamp (). Atau jika Anda ingin melatih ketujuh breakpoint yang dapat disesuaikan itu, Anda juga dapat mengambil rute itu.
Preset grup opsi menerapkan pilihan -pilihan itu dengan mudah di seluruh situs Anda. Tweaking font ukuran di seluruh build sangat mudah karena ditetapkan sebagai variabel desain. Apa pun yang terjadi, desain Anda akan tetap tajam, dan waktu pembangunan Anda akan menyusut.
Divi 5 telah meluncurkan banyak fitur baru yang meningkatkan sistem desain Anda. Mulailah membangun situs baru di Divi 5 hari ini untuk memanfaatkan semua fitur terbaru. Kami sarankan menunggu lebih lama untuk memigrasi situs web yang ada ke Divi 5.