Okunabilir Metin Tasarımı: Satır Uzunluğu, Yazı Boyutu ve Satır Aralığı Nasıl Olmalı?

Biz Talha Aslan ve ekibi olarak web projelerinde metni çoğu zaman tasarımın en son düşünülen parçası olarak görüyoruz. Oysa ziyaretçi sayfaya görsel için değil, çoğunlukla bir bilgi için gelir. Bu nedenle yazının nasıl durduğu, mesajın ulaşıp ulaşmadığını doğrudan etkiler.

Bu rehberde dört temel ayarı tek tek ele alıyoruz. Ayrıca her ayar için resmi kaynaklara dayanan başlangıç değerlerini, ölçme yollarını ve sık yapılan hataları anlatıyoruz. Yazı tipi seçimi ayrı bir konu; onun için web tipografisi seçim rehberimize bakabilirsiniz. Burada odağımız, seçtiğiniz yazı tipinin sayfada nasıl ölçülendirileceği.

Okunabilir metin tasarımında hangi dört ayar belirleyicidir?

Pratikte dört ayar metnin rahat okunup okunmadığını belirler. Bunlar birbirine bağlıdır; birini değiştirdiğinizde diğerlerini de gözden geçirmeniz gerekir. Örneğin yazı boyutunu büyüttüğünüzde aynı kutuya sığan karakter sayısı azalır, dolayısıyla satır uzunluğu da değişir.

• Satır uzunluğu: Bir satıra sığan karakter sayısı. Çok uzun satırda göz bir sonraki satırın başını kaybeder.
• Temel yazı boyutu: Gövde metninin piksel ya da rem cinsinden boyutu. Küçük yazı özellikle mobilde okuru yakınlaştırmaya zorlar.
• Satır aralığı: Satırlar arasındaki dikey boşluk. Sıkışık satırlar metni gri bir bloğa çevirir.
• Kontrast: Yazı rengi ile arka plan rengi arasındaki parlaklık farkı. Açık gri yazı şık görünse de çoğu ekranda gözü yorar.

Bunlara ek olarak paragraf aralığı, hizalama ve başlık hiyerarşisi de okumayı etkiler. Ancak bu üçü, temel dört ayar doğru kurulduğunda çok daha kolay yerine oturur. Bu yüzden önce dördünü sabitlemenizi, sonra ince ayara geçmenizi öneriyoruz.

İdeal satır uzunluğu kaç karakter olmalı?

Resmi bir üst sınır olarak W3C'nin erişilebilirlik yönergesi WCAG, AAA düzeyindeki 1.4.8 Görsel Sunum ölçütünde satırın 80 karakteri geçmemesini ister. Çince, Japonca ve Korece gibi yazılarda bu sınır 40 karakterdir. Bu ölçüt AAA düzeyinde olduğu için her siteyi bağlamaz, ama sağlam bir tavan verir.

Tipografi pratiğinde sık dile getirilen aralık ise satır başına yaklaşık 45 ile 75 karakterdir. Bunu kesin bir kural olarak değil, saha tecrübesine dayalı başlangıç aralığı olarak görün. Türkçede kelimeler ekler yüzünden uzayabildiği için biz gövde metninde genellikle 60 ile 75 karakter arasını hedefliyoruz.

Satır çok kısa olduğunda da sorun çıkar. Göz sürekli satır başına dönmek zorunda kalır, metin kesik kesik akar. Üstelik uzun bir Türkçe kelime satıra sığmayınca boşluklar dengesizleşir. Yani hedef, en kısa satırı değil, gözün rahatça takip ettiği orta bir genişliği bulmaktır.

Basit bir kontrol yöntemi şudur: masaüstünde makalenizin ortalama bir satırını kopyalayın ve karakter sayısını sayın. Boşluklar dahil 90 ya da 100 karakteri buluyorsa metin kutunuz büyük olasılıkla fazla geniştir.

Satır uzunluğunu CSS ile nasıl sınırlarsınız?

