CSS ile “metin” Stilleme

Bu yazımızda, web sitelerindeki metinsel ifadeleri, yani yazıları nasıl etkili bir şekilde stilize edeceğimizi ve metni vurgulamak, okunabilirliği artırmak veya sadece estetik bir görünüm kazandırmak için kullanabileceğimiz CSS metin (text) özelliklerini detaylıca inceleyeceğiz.

CSS “metin” Özellikleri

Web tasarımında metin, içeriklerimizin okunabilirliği ve kullanıcılarımızın dikkatini çekme kapasitesi açısından kritik bir öneme sahiptir. İyi stilize edilmiş ve okunabilir bir metin, web sitesinin profesyonellik seviyesini artırabilir, aynı zamanda kullanıcı deneyimini iyileştirebilir. Ancak metni hem estetik hem de okunabilir kılmak için hangi CSS özelliklerinin ne şekilde kullanılması gerektiğini bilmek esastır. Aşağıdaki listede metni stilize ederken en yaygın olarak kullanılan ve bilinmesi gereken CSS özellikleri derlenmiştir:

1. font-family: Metin için kullanılacak yazı tipini belirtir.
2. font-size: Metin boyutunu belirler.
3. font-weight: Metnin kalınlığını belirler. “bold” ve “normal” gibi değerleri vardır.
4. font-style: Metin stilini belirtir. Genellikle “italic” veya “normal” değerleri için kullanılır.
5. text-align: Metnin yatay hizalamasını belirtir.
6. text-decoration: Metin üzerindeki dekorasyonları belirler.
7. text-transform: Metnin dönüşümünü belirtir.
8. color: Metnin rengini belirler.
9. letter-spacing: Harfler arasındaki boşluğu belirler.
10. word-spacing: Kelimeler arasındaki boşluğu belirler.
11. line-height: Satır yüksekliğini belirler.
12. text-indent: İlk satırın içeri doğru olan girintisini belirler.
13. text-shadow: Metne gölge ekler.

“font-family” Kullanımı

Web tasarımının en kritik unsurlarından biri metin stilizasyonudur. Bir web sitesinin estetiği ve okunabilirliği büyük ölçüde kullanılan fontlara bağlıdır. Haliyle, hangi yazı tipinin kullanılacağına karar verirken font-family özelliğini kullanırız. Örneğin, sitemizin başlığında “Arial” yazı tipini kullanmak istiyorsak aşağıdaki gibi bir kod yazarız:

Ancak, ‘Times New Roman’ gibi bazı yazı tipleri birden çok kelimeden oluşabiliyor. Bu gibi çok kelimeli bir yazı tipini belirtirken, tam ismini tek tırnak içerisine alarak belirlemek gerekir. Örneğin:

Şunu da belirtmek isterim ki, bazı yazı tipleri tüm tarayıcılarda ve işletim sistemlerinde aynı şekilde gösterilmez. İşte tam da bu noktada “web güvenli fontlar” devreye girer. Web güvenli fontlar, neredeyse tüm platformlarda benzer şekilde render edilen fontlardır, bu nedenle kullanımları oldukça yaygındır.

“Peki, ben kullanacağım fontun güvenli olup olmadığını nereden bileceğim?” gibi bir soru aklınıza gelmiş olabilir. Bunun için cssfontstack adında harika bir site var. Oradan kontrol edebilirsiniz.

Her ne kadar güvenli fontlardan birini kullansak da, sorunla karşılaşma ihtimalini unutmamamız gerekir. Böylesi durumlara karşı önlem olarak “font yığını” (fallback fonts) adını verdiğimiz bir teknik kullanırız. Bu teknikte, tercih edilen fontun yanı sıra yedek fontlar da eklenir. Örneğin:

Yukarıdaki kodda da görüleceği üzere, font yığını dört font içermektedir. Her bir yedek font virgül ile diğerlerinden ayrılmıştır. Birden fazla kelimeye sahip olan fontlar ise tek tırnak işaretinde gösterilmiştir.

Son olarak şunu da belirtmek isterim, yazı tipleri genellikle “serif” ve “sans-serif” olmak üzere iki ana kategoriye ayrılır. Serif yazı tipleri, harflerin sonunda ekstra detaylara sahipken, sans-serif yazı tipleri bu detaylardan yoksundur. Özellikle metin okunabilirliği söz konusu olduğunda, bu iki kategori arasında seçim yaparken dikkatli olmalıyız. Ayrıca, bir font yığını tanımlarken, en sona genellikle bir anahtar kelime değeri olan “serif” veya “sans-serif” eklenir. Böylece, tarayıcının font listesinde belirtilen hiçbir şeyi bulamaması durumunda kesin olarak kullanacağı font türü belirtilmiş olur.

