Web Tasarımında dikey ritim / taban çizgisi ızgarası

Son zamanlarda iyi dikey ritmin önemi hakkında iyi makaleler okudum / web tasarımında iyi tipografi için bir taban çizgisi ızgarası kullanıyorum. Şu anda üzerinde çalıştığım bir web tasarımı / WordPress temasının arka plan görüntüsü olarak, aşağıda gösterilen 960 ızgara gibi bir taban çizgisi ızgarası kullanmayı denemeye karar verdim.

960 ızgara

Her şeyin ızgara içinde düzgün bir şekilde sıralanmasını çok zor buluyorum. Varsayılan metin boyutunda (16px) dikey ızgarada her şeyi almayı başardım, ancak başlıkların boyutuyla uğraşmaya başladığımdan, resim eklediğimde, öğeler her zaman ızgarada düzgün şekilde hizalanmıyor.

Dikey ritim kullanarak tipografimi nasıl geliştireceğimizi bilmek istiyorum. Kullanmam gereken herhangi bir ipucu veya teknik var mı?

— Santaji
kaynak

Yanıtlar:

Web tasarımında taban çizgisi ızgarası, ihtiyaç duyulan bir akademik bulmacadır, ancak çoğunlukla sabit kodlanmış bir matematiksel açıdan pratik değildir. CSS'nin tür için bir taban çizgisi konsepti olmadığından, taban çizgilerinin eşleşmesi teknik olarak imkansızdır.

Bir şeyleri aralamaya yaklaşabilirsiniz, ancak sonunda sayılara bakarken mantıklı olabilecek bir şeyle sonuçlanırsınız, ancak muhtemelen görsel olarak kapalıdır ve sonuçların doğru görünmesini sağlamak için formülden saparsınız.

Yani, özet olarak, görsel bir ritim önemlidir, ancak sadece web'de düzgün bir şekilde uygulamanıza neden olacak bazı denklemleri değil, bağırsağınızdan oluşturun.

Bir yana, bir taban çizgisi ızgarası kavramının baskı tasarımı dünyasından geldiğine dikkat edin ... özellikle türün bir sütundan diğerine sütun olarak sıralanmasını istediğiniz bir gazete gibi. Bu tür bir yayının dizilmesini kolaylaştırmak için, bir taban çizgisi ızgarası mantıklıdır ve DTP uygulamaları dünyasında uygulanması nispeten kolaydır.

— DA01
kaynak

Kesinlikle - elmaları ve orangutanları karıştırıyorsunuz. Flash video oynatmak için bir ciltsiz kitabın kapağını almaya çalışmak gibi. Her şeyi bir görüntü olarak yapmazsanız ve tüm web siteniz görüntü haritalarına sahip bir JPG değilse, gerçekleşmez.

— Lauren-Clear-Monica-Ipsum

Css ve html'nizin 960 ızgarasıyla eşleşmesi zor değildir. Kodlama basitçe matematiktir. Bunun yanı sıra, temelde (örneğin) themeforest.net üzerindeki tüm tasarımcılar bunu kullanıyor. Söylediğin kadar zor değil. Ve evet .... ızgara konsepti baskı dünyasından geliyor. Bununla birlikte, 960 ızgara sistemi, web için minimum 1024x768 çözünürlüğe uyacak şekilde dönüştürülür.

— Luuk

960 ızgarası öncelikle yatay ızgaralar oluşturmak ve orta büyüklükteki sitelerde tavsiye ettiğim bir şeydir. Çok kullanışlı bir araç. Ancak, dikey tip bir taban çizgisinden bahsediyoruz. Evet, kodlama matematiktir. Ne yazık ki, tarayıcılar ve CSS spec mektup formları taban çizgileri bulmak için özel bir konaklama yaptı. Matematiğinizle basketbol oynayabilirsiniz, ancak bireysel tarayıcıların, işletim sistemlerinin, yüklü yazı tiplerinin ve kullanıcı tercihlerinin merhametindesiniz, bu yüzden temel tip ızgara yönünün çalışmasını sağlamak hiç de basit bir matematik değildir.

— DA01 13

Bunun da ötesinde, tasarım her zaman saf matematik değildir. Aslında, nadiren saf matematiktir. Matematik bizi bir noktaya getirir, ama bunun ötesinde, gözün estetik yargısı gerçekleşmelidir. Hem kendim hem de diğer tasarımcılar için bir taban çizgisi ızgara sistemi kullanarak siteler oluşturdum ve çoğu zaman, 'doğru' hissettirmek için taban çizgisi ızgarasını kazımak zorundayız. Bu nedenle, genellikle keyfi bir şey olduğu için taban çizgisi ızgarasının çalışmasının genellikle boşa harcandığına karar verdim.

— DA01 13

Hmm, okuma eksikliğim;) Sadece dikey ritimle ilgili olduğunu fark etmedim. 960gs'i gerçekten dikey ritm için kullanmadığımı kabul etmeliyim. Sadece yatay. Dikey olarak kullandığım tek şey "katlama". Gerisi ben (bir kez daha dikey olarak) "gözle" hizalar.

— Luuk

Dikey ritmin uygulanması zor değildir, özellikle de bir CSS sıfırlamasıyla başlarsanız . Bir süre önce bu bağlantıya rastladım http://24ways.org/2006/compose-to-a-vertical-rhythm ve o zamandan beri tekniği tüm tasarımlarımda kullanıyorum.

Bulduğum şey, CSS dosyamdaki (h1 - h6, p, vb.) Bir "hazır" tür bildirimi ile çalıştıktan sonra - özellikle boyut, satır yüksekliği, alt kenar boşlukları) konuşlandırmanın çok kolay olmasıdır.

İşte şeyleri biraz daha net görmeme yardımcı olan bir arka plan görüntüsü ... özellikle, dikey ritmi ilk kullandığımda.

resim açıklamasını buraya girin

Görmek zor olabilir, ancak arka plan resmi olarak tekrarlandığında: 20x20 ızgara göreceksiniz.

HTH

Not: Bu tekniği kullanmayan sitelerde tipografiyi kullanmayanlardan daha çok seviyorum. Ancak her iki durumda da, her zaman "doğru" görünmek için "sistemi kandırmak" zorunda olan bir veya iki unsur vardır. Ayrıca, genel satır yüksekliğine dikkat etmenin (12px yazı tipi tabanı için 18px diyelim), görüntüler, grafik başlıkları ve benzerleri etrafında kenar boşlukları ve dolgu oluşturmayı oldukça düzleştirdiğini (18px) buldum. Ayrıca ... her şeyi hesaplama dürtüsü ortadan kalkar ... mizanpaj hakkında bir "dikey ritim" fark etmeye başlarsınız ve çok kısa bir değerler listesinden doğru dolgu / kenar boşluğu / satır yüksekliğini çekebilirsiniz Kafanın içinde.

— Dawson
kaynak

Smashing Magazine'de taban çizgisi ve dikey ritim hakkındaki bu çok güzel makale, hem web tasarımında taban çizgilerinin önemi hem de bunları css'nize nasıl uygulayacağınız konusunda bazı bilgiler veriyor. Satır taban çizgisi ızgarasıyla hizalamak için varsayılan html öğelerinde yazı tipi boyutu, satır yüksekliği, dolgu ve kenar boşluğu kullanır.

Her şeyin ızgarayla eşleştirilmesine yardımcı olmak için Dawson'ın önerdiği gibi bir arka plan görüntüsü çok yararlıdır.

En son birkaç tasarımım için bu tekniği izliyorum ve bence gerçekten işe yarıyor.

— Vincent
kaynak