En pratik yöntem, metin kutusuna karakter temelli bir azami genişlik vermektir. CSS'teki ch birimi, kullandığınız yazı tipindeki sıfır karakterinin genişliğine eşittir. Dolayısıyla gövde metnine yaklaşık 65 ile 70 ch arası bir azami genişlik verdiğinizde, satır uzunluğu yazı tipinden bağımsız olarak makul bir aralıkta kalır.

Bu yöntemin güzel yanı, yazı boyutunu değiştirdiğinizde kutunun da onunla birlikte büyümesidir. Piksel cinsinden sabit bir genişlik verirseniz, yazıyı büyüttüğünüzde satır başına düşen karakter sayısı azalır. Ch birimi ise oranı sabit tutar.

Uygulamada dikkat etmeniz gereken birkaç nokta var:

• Azami genişliği yalnız gövde metnine verin; tablo, görsel ve kod alanları daha geniş olabilir.
• Metin kutusunu sayfada ortalayın ya da sol kenara hizalayın, ama iki yanda dengesiz boşluk bırakmayın.
• Kenar çubuğu olan şablonlarda ana sütunun genişliğini de hesaba katın.
• Geniş ekranlarda tam genişlikte paragraf kullanmayın; boş alanı görsel ya da özet kutusuyla dengeleyin.

Hazır bir tema kullanıyorsanız, içerik genişliği ayarı çoğu zaman tema seçeneklerinde ya da blok düzenleyicinin genel ayarlarında yer alır. Ayar adı temadan temaya değiştiği için panelde ilgili bölümü aramanız gerekir.

Temel yazı boyutu kaç piksel olmalı?

Yaygın tarayıcılar varsayılan gövde yazı boyutunu 16 piksel olarak sunar. Biz gövde metni için bu değeri alt sınır kabul ediyoruz. Uzun makale ve rehber sayfalarında ise 17 ile 18 piksel arası çoğu zaman daha rahat bir okuma sağlar. Bu da bir başlangıç aralığıdır; seçtiğiniz yazı tipinin x yüksekliği sonucu değiştirir.

X yüksekliği, küçük harflerin büyük harflere göre ne kadar yüksek durduğunu anlatır. Bazı yazı tipleri 16 pikselde bile iri durur, bazıları aynı boyutta ufak kalır. Bu nedenle sayıya değil, gerçek ekrandaki görüntüye göre karar vermenizi öneriyoruz.

Küçük yazının en sık görüldüğü yerler şunlardır: ürün açıklamaları, form etiketleri, alt bilgi, fiyat notları ve çerez bildirimleri. Bu alanlar ikincil gibi görünse de okurun karar anında baktığı yerlerdir. Örneğin bir teslimat koşulu 12 piksel açık gri yazıyla dururken okur onu fark etmeyebilir, sonra da şaşırabilir.

Başlıklar için tek bir doğru yok. Ancak H1, H2 ve H3 arasında gözle seçilebilir bir boyut farkı olmalı. Başlık ile gövde metni neredeyse aynı boydaysa sayfa düz bir yazı yığınına döner ve tarama okuması zorlaşır.

Piksel mi rem mi: yazı boyutunu hangi birimle vermelisiniz?

Gövde metninde rem birimini tercih etmenizi öneriyoruz. Rem, değerini kök öğenin yazı boyutundan alır. Kullanıcı tarayıcı ayarlarından varsayılan yazı boyutunu büyüttüğünde rem ile verdiğiniz değerler de bu tercihe uyar. Sabit pikselle verdiğiniz değerler ise bazı tarayıcılarda bu tercihi görmezden gelir.

Bu fark, görme güçlüğü yaşayan ya da yaşı ilerlemiş okurlar için önemlidir. Çünkü bu okurların bir kısmı her siteyi tek tek yakınlaştırmak yerine tarayıcının genel yazı boyutunu büyütür. Kök boyutu sabit piksele kilitleyen bir tema, bu ayarı etkisiz hale getirir.

