Yazı biçimi

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