Web sayfası satır uzunluğu

, 14 Aralık 2022

Bir internet sayfasının var olma sebebi içeriğidir. İnternet sitelerinin büyük bir kısmının ana içeriği metindir. Metnin temel işlevi okunmaktır ve günümüzün web’inde tipografi her zamankinden daha önemli bir konumdadır. Bu yazıda, web’de tipografi konusuna, web sayfası satır uzunluğu açısından değineceğiz.

Satır uzunluğu nedir?

Satır uzunluğu, bir satıra düşen ortalama karakter sayısıdır. Yazı tipi, karakter boyu, satır aralığı, renk, zemin ve boş alan gibi etkenlerle birlikte bir metnin okunabilirliği için önem taşır. Çok uzun satırlarda veya çok dar satır aralıklarında göz satır başını bulmakta zorlanır. Çok kısa satırların ise okuma ritmini bozduğu ve okuyucuda gerilim yarattığı ifade edilmektedir.

Satır uzunluğuna karar verilirken, karakter boyu ve satır yüksekliğinin (satır aralığı da denir) de göz önünde bulundurulması gerekir.

Web sayfası satır uzunluğu hesaplanırken kullanılan birimler

İdeal bir web sayfası satır uzunluğu belirlemek için sayılar ve formüllerle uğraşmaya başlamadan önce, birimleri kısaca hatırlamakta fayda var:

Web’de yaygın olarak kullanılan tipografik birimler

em: 1em söz konusu karakter boyuna eşit olan bir birimdir. Karakter boyu ilgili öğenin ebeveyninden alınır. Mesela <article> öğesinin karakter boyu 16px ise, <article>‘ın altındaki bir <div>‘de 2em 32px‘e denk gelir.
px: piksel. Ekrandaki bir noktaya denk gelen birim.
%: yüzde. Kullanılan karakter boyu %100’e denk gelir. Yani eğer karakter boyu 16px ise, font-size: 75% bildirimi 12px‘e eşit olacaktır.
rem: rem ile em hemen hemen aynı mantıkla çalışır. rem’in em’den farkı, karakter boyunun en yakındaki ebeveyne göre değil, kökteki ebeveyne göre belirlenmesidir. Bu genellikle <body> öğesi olur.
vw, vh, vmin: Bu birimler karakter boyunu ekran ölçülerine oranla ayarlamanızı sağlar. Mesela 1vw ekran genişliğinin %1’ine denk gelir. Benzer şekilde 1vh ise ekran yüksekliğinin %1’idir. Son olarak 1vmin, ekran genişliği ve yüksekliğinden hangisi daha küçükse onun %1’i olarak hesaplanır (ifade kolaylığı için ‘ekran’ olarak alsak da, bu birimlerin hesaplaması ekrana değil, sayfanın görüntülendiği alana, yani tarayıcı penceresine göre hesaplanır).

Daha seyrek kullanılan tipografik birimler

ex: Yazı tipinin x yüksekliğidir. X yüksekliği, yazı tipinin küçük x harfinin yüksekliğidir. Genellikle karakter boyunun yarısına denk geldiği kabul edilir.
pt: point yani 1/72 inç’e denk gelen tipografik birim. Basılı medya temelli bir birimdir ve ekranları hedefleyen stillerde kullanılması pek tavsiye edilmez.
pc: pica. 12 point’e denk gelen tipografik birimdir. Bu birim de ekranı hedefleyen stillerde pek kullanılmaz.

Baskı amaçlı CSS yazarken kullanılan birimler

in: inç
cm: santimetre
mm: milimetre

Sayılarla web sayfası satır uzunluğu

Karakter boyu (font-size)

Kullandığınız yazı tipine göre çok değişebilmesine rağmen, ekranların büyümesi, bir yandan da küçük ekranlı cihazların yaygınlaşması ve aynı zamanda ekran çözünürlüklerinin artması sonucunda, karakter boyu olarak 16px ve üzerinin uygun olduğu kabul edilmektedir.

Basit karakter boyu bildirimi:

.normal-metin {
  font-size: 16px; /* en az */
}

Satır yüksekliği (line-height)

Satır yüksekliği hesaplanırken hem karakter boyu hem de satır uzunluğu dikkate alınmalıdır. Yine de pratik bir yöntem olarak karakter boyunu 1.2 ile çarparak makul bir satır yüksekliği elde edebilirsiniz.