Akışkan yazı boyutu da işe yarar bir tekniktir. CSS'teki clamp işlevi, yazı boyutunun ekran genişliğine göre bir alt ve üst sınır arasında büyümesine izin verir. Böylece mobilde 16 piksele yakın, geniş ekranda 18 piksele yakın bir gövde metni elde edersiniz. Yine de alt sınırı rem ile tanımlayın; aksi halde yakınlaştırma davranışı beklenmedik sonuç verebilir.

Kısacası birim seçimi görünmeyen ama etkisi büyük bir karardır. Tasarım dosyasında piksel görmeniz normaldir; geliştirme aşamasında bunları rem karşılığına çevirmek ekibin işidir.

Satır aralığı ne kadar olmalı?

Gövde metninde satır aralığını yazı boyutunun en az 1,5 katı olarak başlatmanızı öneriyoruz. MDN'nin line-height belgesi de ana paragraf metni için en az 1,5 değerini önerir ve bunun az gören okurlarla disleksi yaşayan okurlara yardımcı olduğunu belirtir.

Aynı belge, satır aralığını birimsiz bir sayı olarak vermenin çoğu durumda tercih edilen yol olduğunu da açıklar. Tarayıcı birimsiz değeri her öğenin kendi yazı boyutuyla çarpar. Piksel ya da em ile yazdığınız değeri ise tarayıcı bir kez hesaplar ve alt öğelere sabit uzunluk olarak geçer. Bu da büyük başlıklarda satırların üst üste binmesine yol açabilir.

WCAG 2.2'deki AA düzeyindeki 1.4.12 Metin Aralığı ölçütü ise farklı bir şey ister. Ölçüt, kullanıcı satır aralığını yazı boyutunun 1,5 katına çıkardığında içeriğin ve işlevin kaybolmamasını şart koşar. Yani sizi bu değeri kullanmaya zorlamaz, ama sitenizin bu değere dayanmasını bekler.

Başlıklarda satır aralığını daha dar tutabilirsiniz, çünkü başlıklar kısa ve iridir. Uzun satırlarda ise satır aralığını biraz artırmak gözün bir sonraki satırı bulmasını kolaylaştırır.

Paragraf, harf ve kelime aralığı neden ayrıca önemlidir?

WCAG 1.4.12 yalnız satır aralığını değil, dört değeri birlikte sınar. Kullanıcı bu değerleri kendi stil eklentisiyle uyguladığında metin kesik kalmamalı, üst üste binmemeli ve düğmeler çalışmaya devam etmelidir.

• Satır aralığı: yazı boyutunun en az 1,5 katı.
• Paragraf sonrası boşluk: yazı boyutunun en az 2 katı.
• Harf aralığı: yazı boyutunun en az 0,12 katı.
• Kelime aralığı: yazı boyutunun en az 0,16 katı.

Bu testte en sık bozulan yerler sabit yükseklikli kutulardır. Örneğin yüksekliği piksel olarak sabit bir kart, aralıklar açıldığında taşan metni gizler. Menü öğeleri, sekme başlıkları ve fiyat kartları da aynı riski taşır. Bu yüzden metin içeren kutulara sabit yükseklik vermek yerine içeriğe göre büyümelerine izin verin.

Paragraflar arasında belirgin bir boşluk bırakmak da tarama okumasını kolaylaştırır. Paragraf boşluğu satır aralığından açıkça büyük olmalı; aksi halde okur nerede yeni bir düşüncenin başladığını göremez. AAA düzeyindeki 1.4.8 ölçütü de paragraf aralığının satır aralığının en az 1,5 katı olmasını ister.

Metin kontrastı hangi oranı sağlamalı?

WCAG 2.2'nin AA düzeyindeki 1.4.3 Asgari Kontrast ölçütü, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister. Ölçüte göre büyük metin, 18 punto ve üzeri ya da 14 punto ve üzeri kalın yazıdır. Ölçüt, bunları CSS'te yaklaşık 24 piksel ve 18,5 piksel olarak açıklar.