“font-weight” Kullanımı

CSS ile metin kalınlığını font-weight özelliği ile ayarlarız. Bu özellik, anahtar kelimeler veya sayısal değerlerle belirtilebilir. Anahtar kelime değerleri arasında “bold” (kalın), “normal” (standart kalınlıkta, bu varsayılan değerdir), “lighter” (ebeveyn değerinden daha hafif) ve “bolder” (ebeveyn değerinden daha kalın) bulunmaktadır. Bunu aşağıdaki gibi listeleyebiliriz:

• font-weight-bold; ➡️ Kalın font ağırlığı.
• font-weight-normal; ➡️ Normal font ağırlığı. (Bu varsayılan değerdir.)
• font-weight-lighter; ➡️ Elementin ebeveyn değerinden bir tık daha hafif.
• font-weight-bolder; ➡️ Elementin ebeveyn değerinden bir tık daha kalın.

Aynı zamanda, sayısal değerlerle de font kalınlığını belirleyebiliriz. Bu değerler 1’den 1000’e kadar değişebilir, ama genellikle 100’ün katları şeklinde kullanılır. 400 değeri “normal”e, 700 değeri ise “bold”a eşittir. Özetlersek:

• font-weight-bold; ➡️ font-weight-700; ➡️ Kalın font ağırlığı.
• font-weight-normal; ➡️ font-weight-400; ➡️ Normal font ağırlığı. (Bu varsayılan değerdir.)

Ancak şunu da belirtmek isterim ki, her font, tüm sayısal değerleri desteklemeyebilir. Bu yüzden, kullanılan fontun hangi font ağırlıklarını desteklediğini kontrol etmek gerekir. Sıra geldi istediğimiz fontları projelerimize nasıl dahil edeceğimize. Bunun için Google Fonts adlı siteden yararlanabiliriz.

Google Fonts, kullanıcıların web sitelerinde kullanabileceği ücretsiz fontları sağlar. Bu fontları entegre etmek için iki yaygın yöntem vardır:

1. <link> Etiketi Kullanarak: Google Fonts’tan bir font seçtiğinizde size bir <link> etiketi sağlar. Bu etiketi HTML dosyanızın <head> bölümüne ekleyerek fontu sitenize dahil edebilirsiniz. Örneğin:

Bu kodu ekledikten sonra, CSS’te bu fontu şu şekilde kullanabilirsiniz:

• @font-face Özelliği Kullanarak: @font-face yöntemiyle, font dosyalarını doğrudan indirebilir ve sitenize yükleyebilirsiniz. Bu yöntemle, fontları yerel olarak sunabilir ve böylece harici bir kaynağa bağımlı olmazsınız. Örneğin:

Her iki yöntem de kendi avantajlarına sahiptir. <link> etiketi kullanımı daha basit ve hızlıdır, ancak kullanıcı fontu her seferinde Google Fonts’tan indirmek zorunda kalabilir. @font-face yöntemiyle fontları yerel olarak sunmak, bazı durumlarda daha hızlı yükleme sürelerine ve daha fazla kontrol imkanına olanak tanır.

“font-size” Kullanımı

Metin boyutunu CSS’de font-size özelliği ile ayarlarız. Bu özellik, belirttiğimiz metnin boyutunu ayarlar ve genellikle piksel (px), em, rem, yüzde (%) gibi birimlerle tanımlanır. Bakınız:

• Piksel (px): Web tasarımında en yaygın olarak kullanılan boyut birimidir. Belirli bir piksel değeri, ekranın çözünürlüğüne bağlı olarak sabit bir boyutta metni temsil eder. Örneğin, font-size: 16px; kodu metni tam olarak 16 piksel boyutunda gösterir. Bu, kesin ve spesifik boyutlar istendiğinde idealdir.
• em: Bu birim, metnin mevcut boyutuna oranla bir ölçeklendirme sağlar. Özellikle, 1em mevcut font boyutuna eşittir. Bu nedenle, 2em metni mevcut boyutunun iki katına çıkarır. Eğer bir üst elementte font-size: 20px; olarak ayarlandıysa, iç içe olan bir alt elementte font-size: 2em; olarak ayarlarsanız, bu alt elementin metni 40px olacaktır.
• rem: Bu birim, belgenin kök elementinin (genellikle <html> etiketi) font boyutuna göre ölçeklendirilir. Yani, HTML etiketinin boyutu ne olursa olsun, 1rem her zaman kök elementin font boyutuna eşittir. Bu, tüm web sitesi boyunca tutarlı boyutlamalar yapmak istediğinizde oldukça kullanışlıdır.
• Yüzde (%): Yüzde değeri, metnin içinde bulunduğu ebeveyn elementin boyutuna oranla bir ölçeklendirme sağlar. Yani, ebeveynin font boyutu 20px ise, içerideki metni %150 olarak ayarlarsanız, bu metnin boyutu 30px olur.

