İnternetteki tipografi için standart oranlar nelerdir?


25

Bir web tasarımı hazırlarken, genellikle tipografimin orantılı ve tutarlı olduğundan emin olmaya çalışırım. Ancak, hangi oran ve boyutta kullanılması gerektiğine dair kesin herhangi bir makale veya kaynak bulamadım. Özellikle, aşağıdakiler için önerilen veya standart uygulamalar nelerdir:

  • Yazı Boyutu
  • Satır yüksekliği
  • Hat genişliği
  • Satır aralığı

Lütfen cevaplarınızda hem paragraf hem de başlık metnini dikkate alın. Ayrıca, çeşitli oranların veya metriklerin etkinliği konusunda yapılan çalışmalar çok yararlı olacaktır.

Yanıtlar:


18

Robert Bringhurst'ün Tipografik Tarzın Öğeleri, böyle şeyler için eksiksiz ve harika bir referanstır. Uzun ama çok değerli.

Birçok tasarımcı standart bir çizgi ızgarası önerir, böylece bir çizgi + dolgusu her zaman 16 piksele sığacak. Bundan daha az olan herhangi bir şey 16 satır yüksekliğine, yukarıdaki her şey 32 satır yüksekliğine sahip olur.

Metin okumak için ideal bir çizgi uzunluğu, bazıları tarafından 45 karakter, diğer kaynaklar tarafından ise 55-75 arasında tutulur.

Burada bazı yaygın web siteleri ortalamaları vardır: Tipografik Tasarım Desenleri ve En İyi Uygulamalar


1

16px'deki paragrafla başla ve geri kalanını hesaplamak için Fibonacci dizisini kullan derim. Büyük tarayıcılar bu mantığı kullanıyor gibi görünüyor. Yıllar boyunca (gelecekteki araştırmalar için, Robert Bringhurst, Hartley ve Marks'ın “Tipografik Tarzın Unsurları: Versiyon 4.0” ı kullanarak) lider 10pt yazı tipi için 12pt'ye ayarlandı.

12pt'yi piksellere dönüştürerek 16px'lik bir temel font elde ederiz.

Tarayıcıların varsayılan Stil Sayfalarının çoğu, DOM üzerinde kendiniz denetleyebileceğiniz veya https://www.w3.org/TR/CSS21/sample.html ve http: // listelerini okuyarak paragraf metni için 16 piksel kullanır . w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Bugün yaşadığımız sorun tam olarak yeni bir tipografi hakkında konuşmamız. Farklı cihazlara sığması gereken şu anki web tipografisi, Robert Bringhurst'ün Tipografik Tarzın Öğelerinde tasvir edilenler gibi geçmişteki kavramlardan tamamen farklıdır. Buna rağmen mükemmel bir kitap olmasına rağmen, gerçek şu ki modern tasarımcının koda ihtiyacı var. Genelde büyük h1, h2, h3, h4, h5, h6, paragraf, altbilgiye sahip bir HTML dosyası iskeleti oluşturarak ana tarayıcı stil sayfalarından standart bir matris düşünürüm. Tarayıcı stil sayfasını, çizgi yüksekliklerini kullandıkları standart piksel boyutunun boyutunu ve başlıklardaki hiyerarşiyi anlamak için inceliyorum. Web tipografisinin boyutu, metal / ahşap hareketli tip tarafından düzenlenmiştir, ancak 1985'ten itibaren Adobe ve Apple arasındaki anlaşma değişmeye başlamıştır. Bugün, tipografi kavramlarının ana düzenleyicileri Apple, Safari, Windows, Internet Explorer, Chrome, Firefox ... olduğunu düşünüyorum. Tipografinizi gerçekte nelerin oluşturulacaklarına yerleştirmek için tarayıcı stil sayfalarına bakmanız gerekecek. farklı cihazlar Robert Bringhurst'ün mükemmel bir kitap olan Tipografik Stil Elementleri'nden uygulamaları takip etmeli ya da Fibonacci dizi sistemini takip etmelisiniz. Genellikle tarayıcıların stil sayfalarındaki değişikliklerden haberdar olurum ve burada w3 özelliklerini okurum: Robert Bringhurst'ün mükemmel bir kitap olan Tipografik Stil Elementleri'nden uygulamaları takip etmeli ya da Fibonacci dizi sistemini takip etmelisiniz. Genellikle tarayıcıların stil sayfalarındaki değişikliklerden haberdar oluyorum ve burada w3 özelliklerini okudum: Robert Bringhurst'ün mükemmel bir kitap olan Tipografik Stil Elementleri'nden uygulamaları takip etmeli ya da Fibonacci dizi sistemini takip etmelisiniz. Genellikle tarayıcıların stil sayfalarındaki değişikliklerden haberdar oluyorum ve burada w3 özelliklerini okudum:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Tasarım alanının bunu göz önünde bulundurması gerektiğini düşünüyorum ve uygulamadaki eğitimin uygulama ile güncellenmediğini düşünüyorum. güncel gerçekler. Blogumda buradan daha fazla bilgi edinebilirsiniz: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Merhaba @EstelaG ve GD.SE'ye hoş geldiniz! Spam için katı kurallarımız ve bağlantılardaki cevaplarımız var. Cevabınızı işaretli görmekten nefret ediyorum. Makalenin ana noktalarını özetlemek için sorunuzu düzenlemelisiniz.
meraklı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.