Oranlar kesin eşiktir; yuvarlamaya yer yok. Örneğin 4,49:1 sonuç veren bir renk çifti 4,5:1 şartını karşılamaz. Bu nedenle tasarımcının gözüyle "yeterince koyu" görünen bir gri, ölçümde kalabilir.

Biz renk çiftlerini tasarım aşamasında renk kontrast kontrolü aracımızla tek tek ölçüyoruz. Özellikle şu alanları atlamamanızı öneriyoruz: görsel üstündeki yazılar, açık zemin üstündeki marka rengi bağlantılar, devre dışı görünen ama okunması gereken metinler ve form yer tutucuları.

Kontrastın tasarım dilindeki yeri için tasarımda kontrast rehberimiz daha geniş bir çerçeve sunuyor. Burada konumuz yalnız metnin okunurluğu.

Dört ayarın başlangıç değerleri neler?

Aşağıdaki tablo, gövde metni için kullandığımız başlangıç değerlerini ve dayanaklarını bir arada gösteriyor. Resmi ölçütlerden gelen değerleri kaynağıyla, saha tecrübesine dayanan değerleri ise "başlangıç aralığı" notuyla yazdık.

Tabloyu bir kural kitabı gibi değil, ilk taslak için güvenli bir zemin olarak kullanın. Sonra gerçek içerik ve gerçek cihazlarla ince ayar yapın.

Mobilde okunabilir metin tasarımı nasıl değişir?

Mobilde okunabilir metin tasarımı, masaüstündeki kuralların küçük bir kopyası değildir. Telefon ekranında satır zaten kısadır, dolayısıyla satır uzunluğu sorunu çoğu zaman tersine döner: satır fazla kısalır ve her satırda iki üç kelime kalır. Bu durumda yan boşlukları küçültmek, yazıyı küçültmekten daha iyi bir çözümdür.

Mobilde gövde yazısını 16 pikselin altına indirmemenizi öneriyoruz. Ayrıca bazı mobil tarayıcılar, küçük yazılı bir form alanına dokunulduğunda sayfayı otomatik yakınlaştırabilir. Form alanlarında da 16 piksel civarında kalmak bu sıçramayı çoğu zaman önler.

Mobil ekranda şu noktaları ayrıca kontrol edin:

• Paragraflar dört beş satırı geçmesin; telefonda kısa paragrafı göz daha rahat tarar.
• Tablolar yatay kaydırılabilir olsun ya da kart görünümüne dönüşsün.
• Sabit üst menü ve alt çubuk, metin alanının yarısını kaplamasın.
• Dışarıda, güneş altında açılan sayfalarda kontrastı asgari değerin üzerinde tutun.

Sayfanızın telefonda nasıl durduğunu hızlıca görmek için mobil uyumluluk testi aracımızı kullanabilirsiniz. Tasarım yaklaşımının tamamı için mobil öncelikli tasarım nedir yazımıza göz atın.

Yakınlaştırma ve yüzde 200 büyütme testini nasıl yaparsınız?

WCAG 2.2'nin AA düzeyindeki 1.4.4 Metni Yeniden Boyutlandırma ölçütü, metnin yardımcı teknoloji olmadan yüzde 200'e kadar büyütülebilmesini ve bu sırada içerik ya da işlev kaybı yaşanmamasını ister. Bu test, yazı boyutu ve birim seçiminizin gerçekten sağlam olup olmadığını gösterir.

Testi şu sırayla yapmanızı öneriyoruz:

1. Sayfayı masaüstü tarayıcıda normal boyutta açın ve ana öğeleri not edin.
2. Tarayıcı yakınlaştırmasını yüzde 200'e getirin.
3. Menünün açıldığını, metnin kesilmediğini ve düğmelerin tıklanabildiğini kontrol edin.
4. Sonra yalnız yazı boyutunu büyüten tarayıcı ayarını deneyin ve aynı kontrolü tekrarlayın.
5. Formları doldurun; etiketlerin alanların üstüne binip binmediğine bakın.
6. Bulduğunuz her sorunu sayfa adı ve ekran görüntüsüyle bir listeye yazın.

