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?
24px
line-height
için piksel değerleri kullanılmadığı açıkça belirtiliyor.2rem
1.5
2vw
line-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.