Aturan Tipografi Web Responsif

Tipografi Web responsif sangat sulit - Anda harus memiliki daging desain dan pengetahuan teknis. Namun bagaimanapun rumitnya, salah, salah bukanlah pilihan, karena tipografi adalah landasan desain web.

Bagaimana Anda mendapatkan desain dan kode yang tepat? Bagaimana Pengembang Anda Berkomunikasi dengan Desainer Pushing Pixel? Bagaimana desainer Anda dapat membuat pengembang nonchalanan peduli dengan tipografi? Cara tercepat dan paling sederhana adalah membuat desainer dan pengembang Anda berbicara bahasa yang sama, menghormati satu sama lain untuk kerajinan mereka, dan berusaha memahami prinsip dan keterbatasan tipografi web.

Artikel ini bertujuan untuk menyediakan perancang dan pengembang dengan pondasi untuk memulai komunikasi pada subjek tipografi. Kami akan membahas prinsip-prinsip desain yang diperlukan dan mengeksplorasi solusi praktis untuk tipografi responsif. .

Apa itu tipografi yang bagus?

'Bagus' selalu subyektif; Ini bukan jangkar tetap yang bisa kita engsel. Bagi perancang dan pengembang untuk berkomunikasi secara efektif, kita harus mulai dengan berbicara tentang penyebut umum yang dapat dipahami kedua belah pihak. Denominator itu adalah tujuan tipografi.

Tipografi adalah penampilan teks; Kami berpakaian teks. Tujuan berpakaian adalah untuk membuat pemakai cukup menarik untuk menarik percakapan, tetapi tidak terlalu menarik perhatian bahwa pihak lain terganggu dari percakapan.

Demikian juga, tujuan tipografi adalah untuk memungkinkan pembaca untuk fokus dan membenamkan diri dalam isi teks. Tipografi yang baik, menurut definisi, adalah tipografi yang membantu teks memenuhi tujuan komunikasi.

Dua hal harus terjadi bagi pembaca untuk fokus dan membenamkan diri dalam teks. Pertama, tipografi harus menyampaikan emosi yang sesuai (jika ada). Kedua, teks harus mudah dibaca. Ini membawa kita ke empat sifat penting yang harus Anda dapatkan dengan benar.

• Font Family.
• Ukuran huruf
• Tinggi garis (juga disebut terkemuka)
• Lebar teks (juga disebut ukuran teks)

Mendapatkan keluarga yang tepat membantu emosi yang mendasari teks bersinar. Mendapatkan tiga properti lain yang tepat memastikan teks Anda mudah dibaca. Sebagian besar, desainer sangat baik dalam menemukan keluarga font yang tepat. Jadi, untuk sisa artikel ini kita akan fokus pada tiga faktor lainnya.

Seni teks yang dapat dibaca

Langkah pertama dalam proyek apa pun adalah mengatur ukuran huruf , tinggi garis dan lebar teks tubuh Anda. Proses ini disebut huruf. Mulailah dengan mengatur huruf dengan halaman yang berisi informasi yang dibutuhkan pengguna. Sebisa mungkin, halaman ini harus berisi beberapa elemen, seperti H1, H2, H3, teks tubuh dan teks, yang harus Anda buat pilihan sadar untuk apa yang berfungsi untuk desain Anda. Semakin banyak elemen yang berisi halaman Anda, semakin baik peluang Anda untuk mengatur skema jenis yang berfungsi di seluruh papan.

Ketika Anda memilih ukuran huruf , tinggi garis Dan ukur untuk teks tubuh Anda, pastikan Anda menggunakan konten nyata. Jika Anda tidak memiliki konten yang sebenarnya, gunakan teks dari Wikipedia alih-alih Lorem Ipsum.

Anda juga perlu menempatkan diri Anda dalam situasi yang sama dengan Anda mengesu, karena jarak antara mata pembaca dan layar berbeda untuk perangkat yang berbeda. Jika Anda mengatur ulang untuk perangkat seluler, lihat output Anda melalui telepon. Jika Anda menyetemat untuk laptop, duduklah di meja Anda dengan laptop Anda, dan sebagainya.

Setelah Anda memilih diri Anda di lingkungan yang tepat, mulailah proses pengucakan Anda dengan memilih terlebih dahulu ukuran huruf , diikuti dengan ukuran dan akhirnya tinggi garis . Ingatlah bahwa tidak ada kombinasi yang sempurna - lihat saja halaman lain yang Anda rasa memiliki tipografi yang baik dan Anda akan melihat bahwa tidak ada dari mereka yang menggunakan yang sama ukuran huruf , tinggi garis dan ukur. Jadi, apa yang Anda tuju hanyalah teks yang mudah dibaca.