Bu testte en sık çıkan sorun, sabit yükseklikli başlık alanları ve görsel üstüne oturan metinlerdir. Ayrıca yatay kaydırma gerektiren geniş içerik kutuları da büyütmede okumayı zorlaştırır. Böylece birkaç dakikalık bir testle, ileride şikâyet olarak dönecek birçok sorunu erkenden yakalarsınız.

İki yana yaslı metin neden okumayı zorlaştırır?

İki yana yaslı metin, satırları iki kenara oturtmak için kelime aralarını esnetir. Basılı yayında heceleme ve ince ayar araçları bu boşlukları dengeler. Web sayfasında ise bu araçlar sınırlıdır; sonuçta satırlar arasında dengesiz boşluklar ve göz yoran "nehirler" oluşur.

WCAG'nin AAA düzeyindeki 1.4.8 ölçütü de metnin hem sol hem sağ kenara yaslanmamasını ister. Türkçede uzun ve ekli kelimeler bu sorunu büyütür, çünkü uzun bir kelime satıra sığmadığında önceki satırın boşlukları birden büyür. Bu yüzden gövde metninde sola hizalamayı varsayılan kabul ediyoruz.

Ortaya hizalı metin de benzer bir sorun taşır. Kısa bir slogan ya da iki satırlık bir başlık ortalanabilir. Ancak üç satırı geçen ortaya hizalı paragrafta her satır farklı bir noktadan başlar ve göz her seferinde başlangıcı aramak zorunda kalır. Kısacası ortalamayı vurgu için saklayın, gövde metninde kullanmayın.

Sağdan sola yazılan diller için kural tersine döner; doğal okuma yönüne hizalarsınız. Çok dilli sitelerde bu ayarı dile göre otomatik değiştirmek gerekir.

Yazı tipi seçimi okunabilirliği ne kadar etkiler?

Yazı tipi, dört ayarın üzerine oturduğu zemindir. Aynı boyut ve aynı satır aralığı, farklı yazı tiplerinde çok farklı bir yoğunluk yaratır. Örneğin dar harfli bir yazı tipi aynı genişliğe daha çok karakter sığdırır; bu durumda satır uzunluğu sınırına daha erken ulaşırsınız.

Gövde metni için seçtiğiniz yazı tipinde şu özelliklere bakmanızı öneriyoruz:

• Türkçe karakterlerin tamamı yazı tipinde bulunsun; ğ, ş, ı ve İ ayrı bir yazı tipinden gelmesin.
• Küçük harf l, büyük harf I ve rakam 1 birbirinden ayırt edilebilsin.
• Normal ve kalın ağırlıklar arasında belirgin bir fark olsun.
• Gövde metninde ince ağırlıklardan kaçının; açık renkle birleşince okunurluk düşer.

Yazı tipi eşleştirmesinin ayrıntısını tipografi seçimi ve font eşleştirme rehberimizde anlattık. Yazı tipinin hız tarafı da önemlidir; yükleme sırasında metnin geç görünmesi ya da yer değiştirmesi okuru rahatsız eder. Bunun için web fontları siteyi yavaşlatır mı yazımıza bakabilirsiniz.

Başlık hiyerarşisi tarama okumasını nasıl kolaylaştırır?

Web okuru metni çoğu zaman satır satır okumaz, önce tarar. Başlıklar, kalın ifadeler ve listeler bu taramanın durak noktalarıdır. Dolayısıyla okunabilir bir sayfa yalnız iyi ayarlı paragraflardan değil, net bir başlık yapısından da oluşur.

Başlık hiyerarşisinde üç kurala dikkat ediyoruz. İlk olarak her başlık altındaki metnin başlığın vaat ettiği soruyu cevaplaması gerekir. İkinci olarak başlık seviyelerini atlamayın; H2'den doğrudan H4'e geçmek hem ekran okuyucu kullanıcılarını hem de taramayı şaşırtır. Son olarak başlık ile gövde metni arasında boyut ve ağırlık farkı açık olmalı.

