Ritme / garis dasar vertikal dalam Desain Web

Baru-baru ini saya membaca beberapa artikel tentang pentingnya ritme vertikal yang baik / menggunakan garis dasar untuk tipografi yang baik dalam desain web. Saya memutuskan untuk mencoba menggunakan garis dasar, seperti kotak 960 yang digambarkan di bawah ini, sebagai gambar latar belakang untuk desain web / tema WordPress yang sedang saya kerjakan.

960 kotak

Saya merasa sangat sulit untuk mendapatkan semuanya berbaris dengan benar di dalam grid. Saya berhasil mendapatkan semuanya dalam kotak vertikal pada ukuran teks standar (16px), tetapi ketika saya mulai mengacaukan ukuran judul, menambahkan gambar, dll, item tidak selalu tetap selaras dengan benar di grid.

Saya ingin tahu bagaimana meningkatkan tipografi saya menggunakan ritme vertikal. Adakah yang punya tips atau teknik yang harus saya gunakan?

— Santaji
sumber

Jawaban:

Garis dasar dalam desain web adalah teka-teki akademis kebutuhan tetapi sebagian besar tidak praktis dari sudut pandang matematika hard-coded. Karena CSS tidak memiliki konsep garis dasar untuk jenis, secara teknis tidak mungkin mendapatkan garis dasar yang cocok.

Anda dapat mendekati jarak hal-hal, tetapi Anda akhirnya berakhir dengan sesuatu yang mungkin masuk akal ketika melihat angka-angka, tetapi kemungkinan tidak aktif secara visual dan Anda akhirnya menyimpang dari rumus untuk memastikan semuanya terlihat benar.

Jadi, secara ringkas, ritme visual itu penting, tetapi bangun dari usus Anda, bukan beberapa persamaan yang hanya akan membuat Anda gila menerapkan dengan benar di web.

Sebagai tambahan, perhatikan bahwa konsep garis dasar berasal dari dunia desain cetak ... khusus tata letak multi-kolom seperti di surat kabar di mana Anda ingin jenis untuk berbaris dari kolom ke kolom sebagai preferensi. Untuk membuatnya mudah untuk mengeset publikasi semacam itu, sebuah garis dasar masuk akal, dan relatif mudah diimplementasikan dalam dunia aplikasi DTP.

— DA01
sumber

Tepat - Anda sedang mencampurkan apel dan orangutan. Ini seperti mencoba untuk mendapatkan sampul buku saku untuk memutar video Flash. Kecuali Anda melakukan semuanya sebagai gambar dan seluruh situs web Anda adalah JPG dengan peta gambar, itu tidak akan terjadi.

— Lauren-Clear-Monica-Ipsum

Tidak sulit untuk membuat css dan html Anda cocok dengan kisi 960. Bagaimanapun, pengkodean hanyalah matematika. Selain itu, pada dasarnya semua desainer di (misalnya) themeforest.net menggunakannya. Ini tidak sesulit yang Anda katakan. Dan ya .... konsep grid berasal dari dunia cetak. Namun, sistem grid 960 dikonversi untuk web agar sesuai dengan resolusi minimum 1024x768.

— Luuk

kisi 960 terutama untuk membuat kisi horizontal dan sesuatu yang sangat saya rekomendasikan di situs dengan ukuran yang bahkan sedang. Ini alat yang sangat berguna. Namun, kita berbicara tentang garis dasar tipe vertikal. Ya, coding itu matematika. Sayangnya, browser dan spec CSS tidak membuat akomodasi khusus untuk mencari garis dasar bentuk huruf. Anda dapat menyamakannya dengan matematika Anda, tetapi Anda berada di bawah belas kasihan dari masing-masing browser, sistem operasi, font yang diinstal dan preferensi pengguna, jadi sama sekali bukan 'matematika sederhana' untuk mendapatkan aspek kotak tipe garis dasar dari kerjanya.

— DA01

Selain itu, desain tidak selalu matematika murni. Sebenarnya, ini jarang matematika murni. Matematika sampai pada titik tertentu, tetapi lebih dari itu, penilaian estetika mata harus dilakukan. Saya telah membangun situs menggunakan sistem garis dasar baik untuk saya maupun desainer lain dan lebih sering, kita harus menghapus garis dasar pada akhirnya untuk membuatnya 'terasa' benar. Saya telah memutuskan bahwa karena itu, biasanya merupakan usaha yang sia-sia untuk membuat garis dasar berfungsi karena biasanya merupakan hal yang sewenang-wenang.

— DA01

Hmm, saya kurang membaca;) Saya tidak memperhatikan itu hanya tentang irama vertikal. Saya harus setuju bahwa saya juga tidak benar-benar menggunakan 960gs untuk rythem vertikal. Hanya untuk horizontal. Satu-satunya hal yang saya gunakan secara vertikal adalah "lipatan". Selebihnya saya sejajarkan (sekali lagi secara vertikal) dengan "mata".

— Luuk

Irama vertikal tidak sulit untuk diterapkan, terutama jika Anda mulai dengan reset CSS . Saya menemukan tautan ini http://24ways.org/2006/compose-to-a-vertical-rhythm beberapa waktu lalu, dan sejak itu menggunakan teknik ini di semua desain saya.

Apa yang saya temukan adalah bahwa setelah bekerja dengan seperangkat deklarasi tipe "kalengan" dalam file CSS saya (h1 - h6, p, dll. - khusus, ukuran, tinggi garis, margin bawah) sangat mudah digunakan.

Inilah gambar latar belakang yang telah membantu saya melihat hal-hal yang sedikit lebih jelas ... terutama, ketika saya pertama kali menggunakan ritme vert.

masukkan deskripsi gambar di sini

Mungkin sulit untuk dilihat, tetapi ketika diulang sebagai gambar latar: Anda akan melihat kisi 20x20.

HTH

Catatan: Saya suka tipografi di situs yang telah menggunakan teknik ini lebih baik daripada yang tidak. Namun dalam kedua kasus, tampaknya selalu ada satu atau dua elemen yang harus "menipu sistem" agar terlihat "benar". Saya juga menemukan bahwa memperhatikan ketinggian garis keseluruhan (katakanlah 18px untuk basis font 12px) membuat margin pengaturan dan lapisan di sekitar gambar, header grafis, dan sejenisnya cukup lurus ke depan (18px). Juga ... dorongan untuk menghitung semuanya hilang ... Anda akan mulai memperhatikan "ritme vertikal" tentang tata letak, dan dapat menarik padding / margin / line-height yang tepat dari daftar nilai yang sangat singkat di kepala kamu.

— Dawson
sumber

Artikel yang sangat bagus di Smashing Magazine tentang ritme dasar dan vertikal ini memberi Anda wawasan tentang pentingnya garis dasar dalam desain web dan bagaimana menerapkannya dalam css Anda. Ini menggunakan ukuran font, tinggi baris, padding dan margin pada elemen html default untuk membuat setiap baris dengan grid dasar Anda.

Untuk membantu mencocokkan semuanya dengan grid, gambar latar belakang sangat berguna, seperti yang disarankan Dawson.

Saya telah mengikuti teknik ini untuk beberapa desain terbaru saya, dan saya pikir itu benar-benar terbayar.

— Vincent
sumber