See the Pen CSS ile "metin" Stilleme by 1kodum (@1kodum) on CodePen.

“font-style” Kullanımı

Metnin stilini CSS’de “font-style” özelliği ile ayarlarız. Bu özellik, belirli anahtar kelimelerle metni italik, normal veya eğik yapmamıza olanak tanır.

Anahtar kelime değerleri arasında “italic” (italik stil), “normal” (standart stil, bu varsayılan değerdir) ve “oblique” (eğik stil) bulunmaktadır. Bakınız:

• font-style-italic; ➡️ Italik stil.
• font-style-normal; ➡️ Standart stil. (Bu varsayılan değerdir.)
• font-style-oblique; ➡️ Eğik stil. (Mevcut fontun yatay bir eğimle gösterilmesi.)

İtalik ve eğik arasındaki fark, bazı fontlarda belirgin olmayabilir, ancak genellikle “italic”, özellikle bu amaç için tasarlanmış bir stile sahipken, “oblique” mevcut fontun yatay bir eğimle gösterilmesidir. Örneğin:

Ancak burada da şunu belirtmek isterim ki, her font, bu stil seçeneklerinin hepsini desteklemeyebilir. Bu nedenle, kullanılan fontun hangi stil seçeneklerini sunduğunu kontrol etmemiz gerekir.

“text-transform” Kullanımı

CSS ile metin “text-transform” özelliği ile dönüştürülebilir. Yani bu özellik sayesinde, metni tümüyle büyük harf veya tümüyle küçük harf yapma gibi dönüşümleri gerçekleştirmemize olanak tanır. Sahip olduğu değerler aşağıdaki gibidir:

• text-transform-uppercase; ➡️ Metni tümü büyük harf olarak dönüştürür.
• text-transform-lowercase; ➡️ Metni tümü küçük harf olarak dönüştürür.
• text-transform-capitalize; ➡️ Metindeki her kelimenin ilk harfini büyük yapar.
• text-transform-none; ➡️ Herhangi bir dönüşüm uygulamaz (varsayılan).

Yukarıdaki kod, HTML içinde ne şekilde yazılırsa yazılsın, tüm <h1> başlıklarını tamamen büyük harfle gösterecektir.

Peki, HTML’de metni doğrudan büyük harf veya küçük harf olarak yazabilirken, neden bu CSS özelliğini kullanmalıyız? Bunun nedeni, içerik türüne bağlı olarak bazen belirli bir elementin her zaman belirli bir harf büyüklüğünde biçimlendirilmesinin istenmesidir. Örneğin, son dakika haberleri sunan bir web sitesi, tüm başlıklarını büyük harfle göstermek isteyebilir. Bu, HTML içerisinde sürekli olarak büyük harfle yazmak yerine, CSS ile kolayca yönetilebilir bir şekilde gerçekleştirilir. Aynı zamanda bu, kodun daha okunabilir olmasını sağlar.

“text-align” Kullanımı

Metin hizalamasını CSS’de text-align özelliği ile ayarlarız. Bu özellik, metni nasıl hizalamak istediğinizi belirtmek için kullanılır ve birkaç farklı değer alabilir. İşte bu değerler ve onların anlamları:

• text-align: left; ➡️ Metni sola hizalar. Bu, birçok dil için varsayılan değerdir.
• text-align: right; ➡️ Metni sağa hizalar.
• text-align: center; ➡️ Metni ortalar.
• text-align: justify; ➡️ Metni, satırın başından sonuna kadar genişleterek hizalar. Bu, gazete sütunlarındaki gibi bir görünüm oluşturur.

Örneğin, bir başlığı ortalamak istediğimizde şu şekilde bir CSS kullanabiliriz:

Bu kod, tüm <h1> etiketlerindeki metni sayfa veya içerdiği konteynerin ortasına hizalar.

Ayrıca, belirli bir bölümdeki tüm metni sağa hizalamak istiyorsanız, o bölüme özgü bir sınıf belirleyerek hizalama yapabilirsiniz. Bakınız:

Ancak şunu da belirtmek isterim ki, text-align özelliği sadece blok seviyesi elementlerde (örn. <p>, <div>, <h1>) ve tablo hücrelerinde işe yarar. Satır içi elementlerde (<span>, <a>) bu özellik doğrudan etkili olmaz.