Başlığın üstündeki boşluk altındaki boşluktan büyük olmalı. Böylece başlık, ait olduğu metne görsel olarak yapışır ve önceki bölümden uzaklaşır. Bu küçük ayar çoğu zaman gözden kaçar, ama sayfanın düzenli görünmesinde büyük rol oynar.

Okurun sayfada gözünü nasıl gezdirdiğini merak ediyorsanız F okuma modeli yazımız bu davranışı ayrıntısıyla anlatıyor.

Okunabilirlik SEO ile nasıl bir ilişki içindedir?

Google, satır uzunluğu ya da satır aralığı için bir sıralama değeri yayımlamaz. Bu nedenle "satır aralığını 1,6 yaparsanız sıralamanız yükselir" gibi bir iddia doğru olmaz. Ancak Google Search Central, insanlara hitap eden, faydalı ve güvenilir içeriği ödüllendirmeyi hedeflediğini açıkça anlatır.

Okunabilir metin, bu hedefin uygulamadaki karşılığıdır. Okur metni rahat okuduğunda sayfada aradığını bulur, ilgili bağlantılara geçer ve markanızı hatırlar. Okunamayan metin ise içerik ne kadar iyi olursa olsun değerini gösteremez. Yani okunabilirlik doğrudan bir sinyal değil, iyi içeriğin kendini gösterebilmesi için bir ön şarttır.

Ayrıca mobil uyumluluk tarafında küçük yazı, okuru yakınlaştırmaya zorlar ve sayfa deneyimini zayıflatır. Bu konuyu SEO açısından ele almak isterseniz, metninizin dil tarafını da ölçmek işe yarar. Bunun için okunabilirlik analizi aracımız cümle uzunluğu ve paragraf yapısı gibi göstergeleri gösteriyor.

Kısacası tasarım tarafındaki okunabilirlik ile yazım tarafındaki okunabilirlik birbirini tamamlar. Biri olmadan diğeri yarım kalır.

Hangi hatalar metni okunamaz hale getirir?

Web tasarım projelerinde en sık karşılaştığımız okunabilirlik hataları aşağıdaki gibidir. Çoğu, tasarımın ekran görüntüsünde güzel görünmesi için verilen kararlardır.

• Açık gri zemin üstünde orta gri gövde metni.
• Geniş ekranda tüm sayfa genişliğine yayılan paragraflar.
• Gövde metninde ince ağırlıklı yazı tipi.
• Görsel üstünde duran, arkasında koyu katman olmayan beyaz yazı.
• Sabit yükseklikli kartlarda taşan ve kesilen metin.
• Mobilde 13 ya da 14 piksele düşen gövde yazısı.
• Tamamı büyük harf olan uzun başlıklar ve paragraflar.
• Bağlantıların yalnız renkle ayrıldığı, altı çizili olmayan gövde metni.

Bu hataların ortak noktası, tek tek bakıldığında küçük görünmeleridir. Ancak bir sayfada üç dördü bir araya geldiğinde okur metni okumak yerine sayfayı terk eder. Bu yüzden yayın öncesi kontrolü tek bir maddeye değil, listenin tamamına göre yapmanızı öneriyoruz.

Erişilebilirliğin genel çerçevesini görmek isterseniz web erişilebilirliği ve WCAG standartları yazımız bu ölçütlerin tamamını özetliyor.

Örnek senaryo: kalabalık bir hizmet sayfası nasıl düzelir?

Bu bölümdeki örnek bir senaryodur, gerçek bir müşteri vakası değildir. Bir hizmet firmasının sayfasını düşünün: gövde metni 14 piksel, açık gri, satırlar masaüstünde 110 karaktere uzanıyor ve satır aralığı 1,2. Metin içerik olarak iyi, ama okur ilk ekranda bir duvarla karşılaşıyor.

