Metniniz için herhangi bir stil belirtmezseniz tarayıcılar kendi varsayılan stillerini uygular. Bunlara Kullanıcı Aracısı stil sayfaları denir ve tarayıcıdan tarayıcıya değişiklik gösterebilir. Kullanıcılar metin görüntülemek için kendi tercihlerini de ayarlayabilir.
Satır uzunluğu belirtmezseniz tarayıcılar, ekranın kenarındaki metin satırlarını kaydırır. Böylece web'deki metinler varsayılan olarak duyarlıdır ve kullanıcının görüntü alanına sığacak şekilde akar.
Ancak metnin ekrana sığması, kolayca okunabileceği anlamına gelmez. İyi bir yazı biçimi, metninizi uygun şekilde sunmak demektir. Tipografi, kullanılacak uygun yazı tiplerini seçmekten daha fazlasını içerir. Kullanıcının tercihlerini, metnin boyutunu, satır uzunluğunu ve metin satırları arasındaki mesafeyi göz önünde bulundurmanız gerekir.
Metin boyutu
Web'deki metnin hangi boyutta olması gerektiğini bilmek zordur.
Birisi küçük bir ekran kullanıyorsa, ekran kullanıcının bir el kadar uzakta, gözlerine oldukça yakın olması güvenli bir seçim olabilir.
Ancak ekranlar büyüdükçe bu bağlantıyı kurmak zorlaşır. Dizüstü bilgisayar boyutundaki ekran muhtemelen izleyiciye oldukça yakındır, ancak geniş ekran masaüstü monitörü televizyon ekranıyla yaklaşık olarak aynı boyuttadır. İnsanlar masaüstü bilgisayarlarından bir kol boyu uzakta otururlar, ancak televizyondan çok daha uzakta otururlar.
Yine de bir kişinin ekrandan ne kadar uzakta olduğunu kesin olarak bilemeseniz de, uygun olacağını umduğumuz metin boyutlarını kullanmayı deneyebilirsiniz. Küçük ekranlar için daha küçük metin boyutlarını, büyük ekranlar için ise büyük metin boyutlarını kullanın.
Ekran boyutu genişledikçe font-size özelliğini değiştirmek için medya sorgularını kullanabilirsiniz.
@media (min-width: 30em) {
html {
font-size: 125%;
}
}
@media (min-width: 40em) {
html {
font-size: 150%;
}
}
@media (min-width: 50em) {
html {
font-size: 175%;
}
}
@media (min-width: 60em) {
html {
font-size: 200%;
}
}
Metin ölçeklendiriliyor
Belirli ayrılma noktalarındaki sabit metin boyutları arasında geçiş yapmak çok hızlıdır. Kullanıcının cihaz genişliğinin metin boyutunu etkilemesine izin vermek daha duyarlı bir yaklaşımdır.
CSS'deki vw birimi "görüntü alanı genişliği" anlamına gelir. Yazı tipi boyutlarını görüntü alanının genişliğine bağlamak, metnin tarayıcı genişliğiyle orantılı olarak büyüyüp küçüleceği anlamına gelir. Bu durum, belirli bir genişlikte metin boyutunun ne olacağını tahmin etmeyi zorlaştırır ancak metin boyutunun kullanıcının tarayıcı genişliği için uygun olacağını biliyorsunuz.
Yazı tipi boyutu bildiriminde vw öğesini tek başına kullanmamanız önemlidir.
html {
font-size: 2.5vw;
}
Bunu yaparsanız kullanıcı metni yeniden boyutlandıramaz. Metin, em, rem veya ch gibi göreli bir birim olarak karıştırılırsa yeniden boyutlandırılabilir. CSS calc() işlevi bunun için idealdir.
html {
font-size: calc(0.75rem + 1.5vw);
}
İşi tarayıcı yapsın. Bu durum, belirli bir genişlikte metin boyutunun tam olarak ne olacağını tahmin etmeyi zorlaştırır ancak metin boyutunun doğru aralıkta olacağını biliyorsunuz. Kullanıcının tarayıcısı tam metin boyutu hesaplamalarını çözmekle ilgilenir.
Ancak artık metnin dar ekranlarda çok küçük, geniş ekranlarda ise çok büyük olma olasılığı vardır.
Metni sıkıştırın
Muhtemelen metninizin küçülmesini ve uç noktalara kadar büyümesini istemezsiniz. CSS clamp() işlevini kullanarak ölçeklendirmenin nerede başlayıp nerede biteceğini kontrol edebilirsiniz. Bu işlem, ölçeklendirmeyi belirli bir aralığa "sabitler".
clamp() işlevi, calc() işlevine benzer ancak üç değer alır. Orta değer, calc() öğesine ilettiğiniz ile aynı. Açılış değeri, kullanıcının tercih ettiği yazı tipi boyutunun altına düşmemek için minimum boyutu (bu örnekte 1rem) belirtir. Kapanış değeri maksimum boyutu belirtir.
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
Metin boyutu şu anda kullanıcının ekranıyla orantılı olarak küçülür ve büyür, ancak metin boyutu hiçbir zaman 1rem değerinin altına veya 2rem değerinin üzerine çıkmaz.
Satır uzunluğu
Web basılı bir yer değildir, ama matbu dünyadan dersler çıkarıp bunları web'e uygulayabiliriz.
Robert Bringhurst, The Elements of Typography Style adlı klasik kitabında satır uzunluğu (veya ölçüsü) hakkında şunları söylüyordu:
45 ila 75 karakter arasındaki herhangi bir değer, metin boyutunda tırnak dizili metinle ayarlanmış tek sütunlu bir sayfa için uygun bir satır uzunluğu olarak kabul edilir. 66 karakterli satır (hem harfleri hem de boşlukları içeren) yaygın olarak ideal kabul edilir. Çok sütunlu çalışmalar için daha iyi bir ortalama 40 ila 50 karakterdir.
Satır uzunluğunu doğrudan CSS'de ayarlayamazsınız. line-length özelliği bulunmuyor. Ancak, kapsayıcının ne kadar geniş olacağını sınırlandırarak metnin çok fazla genişlemesini engelleyebilirsiniz. max-inline-size özelliği bunun için idealdir.
Hat uzunluklarınızı px gibi sabit bir birimle ayarlamayın. Kullanıcılar, yazı tipi boyutlarını yukarı ve aşağı ölçeklendirebilir. Satır uzunlukları buna göre ayarlanmalıdır. rem veya ch gibi göreceli bir birim kullanın.
article {
max-inline-size: 700px;
}
article {
max-inline-size: 66ch;
}
Genişlik için ch birim kullanmak, yeni satırların bu yazı tipi boyutunda 66. karakterde kaydırılmasına neden olur.
Satır yüksekliği
CSS'de line-length özelliği olmasa da line-height özelliği vardır.
Kısa metin satırlarında daha büyük line-height değerleri olabilir. Ancak uzun metin satırları için büyük line-height değerleri kullanırsanız okuyucunun gözü bir satırın sonundan sonraki satırın başlangıcına gitmekte zorlanır.
article {
max-inline-size: 66ch;
line-height: 1.65;
}
blockquote {
max-inline-size: 45ch;
line-height: 2;
}
line-height beyanlarınız için birimsiz değerler kullanın. Bu şekilde, satır yüksekliği font-size ile göreceli olur.
line-height: 24px;
line-height: 1.5;
Kombinasyonlar ve ölçek
Daha net olması ve sayfa akışı sağlamak için kullanıcı arayüzlerinizi oluştururken hiyerarşiye öncelik vermeyi unutmayın. Bunu yapmanın en iyi yollarından biri tasarım sisteminizde yerleşik olarak bulunan bir tipografi ölçeğidir.
Web yazı tipleri
Yazı tipi, kelimelerinizin sesi gibidir. Web'de uzun zamandır çok az yazı tipi seçeneği vardı. Yalnızca sistem yazı tipleri kullanılıyordu. Ancak artık içeriğinizin tarzına uygun bir web yazı tipi seçebilirsiniz.
Tarayıcılara web yazı tipi dosyalarınızı nerede bulacağını bildirmek için @font-face kullanın. Web yazı tipi biçiminiz olarak woff2'yi kullanın. İyi desteklenir ve en iyi performans kazancına sahiptir.
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
Ancak eklediğiniz her web yazı tipi dosyası, sayfa yüklenme süresini artırdığı için kullanıcı deneyimini olumsuz yönde etkileyebilir. Tasarım sadece nihai piksellerin görünüşüyle ilgili değildir. Bu piksellerin ne kadar hızlı boyandığı, kullanıcı deneyiminin önemli bir parçasıdır. Hızlı hissettiren bir deneyim iyi bir kullanıcı deneyimi demektir.
Yazı tipi yükleniyor
Tarayıcıların en kısa sürede yazı tipi dosyasını indirmeye başlamalarını isteyebilirsiniz. Dokümanınızın head bölümüne, web yazı tipi dosyanıza başvuran bir link öğesi ekleyin. preload değerine sahip bir rel özelliği, tarayıcıya bu dosyaya öncelik vermesini bildirir. font değerine sahip as özelliği, tarayıcıya bunun ne tür bir dosya olduğunu bildirir. type özelliği daha da spesifik olmanıza olanak tanır.
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
Yazı tipi dosyalarını kendiniz barındırıyor olsanız bile crossorigin özelliğini eklemeniz gerekir.
Tarayıcıya, bir sistem yazı tipinden web yazı tipine geçişi nasıl yöneteceğini bildirmek için CSS font-display özelliğini kullanın. Web yazı tipi yüklenene kadar hiç metin göstermemeyi seçebilirsiniz. Sistem yazı tipini hemen görüntülemeyi seçebilir ve yüklendikten sonra web yazı tipine geçebilirsiniz. Her iki stratejinin de dezavantajları vardır. Herhangi bir metni göstermeden önce web yazı tipinin indirilmesini beklerseniz kullanıcılar kendilerini rahatsız edici bir şekilde uzun süre boş bir sayfaya bakarken bulabilir. Metni önce bir sistem yazı tipinde gösterir ve sonra web yazı tipine geçerseniz kullanıcılar sayfadaki içeriğin sarsıcı bir şekilde kaymasına neden olabilir.
Herhangi bir metni görüntülemeden önce kısa bir süre beklemek iyi bir çözümdür. Web yazı tipi bu süre dolmadan yüklenirse metin, içerik kayması olmadan web yazı tipi kullanılarak gösterilir. Süre dolduktan sonra web yazı tipi hâlâ yüklenmediyse metin, en azından kullanıcının içeriği okuyabilmesi için sistem yazı tipi kullanılarak görüntülenir.
Web yazı tipinin nihai olarak yüklendiğinde sistem yazı tipinin yerini almasını istiyorsanız swap için font-display değerini kullanın.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
Metin oluşturulduktan sonra sistem yazı tipinde kalmak istiyorsanız fallback şeklinde font-display değerini kullanın.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
Değişken yazı tipleri
Aynı yazı tipi için çok sayıda farklı ağırlık veya stil kullanıyorsanız, çok sayıda ayrı yazı tipi dosyası (her ağırlık veya stil için ayrı bir yazı tipi dosyası) kullanmanız gerekebilir.
Değişken yazı tipleri bu sorunu tek bir dosya kullanarak çözer. Normal, kalın, ekstra kalın vb. için ayrı dosyalar bulundurmak yerine bir değişken yazı tipi dosyası duyarlıdır. Çeşitli ağırlıklar veya stiller arasından görüntülenmesi gereken tüm bilgileri içerir.
Bu, tek bir değişken yazı tipi dosyasının tek bir normal yazı tipi dosyasından daha büyük olduğu, ancak tek bir değişken yazı tipi dosyasının muhtemelen birden fazla normal yazı tipi dosyasından daha küçük olacağı anlamına gelir. Çok sayıda farklı ağırlık kullanıyorsanız, değişken bir yazı tipi size büyük bir performans kazancı sağlayabilir.
Web'de iyi bir yazı tipi kullanmak, yalnızca tasarımcı olarak yaptığınız tür seçimleriyle sınırlı değildir. Duyarlı tipografi, kullanıcının cihazına ve ağ bağlantısına saygı duymak anlamına gelir. Sonuçta, nasıl görüntülendiğinden bağımsız olarak göze hitap eden bir tasarım elde edersiniz.
Artık duyarlı metin konusunda ustalaştığınıza göre duyarlı resimleri incelemeye geçebiliriz.
Öğrendiklerinizi sınayın
Yazı biçimi hakkındaki bilginizi test edin
Metnin görüntü alanı içinde kaydırılabilmesi için stiller eklenmelidir.
clamp(), akışkan yazı biçimi için kullanışlıdır. Çünkü
calc() işlevlerinin kolayca yerleştirilmesine olanak tanırclamp() kullanmak iyi bir neden değildir.clamp() kullanmak iyi bir neden değildir.Bu kılavuzda hangi line-height değeri türü önerildi?
24pxline-height için piksel değerleri kullanılmadığı açıkça belirtiliyor.2rem1.52vwline-height görünümündeki görünüm birimleri soruna neden olur.font-display ne işe yarıyor?
block veya inline-block olarak ayarlanmasına olanak tanır.