Mengatur ukuran yang tepat lebih sulit untuk dijelaskan secara tertulis, jadi saya telah membuat beberapa video untuk membantu Anda ukuran huruf , mengukur dan terkemuka .

Berikut adalah beberapa panduan cepat untuk membantu Anda memastikan Anda memiliki ukuran font yang baik, memimpin dan mengukur.

Font Anda terlalu kecil jika:

• Anda harus berkonsentrasi untuk membaca teks
• Anda harus menyipitkan mata Anda
• Anda memiliki keinginan untuk memperbesar

Font Anda terlalu besar jika:

• Anda mulai memperhatikan bentuk surat alih-alih membaca konten
• Anda hanya dapat membaca satu hingga tiga kata sekaligus
• Anda memiliki keinginan untuk memperkecil

Ukuran teks Anda terlalu lama jika:

• Anda harus memutar kepala untuk membaca teks
• Anda kehilangan konsentrasi di tengah jalan

Ukuran teks Anda terlalu pendek jika:

• Anda merasa jengkel ketika teks pecah ke baris berikutnya
• Matamu lelah karena memantul ke kiri dan kanan dengan cepat

Memimpin Anda terlalu sempit jika:

• Teks terasa padat dan luar biasa
• Anda membaca garis teks yang salah secara tidak sengaja

Memimpin Anda terlalu besar jika:

• Anda terganggu oleh ruang putih di antara deretan kata-kata

Selalu ingat definisi tipografi yang baik: Anda tidak setelah kesempurnaan, Anda hanya menembak untuk teks yang mudah dibaca. Saat melakukannya, Anda akan ingin menguji pilihan pengucingan Anda dengan audiens Anda (teman dan rekan kerja juga membuat penguji yang hebat) untuk memastikan Anda benar. Hanya beralih untuk mengatur ukuran elemen lain saat Anda selesai mengatur ulang teks tubuh.

Menyetapkan elemen lain.

Banyak desainer dan pengembang memilih ukuran huruf Untuk elemen-elemen seperti H1 dan H2 secara visual, dan cukup berharap bahwa angka-angka ajaib ini bekerja dengan baik dalam desain mereka. Tetapi tidak perlu hanya menarik angka dari udara tipis; Tipografi telah menggunakan skala tipografi selama berabad-abad untuk membantu ini. Apa yang Anda lakukan adalah memilih nomor dari skala tipografi sebagai ukuran elemen Anda. Sayangnya, skala ini tidak dapat langsung digunakan untuk web karena dibuat untuk desain cetak.

Tim Brown, seorang ahli di bidang tipografi, muncul dengan solusi yang disebut skala modular. Ini berfungsi persis seperti skala tipografi, kecuali Anda membangun skala modular dengan teks tubuh yang telah Anda putuskan.

Untuk membuat skala modular, Anda mengambil teks tubuh ukuran huruf (juga disebut ukuran font dasar) dan gandakan dengan rasio berkali-kali sampai Anda mendapatkan skala. Seringkali, rasio yang Anda gunakan berasal dari musik (karena musik memiliki akar dalam harmoni). Di atas adalah contoh skala yang dibuat dengan bantuan a Kalkulator skala modular .

Ketika Anda selesai membangun skala modular, Anda dapat beralih ke mengeset sisa elemen Anda, memilih nomor dari skala Anda ukuran huruf . Kemudian atur memimpin dan mengukur dengan proses yang sama sampai Anda mendapatkan keseimbangan yang baik dari elemen yang dapat dibaca.

Rhythm vertikal

Langkah selanjutnya adalah membantu gel elemen individual bersama-sama menggunakan teknik yang disebut irama vertikal. Untuk satu elemen mengalir secara harmonis ke yang berikutnya, kita perlu men-tweak hal yang bergabung dengan mereka: ruang putih. Ruang putih ini harus cukup besar untuk membedakan satu elemen dari yang berikutnya dengan jelas, tetapi harus cukup kecil untuk memastikan aliran tidak rusak.

Berapa banyak ruang putih yang harus Anda gunakan? Banyak desainer memilih angka seperti 10px yang mudah untuk dirancang. Banyak pengembang, di sisi lain, cenderung mencambuk angka acak (seperti 6px) baik dari sistem grid lain atau artikel yang mereka baca secara online. Tidak heran keduanya tidak dapat berkomunikasi.