Düzeltmeyi şu sırayla yaparız:

1. Gövde yazısını rem cinsinden 17 piksel karşılığına çıkarırız.
2. Metin kutusuna 68 ch civarında bir azami genişlik veririz.
3. Satır aralığını birimsiz 1,6 yaparız ve paragraf boşluğunu artırırız.
4. Yazı rengini koyulaştırıp kontrastı 4,5:1'in rahatça üzerine taşırız.
5. Uzun paragrafları bölüp ara başlık ve liste ekleriz.
6. Aralık testi ve yüzde 200 büyütme testiyle sonucu doğrularız.

Bu senaryoda içeriğin tek kelimesi değişmeden sayfa çok daha davetkâr hale gelir. Elbette sonuç sayfadan sayfaya farklıdır; burada bir başarı oranı vaat etmiyoruz. Yine de deneyimimiz, metin ayarlarının çoğu zaman en düşük maliyetli tasarım iyileştirmesi olduğunu gösteriyor.

Okunabilir metin tasarımı kontrol listesi nedir?

Yayına almadan önce her şablon için aşağıdaki listeyi tek tek geçmenizi öneriyoruz. Listeyi bir kez ana şablonlarda uygularsanız, yeni sayfalar da aynı ayarları otomatik olarak devralır.

1. Gövde metni en az 16 piksel karşılığında ve rem ile tanımlı.
2. Masaüstünde satır uzunluğu yaklaşık 60 ile 75 karakter, en fazla 80.
3. Satır aralığı birimsiz ve 1,5 ya da üzeri.
4. Paragraf aralığı satır aralığından belirgin şekilde büyük.
5. Normal metinde kontrast 4,5:1, büyük metinde 3:1 veya üzeri.
6. Gövde metni sola hizalı, iki yana yaslı değil.
7. Başlık seviyeleri atlanmıyor ve boyut farkı açık.
8. Bağlantıları renk dışında alt çizgi de belli ediyor.
9. WCAG 1.4.12 aralık testi sonrası taşma ya da kesilme yok.
10. Yüzde 200 büyütmede menü, form ve düğmeler çalışıyor.
11. Mobilde paragraflar kısa, tablolar kaydırılabilir.
12. Form alanları ve etiketleri mobilde net duruyor.

Listeyi ekip içinde paylaşılan bir belge olarak tutun ve her yeni şablonda güncelleyin. Böylece okunabilirlik bir defalık bir düzeltme değil, sitenin kalıcı bir standardı olur.

Bu ayarları sitenizde kim kurmalı?

Metin ayarları tasarım dosyasında başlar ama asıl olarak temanın kodunda yaşar. Bu yüzden en sağlıklı yol, tasarımcı ile geliştiricinin aynı değerler üzerinde anlaşmasıdır. Değerler bir kez tema düzeyinde tanımlandığında her yeni sayfa ve yazı aynı okunurluğu taşır.

Hazır tema kullanıyorsanız birçok ayarı panelden değiştirebilirsiniz. Ancak sabit yükseklikli kutular, piksel kilitli kök boyutu ya da eklentilerden gelen stiller gibi sorunlar çoğu zaman kod müdahalesi gerektirir. Öte yandan sıfırdan bir tasarım yapıyorsanız, bu değerleri en baştan tasarım sistemine yazmak sonradan düzeltmekten çok daha kolaydır.

Biz web tasarım hizmetimizde tipografi ölçeğini, satır uzunluğunu, satır aralığını ve kontrast değerlerini projenin başında tasarım sistemine işliyoruz. Ardından WCAG aralık ve büyütme testlerini yayın öncesi kontrolün parçası olarak çalıştırıyoruz.

Sitenizin metinleri okunmuyor ve bunu kalıcı olarak çözmek istiyorsanız, mevcut sayfalarınızı paylaşın; size kapsamı ve süreyi içeren bir teklif hazırlayalım. Bunun için web tasarım sayfamızdan teklif isteyebilirsiniz.