HTML ve CSS ile Web Sayfalarınızda Kullanabileceğiniz 5 Farklı Font Türü

Web tasarımında font seçimi oldukça önemlidir. Doğru font seçimi, web sayfanızın görünümünü tamamen değiştirebilir. Bu nedenle, web sitenizi tasarlarken kullanacağınız fontları dikkatli bir şekilde seçmeniz gerekir. Bu yazıda, HTML ve CSS ile web sayfalarında kullanabileceğiniz 5 farklı font türü hakkında bilgi vereceğiz.

1. Arial

Arial, sans-serif font ailesine aittir ve birçok web tasarımcısı tarafından tercih edilir. Arial, okunaklı ve modern bir görünüm sunar. Ayrıca, birçok cihazda standart olarak yüklüdür.

2. Times New Roman

Times New Roman, serif font ailesine aittir ve birçok web tasarımcısı tarafından kullanılır. Times New Roman, resmi bir görünüm sunar ve özellikle akademik web sitelerinde sıkça kullanılır.

3. Verdana

Verdana, sans-serif font ailesine aittir ve web tasarımcıları tarafından sıkça tercih edilir. Verdana, okunaklı bir fonttur ve özellikle küçük boyutlarda bile kolayca okunabilir.

4. Georgia

Georgia, serif font ailesine aittir ve birçok web tasarımcısı tarafından tercih edilir. Georgia, Times New Roman’a benzer ancak daha modern bir görünüm sunar. Ayrıca, küçük boyutlarda bile okunaklı bir fonttur.

5. Open Sans

Open Sans, sans-serif font ailesine aittir ve Google tarafından geliştirilmiştir. Open Sans, modern bir görünüm sunar ve özellikle bloglar ve diğer çevrimiçi içerikler için idealdir.

CSS ile Font Seçimi Nasıl Yapılır?

CSS ile font seçimi yapmanın birkaç yolu vardır. İlk yöntem, font-family özelliğini kullanmaktır. Örneğin, Arial fontunu kullanmak istiyorsanız, aşağıdaki kodu kullanabilirsiniz:

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

Bu kod, Arial fontunu kullanırken, kullanıcının cihazında Arial fontu yüklü değilse, sans-serif font ailesinden bir font kullanılmasını sağlar.

Diğer bir yöntem, @font-face yöntemidir. Bu yöntem, web sayfanızda kullanmak istediğiniz özel bir fontu yüklemenizi sağlar. Örneğin, aşağıdaki kodu kullanarak Open Sans fontunu yükleyebilirsiniz:

	@font-face {
	  font-family: 'Open Sans';
	  src: url('fonts/OpenSans-Regular.ttf');
	}

	body {
	  font-family: 'Open Sans', sans-serif;
	}
	

Bu kod, Open Sans fontunu yükler ve sans-serif font ailesinden bir font kullanırken, kullanıcının cihazında Open Sans fontu yüklü değilse, yüklenmiş olan fontu kullanır.

Sonuç

Web tasarımında font seçimi oldukça önemlidir ve doğru font seçimi, web sayfanızın görünümünü tamamen değiştirebilir. Bu yazıda, HTML ve CSS ile web sayfalarında kullanabileceğiniz 5 farklı font türü hakkında bilgi verdik. Ayrıca, CSS ile font seçimi yapmanın farklı yöntemlerini de öğrendiniz. Doğru font seçimi yaparak, web sayfanızın görünümünü geliştirebilirsiniz.