Basit satır yüksekliği formülü:

satır yüksekliği = karakter boyu x 1.2

Satır uzunluğu

Satır uzunluğu konusunda farklı görüşlerden bazılarını sıralamak gerekirse:

Optimal satır uzunluğu 9 ya da 10 kelimedir. Burada bir kelime ortalama 5.5 harf olarak kabul edilmektedir.
27 karakter satır uzunluğunun alt sınırıdır, 40 karakter optimalıdır ve 70 karakter de üst sınırdır.
40-75 karakter arası genellikle tatminkar bir satır uzunluğudur.
66 karakter ideal kabul edilir. Mesela readability 50-65 karakter arası bir uzunluk kullanıyor.
75-80 karakterden uzun satırlar sürekli okuma için fazla uzundur.
Birden fazla sütun için: 40-50 karakter uzunluğunda satırlar uygundur.
Ortalama bir kitap sayfasında satır uzunluğu karakter boyunun 30 katıdır. 20 katı ile 40 katı arası kabul edilebilir ölçülerdir.

Ekrandan okumanın kağıttan okumaktan daha zor olması ve ekran okuyucusunun dikkatinin daha zayıf olduğu düşüncesiyle satırları kısa tutmanın daha doğru gibi görünüyor. Buradan hareketle az önce sıraladıklarımızı pratik bir hale getirelim.

Basit satır uzunluğu formülü:

35 karakter < satır uzunluğu < 70 karakter

Not: Karakter sayısı hesaplamalarına tüm karakterler (harf, rakam, boşluk, noktalama) dahildir.

CSS

Yukarıdaki bilgilere göre, ortalama bir karakterin 0.5em tuttuğu göz önünde bulundurulursa,

Sabit yerleşim

İdeal satır uzunluğunda (66 karakterlik) bir paragraf bildirimi:

.m66 {
  width: 33em;
}

Genişliği em ile verdiğimizde, kullanıcı metin boyunu değiştirdiğinde bile satır uzunluğu oran olarak aynı kalacaktır.

Esnek yerleşim

Yukarıdaki bildirim doğru olmasına rağmen, günümüzün web standartlarından biri haline gelen responsive tasarımın esnek yerleşim prensibini karşılamamaktadır. Bildirimi bu doğrultuda geliştirmek için alt ve üst sınırları belirleyebiliriz.

Esnek satır uzunluğuna sahip paragraf bildirimi:

.mEsnek {
  max-width: 38em;
  min-width: 18em;
}

Birim olarak em‘i kullanmanın bir dezavantajı, em birimler söz konusu olduğunda kalıtım (inheritance – bir öğenin kimi css niteliklerini “ebeveyn”inden alması) sebebi ile hesapların biraz karmaşıklaşmasıdır. Bu problemin çözümü için em yerine rem birimi kullanılabilir. Bu şekilde tüm hesaplamalar hiyerarşinin en üstündeki öğeye göre yapılır.

Nihai bildirim

Yukarıdakilerin hepsini bir araya toplarsak:

body {
  font-size: 16px; /* en az */
}
.normal-metin {
  font-size: 1rem;
  line-height: 1.2; /* birim yok */
  max-width: 38rem;
  min-width: 18rem;
}

Birkaç not

Yazıyı sonlandırmadan önce birkaç ayrıntıya dikkat çekmekte yarar var:

Satır uzunluğu, yani metni tutan öğenin genişliği, genellikle metnin ebeveynine atanır. Dolayısıyla yukarıda örnek olarak kullandığımız stiller tek tek <p> öğelerine değil, onları içine alan <div> ya da <segment> öğesine atanır. Böylece yalnızca paragrafların değil, liste, başlık, caption gibi öğelerin de aynı uzunlukta olması sağlanır.

Daha önce değindiğimiz gibi, birim olarak em yerine rem kullanmak hesaplamaları kolaylaştırmaktadır. Burada dikkat edilmesi gereken, rem’in nispeten yeni bir birim olduğu ve kullanıldığı yere göre hangi tarayıcılar tarafından desteklendiğinin önemli olduğudur. Tarayıcı destekleme tablolarına caniuse.com‘dan ulaşabilirsiniz (rem birimini IE8 dışında tüm tarayıcılar destekliyor. O da zaten tarihe gömüldü).