Metniniz için herhangi bir stil belirtmezseniz tarayıcılar kendi varsayılan stillerini uygular. Bunlar Kullanıcı Aracısı stil sayfaları olarak adlandırılır ve tarayıcıdan tarayıcıya değişebilir. Kullanıcılar, metin görüntülemek için kendi tercihlerini de ayarlayabilir.
Satır uzunluğu belirtmezseniz tarayıcılar, metin satırlarını ekranın kenarından kaydırır. Dolayısıyla, web'deki metin varsayılan olarak duyarlıdır. Kullanıcının görüntü alanına sığacak şekilde akar.
Ancak metnin ekrana sığması, rahatça okuyabileceğiniz anlamına gelmez. İyi bir yazı biçimi, metninizi uygun şekilde sunmakla ilgilidir. Tipografide, kullanılacak uygun yazı tiplerini seçmekten çok daha fazlası bulunur. Kullanıcının tercihlerini, metnin boyutunu, satır uzunluğunu ve metin satırları arasındaki mesafeyi dikkate almanız gerekir.
Metin boyutu
Web'deki metnin hangi boyutta olması gerektiğini bilmek zordur.
Birisi küçük bir ekran kullanıyorsa, ekran, bir el kadar uzakta olacak şekilde, gözlerine epey yakın olacak şekilde ayarlamak güvenli olabilir.
Ancak ekranlar büyüdükçe bu bağlantıyı kurmak zorlaşır. Dizüstü bilgisayar boyutundaki bir ekran muhtemelen izleyiciye oldukça yakındır, ancak geniş ekran masaüstü monitörü televizyon ekranıyla hemen hemen aynı boyuttadır. İnsanlar masaüstü ekranından bir kol uzakta oturuyor ancak televizyondan çok daha uzakta oturuyor.
Bir kişinin ekrandan ne kadar uzakta olduğunu bilemeseniz de uygun sonuç veren metin boyutları kullanmayı deneyebilirsiniz. Küçük ekranlar için daha küçük metin boyutları, büyük ekranlar için daha büyük metin boyutları kullanın.
Ekran boyutu büyüdükç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çeklendirme
Belirli ayrılma noktalarında sabit metin boyutları arasında geçiş yapmak oldukça hızlıdır. Metin boyutunu kullanıcının cihaz genişliğinin 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ı
görüntü alanının genişliği, metnin tarayıcı genişliğiyle orantılı olarak büyüyüp küçüleceği anlamına gelir. Bu, 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ğine uygun olacağını bilirsiniz.
Yazı tipi boyutu beyanında vw
özelliğini tek başına kullanmamanız önemlidir.
html { font-size: 2.5vw; }
Bunu yaparsanız kullanıcı metni yeniden boyutlandıramaz. em
, rem
veya ch
gibi göreli bir birimde karışık olarak kullanırsanız metin yeniden boyutlandırılabilir. CSS calc()
işlevi bunun için idealdir.
html { font-size: calc(0.75rem + 1.5vw); }
İşi tarayıcıya bırakın. Bu, 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ı bilirsiniz. Kullanıcının tarayıcısı tam metin boyutu hesaplamalarını yapar.
Ancak artık metnin dar ekranlarda çok küçük, geniş ekranlarda çok büyük olma ihtimali vardır.
Metin sabitleme
Muhtemelen metninizin küçültülerek aşırı ekstrem hale gelmesini istemezsiniz. CSS clamp()
işlevini kullanarak ölçeklendirmenin nerede başlayıp biteceğini kontrol edebilirsiniz. Bu, ölçeklendirmeyi belirli bir aralıkla "kıslar".
clamp()
işlevi, calc()
işlevine benzer ancak üç değer alır. Orta değer, calc()
bölümüne ilettiğiniz değer ile aynı. Açılış değeri, kullanıcının tercih ettiği yazı tipi boyutunun altında kalmaması için minimum boyutu (bu örnekte 1rem) belirtir. Kapanış değeri maksimum boyutu belirtir.
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
Artık metin boyutu, kullanıcının ekranına uygun olarak küçülüp büyür ancak metin boyutu hiçbir zaman 1rem
değerinin altına veya 2rem
üstüne çıkmaz.
Satır uzunluğu
Web basılı değildir, ancak basılı dünyasından dersler çıkarıp bunları web'de uygulayabiliriz.
Robert Bringhurst, Yazı Tipi Stilin Öğeleri adlı klasik kitabında satır uzunluğu (veya ölçü) ile ilgili şunları söylüyordu:
45 ila 75 karakter uzunluğundaki herhangi bir şey, metin boyutundaki serifli metin yüzünde ayarlanmış tek sütunlu bir sayfa için tatmin edici bir satır uzunluğu olarak kabul edilir. 66 karakterlik satır (hem harfleri hem de boşlukları sayarak) genellikle ideal olarak kabul edilir. Birden çok sütun çalışması için daha iyi bir ortalama 40 ila 50 karakterdir.
Satır uzunluğunu doğrudan CSS'de ayarlayamazsınız. line-length
mülkü yok. Ancak, kapsayıcının ne kadar geniş olabileceğini sınırlandırarak metnin çok geniş olmasını engelleyebilirsiniz. max-inline-size
özelliği bunun için mükemmeldir.
Satır uzunluklarınızı px
gibi sabit bir birimle ayarlamayın. Kullanıcılar yazı tipi boyutlarını yukarı ve aşağı ölçeklendirebilir ve satır uzunluklarını buna göre ayarlayabilirsiniz. rem
veya ch
gibi göreli bir birim kullanın.
article { max-inline-size: 700px; }
article { max-inline-size: 66ch; }
Genişlik için ch
birimlerinin kullanılması, yeni satırların söz konusu yazı tipi boyutunda 66. karakterde kaydırılmasına neden olur.
Satır yüksekliği
CSS'de line-length
özelliği olmasa da bir line-height
mülkü vardır.
Daha kısa metin satırları daha büyük line-height
değerlerine sahip olabilir. Ancak, uzun metin satırları için büyük line-height
değerleri kullanırsanız okuyucu, bir satırın sonundan sonraki satırın başına geçemez.
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 değer, satır yüksekliğinin font-size
değerine göre olmasını sağlar.
line-height: 24px;
line-height: 1.5;
Kombinasyonlar ve ölçek
Daha iyi netlik ve sayfa akışı için kullanıcı arayüzlerinizi oluştururken hiyerarşiye öncelik vermeyi unutmayın. Bunu yapmanın harika bir yolu, tasarım sisteminizde yerleşik olarak bulunan bir tipografi ölçeğini kullanmaktır.
Web yazı tipleri
Yazı tipi, kelimelerin sesi gibidir. Web'de en uzun süre çok az yazı tipi seçeneği vardı. Yalnızca sistem yazı tipleri kullanıldı. Ancak artık içeriğinizin atmosferine 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 bir şekilde desteklenir ve en iyi performans kazancını sağlar.
@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ükleme süresini artırabileceğinden kullanıcı deneyimini olumsuz etkileyebilir. Unutmayın, tasarımın yalnızca son piksellerin nasıl görüneceği değildir. Bu piksellerin ne kadar hızlı boyandığı, kullanıcı deneyiminin önemli bir parçası. Hızlı hissettiren bir deneyim, iyi bir kullanıcı deneyimidir.
Yazı tipi yükleniyor
Tarayıcıların bir yazı tipi dosyasını en kısa sürede indirmeye başlamasını isteyebilirsiniz. Dokümanınızın head
öğesine web yazı tipi dosyanıza referans veren bir link
öğesi ekleyin. preload
değerine sahip rel
özelliği, tarayıcıya bu dosyaya öncelik vermesini söyler. 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şin nasıl yönetileceğ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 ve yüklendikten sonra web yazı tipine geçmeyi seçebilirsiniz. Her iki stratejinin de dezavantajları vardır. Herhangi bir metin göstermeden önce web yazı tipi indirilinceye kadar beklerseniz, kullanıcılar kendilerini sinir bozucu bir süre boyunca boş bir sayfaya bakarken bulabilir. Metni önce bir sistem yazı tipinde gösterir, ardından web yazı tipine geçerseniz kullanıcılar sayfadaki içeriğin tutarsız bir şekilde kayabilir.
Herhangi bir metni görüntülemeden önce kısa bir süre beklemek iyi bir karar olacaktır. Web yazı tipi bu süre dolmadan yüklenirse metin, içerik kayması olmadan web yazı tipi kullanılarak görüntülenir. 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österilir.
Web yazı tipi sonunda her yüklenişinde web yazı tipinin sistem yazı tipini değiştirmesini istiyorsanız swap
font-display
değerini kullanın.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
Metin oluşturulduktan sonra sistem yazı tipini kullanmak istiyorsanız fallback
için font-display
değerini kullanın.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
Değişken yazı tipleri
Aynı yazı tipinde ç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ı) kullanabilirsiniz.
Değişken yazı tipleri bu sorunu tek bir dosya kullanarak çözer. Normal, kalın, ekstra kalın vb. için ayrı dosyalara sahip olmak yerine, değişken yazı tipi dosyası duyarlıdır. Çeşitli ağırlık veya stillerde gösterilmesi için 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 çok 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 artışı sağlayabilir.
Web'de iyi bir yazı biçimi, yalnızca bir tasarımcı olarak yaptığınız tür seçimleriyle ilgili değildir. Duyarlı yazı biçimi, aynı zamanda kullanıcının cihazına ve ağ bağlantısına saygı duymak anlamına gelir. Sonuç olarak, nasıl görüntülendiğinden bağımsız olarak doğru hissettiren bir tasarım elde edersiniz.
Duyarlı metinler konusunda uzmanlaştığınıza göre, artık duyarlı resimlere geçebilirsiniz.
Öğrendiklerinizi sınayın
Tipografiyle ilgili bilginizi test edin
Metnin görüntü alanı içinde kaydırılması için stiller eklenmelidir.
clamp()
, değişken yazı biçimi için yararlıdır çünkü
calc()
işlevlerinin kolayca yerleştirilmesini sağlarclamp()
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ılmasın açıkça belirtiliyor.2rem
1.5
2vw
line-height
biçimindeki görüntü alanı birimleri soruna neden olur.font-display
ne işe yarar?
block
veya inline-block
olarak ayarlanmasına olanak tanır.