Seperti yang Anda bayangkan, tidak perlu mengandalkan nomor ajaib untuk ruang putih; Kita dapat menggunakan kelipatan tinggi garis nilai teks tubuh kita. Ini karena kami secara naluriah mengenali pola ruang putih dalam teks. Semakin kuat pola, yang lebih aman yang kita rasakan, dan semakin mudah baginya untuk membiarkan pikiran kita berjalan ke dalam konten.

Untuk menggunakan irama vertikal, semua yang Anda lakukan adalah:

1. Atur ruang putih antara elemen ke beberapa pangkalan tinggi garis
2. Mengatur tinggi garis dari semua elemen lain ke beberapa pangkalan tinggi garis

Banyak yang dipertanyakan tidak perlu menjadi bilangan bulat. Anda dapat menggunakan nilai-nilai seperti 0.5x dan 1,25x dari pangkalan tinggi garis untuk memberi Anda lebih banyak fleksibilitas. Nilai-nilai ini berfungsi karena irama vertikal menggunakan prinsip pengulangan.

GRID BASELLE atau TIDAK?

Setiap kali kami menyebutkan irama vertikal, konsep grid baseline pasti datang ke dalam gambar. Meskipun jaringan baseline berpotensi membantu, sebagian besar bangkai kereta karena pemula fokus begitu banyak energi untuk membuat teks duduk di antara (atau pada) baseline yang mereka rasa tidak mungkin untuk mendapatkan irama vertikal.

Jujur saja, Anda tidak akan pernah mendapatkan grid dasar untuk bekerja dengan sempurna di web karena matematika dalam tipografi selalu berisi subpiksel (seperti 24.8px), dan semua browser menangani subpiksel secara berbeda. Misalnya, beberapa browser menyebabkan setiap elemen pada halaman menjadi 1px. Kesalahan 1px ini menumpuk dan mendorong elemen apa pun yang ditempatkan lebih rendah ke bawah halaman bahkan lebih jauh dari grid. Akibatnya, saya sarankan untuk menentang menggunakan grid baseline.

Bergerak, mari kita masuk ke ranah praktik responsif dan merancang untuk beberapa layar.

Tipografi untuk beberapa layar

Merancang tipografi untuk beberapa layar tidak berarti prestasi. Ada tiga hal yang perlu kita lakukan dari perspektif desain.

Pertama, jarak antara mata pengguna dan layar mereka tergantung pada jenis perangkat apa yang mereka gunakan. Secara umum, pengguna akan menempatkan perangkat lebih jauh saat menggunakan layar yang lebih besar. Fenomena ini berarti Anda perlu meningkatkan ukuran font Anda sebagai peningkatan perangkat meningkat.

Kedua, kami ingin menjaga proporsi antara teks tubuh dan elemen lain yang konsisten. Ini berarti kita harus menambah ukuran semua elemen saat kita meningkatkan ukuran teks tubuh.

Ketiga, pada breakpoint tertentu kami ingin meningkatkan ukuran huruf elemen tertentu (seperti H1) dengan memilih nomor yang berbeda dari skala modular. Melakukan hal itu memungkinkan kita untuk mengontrol hierarki visual dan memastikan bahwa elemen-elemen mengumpulkan cukup perhatian untuk menarik pengguna untuk membaca.

Coding untuk tipografi responsif

Kita tahu kita perlu menambah ukuran teks kita secara proporsional. Cara termudah untuk melakukan ini adalah meningkatkan ukuran huruf dalam html. pemilih. Kami juga ingin menggunakan unit relatif untuk menghormati pengguna ukuran huruf Pilihan.

 HTML {ukuran font: 100%;}
@Media (Lebar Min-: 40EM) {
 html {font-font: 112,5%;}
} 

Kami juga ingin menggunakan unit relatif untuk elemen lain, sehingga skala sesuai dengan HTML ukuran huruf ( H2. dalam contoh di bawah ini). Jika Anda perlu mengubah ukuran huruf ke nomor yang berbeda dalam skala modular, yang Anda lakukan adalah mengubah ukuran huruf sesuai ( h1. di bawah).

 H1 {font-ukuran: 2.369EM;}
@Media (Lebar Min-: 40EM) {
 HTML {Ukuran Font: 3.147EM;}
}

H2 {Ukuran Font: 1.777EM;} 

Meskipun prosesnya terlihat sederhana, pengembang baru mungkin menghadapi satu ton sakit kepala karena matematika yang terlibat, itulah sebabnya saya sarankan menggunakan fungsi dan mixin untuk membantu. Saya sering menggunakannya MS() dari perpustakaan skala modular. . Dengan ini, Anda dapat menulis ms (4) dari pada 3.157em. dan ms (3) dari pada 2.369EM. .

Contoh fungsi yang dapat memudahkan beban penghitungan ritme vertikal adalah: