Merhaba,

CSS bir web sayfasının düzenini değiştirmek gibi çok önemli işlevlere sahip olduğu gibi, Web’in %90’ını oluşturan “metinlerin” biçimlendirmesinde de CSS kullanıyoruz. Web sayfalarının da çoğunlukla metinlerden oluştuğunu düşünürsek, CSS’in bize sunduğu metin özelliklerini iyi bilmek önemlidir.

Font Seçimi (font-family özelliği)

Bir metnin göze çarpan en önemli özelliği hangi font ile yazıldığıdır diyebiliriz. CSS metnin fontuna müdahale edebilmemiz için gerekli fonksiyonu sağlar. font-family özelliği hangi fontun kullanılacağını tanımlamak için kullanılır.

Fontlar serif , sans-serif , monospace , cursive , fantasy olmak üzere 5 font ailesi olarak gruplandırılır. font-family özelliği HTML’de tüm alt etiketlere etki ettiği için genellikle en üst element <body> için tanımlanır.

body{ font-family: sans-serif; }

Bu CSS kuralı ile web sayfası, kullanıcı tarafından kendi tercihlerine göre tanımlanmış olan sans-serif fontunu kullanacaktır.

Web Uyumlu Yazı Tipleri

Yukarıdaki örnekte sayfanın yazı tipi kullanıcı tercihlerine göre ayarlanacak şekilde görünür. Eğer doğrudan kullanılacak fontun adını belirtirseniz web sayfanızın ziyaretçilerinin tamamında aynı yazı tipi görünür.

body{ font-family: Arial; }

Arial fontu genellikle tüm bilgisayarlarda hali hazırda bulunur. Bu sebeple kullanıcılar Arial ile tanımlanmış yazıları bu font ile görebilir. Eğer bilgisayarlarında Arial fontu yok ise, tarayıcının varsayılan yazı tipinde (genellikle Times New Roman) göreceklerdir.

Genellikle tüm işletim sistemlerinde bulunan fontlar: Arial , Arial Black , Comic Sans MS , Courier New , Georgia , Impact , Times New Roman , Trebuchet MS , Verdana

Font Seçeneklerini Belirtmek

Eğer font tanımlamamızı yaparken birden fazla font belirtecek olursak, tarayıcı mümkün olan ilk seçeneği kullanacaktır.

body{ font-family: Arial, Verdana, sans-serif; }

Örnekte 1. seçenek olarak Arial, eğer işletim sisteminde Arial fontu yüklenmemişse 2. seçenek olarak Verdana kullanılmasını söylüyoruz.

Örnekteki gibi sans-serif şeklinde font ailesini belirtmek de faydalı olacaktır. Eğer tanımlanan fontları bulamazsa en azından ne tip bir font kullanmak istediğimizi belirtmiş oluruz.

Web tasarımı yaparken genellikle standart fontlarla sınırlı kalınmaz. @font-face gibi bir method kullanılarak Google Fonts , Typekit gibi servislerden font çekilebilir. Bu sayede kullanacağımız font, ziyaretçinin bilgisayarında tanımlı olmasa bile bu fontu web sitesi sağlar ve metinler tanımlanan font ile ekrana yazılır.

Yazı Boyutu (font-size özelliği)

Daha önce CSS Ölçü Birimleri konusunu yazmıştık. Metinlerde varsayılan olarak kullanılan yazı tipinin ölçüsü baz alınır. Ancak biz buna müdahale edebiliriz.

p{ font-size: 16px; }

Yazı Stili (font-style özelliği)

Bu özellik yazınızı eğik yazmanıza olanak sağlar. italic veya oblique değerleri alabilir.

h2{ font-style: italic; }

Yazı Kalınlığı (font-weight özelliği)

Bu özellik yazınızın kalınlığını belirlemenize olanak sağlar. Vaysayılan değeri normal dir. bold değeri veya kullanılan yazı tipine göre 100 , 500 , 900 gibi sayısal değer alabilir.

font-weight: 100; /* Thin */
font-weight: 200; /* Extra Light */
font-weight: 300; /* Light */
font-weight: 400; /* font-weight: normal; kullanımının karşılığıdır */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold */
font-weight: 700; /* font-weight: bold; kullanımının karşılığıdır */
font-weight: 800; /* Extra Bold */
font-weight: 900; /* Ultra Bold */

Burada kullanılan ölçüler yazı tipinin desteklemesiyle de alakalıdır. Kullanacağınız ölçüyü yazı tipinizin desteklediğinden emin olmalısınız.

Satır Yüksekliği (line-height özelliği)

Bu özelliğimiz blok HTML etiketlerinde kullanıldığında her bir satırın kapladığı yüksekliği tanımlamamızı sağlar. px , em , % ve kat sayı ile tanımlanabilir.

Yazımızın boyutuna göre dinamik bir şekilde satır yüksekliğinin ayarlanması için sabit bir piksel değeri tanımlamak yerine diğer oranlı birimleri kullanmak daha kullanışlıdır. Kat sayı tanımlamak en kullanışlısıdır. line-height: 1.5; şeklinde bir tanımlama satır yüksekliğimizin yazı boyutumuzun 1.5 katı oranında olmasını söyler.

body{ font-size: 16px; line-height: 1.5; }

Bu örnekte satır yüksekliğimizi 16px değerinin 1.5 katı, yani 24px olarak tanımlamış olduk.

Eğer farklı bir tanımlama yapılmadıysa bir HTML etiketinin line-height değeri kendisini kapsayan HTML etiketinin line-height değerine göre ayarlanır.

body { font-size: 16px; line-height: 1.5; }
p { font-size: 18px; }

Örneğimizde paragraf etiketine bir line-height tanımlamadık. Ancak kendisini kapsayan <body> etiketinin line-height değeri 1.5 kat oranında olduğu için <p> etiketimizin satır yüksekliği de yazı fontunun 1.5 kat oranında yani 18px * 1.5 = 27px olacaktır.

Metin Özellikleri

Buraya kadar gördüğümüz özellikler font biçimlendirme için kullandığımız özelliklerdi. Bunlar ile birlikte CSS de kullanabileceğimiz farklı metin özellikleri de mevcuttur.

Hizalama (text-align özelliği)

Daha önce Microsoft Word ve benzeri bir program kullandıysanız sola dayalı, ortalı, sağa dayalı veya eşit hizalı hizalama ayarlarına aşina olabilirsiniz.

p{ text-align: left; }

Örnekte text-align özelliğimize left (sol) değeri verdik ve bu yazımızı sola hizalı yapacaktır. Bu değeri right (sağ), center (ortalı), justify (eşit hizalı) seçenekleri ile de kullanabiliriz.

text-align özelliğimizin varsayılan değeri start değeridir. Bu değer soldan sağa sayfa düzeninde ltr sola hizalı, rtl düzeninde (Arapça dili gibi) sağa hizalı olarak işlev gösterir.

Metin Dekorasyonu (text-decoration özelliği)

Bu özellik metnin altında, üstünde veya üzerinde çizgi çekmek için kullanılır.

.silinen{ text-decoration: line-through; }

Örnekte tanımladığımız .silinen classımıza verdiğimiz text-decoration özelliğimiz yazının üzerine bir çizgi çeker.

Yazının altı çizili olmasını istiyorsak underline veya üstü çizili olmasını istiyorsak overline değerlerini kullanabiliriz.

Büyük Harf – Küçük Harf (text-transform özelliği)

Metnimizin tamamını büyük harflerle yazmak için uppercase değeri, tamamını küçük harflerle yazmak için lowercase veya her kelimenin ilk harfini büyük yazmak için capitalize değerlerini kullanabiliriz.

.buyukharf{ text-transform: uppercase; }

Paragraf Boşluğu (text-indent özelliği)

Bu özellik paragraflarımızın girişinin belirli bir pixel ölçüsünde girintili olarak başlamasını sağlar.

.hizala{ text-decoration: line-through; }

Metin Gölgesi (text-shadow özelliği)

CSS’de yazılarımıza gölge efekti vermemiz mümkün.

h1{ text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

Buradaki değerler sırasıyla, blur, yatay (x) konum, dikey (y) konum ve gölge rengidir. Bu değerlerden yalnızca X ve Y konumlarını belirtilmesi zorunludur diğer seçenekler opsiyoneldir.