Doğuhan ELMA tarafından Typography yayınlanma tarihi
101 görünüm
Web tasarımında font yönetimi, sitenin okunabilirliğini, erişilebilirliğini ve estetik değerini büyük ölçüde etkiler. İyi bir font yönetimi stratejisi, marka kimliğini desteklerken kullanıcı deneyimini de iyileştirmelidir. İşte web tasarımında font yönetimiyle ilgili bazı önemli noktalar:
1. Font Seçimi
Marka Uyumu: Fontunuz, markanızın kişiliği ve sektörünüzle uyumlu olmalıdır. Örneğin, bir hukuk firması için geleneksel ve profesyonel bir serif font uygun olabilirken, bir yaratıcı ajans sans-serif, daha modern fontlar tercih edebilir.
Okunabilirlik: Fontunuz web üzerinde kolayca okunabilmelidir. Bu, özellikle uzun metinler için önemlidir. Genel olarak, sans-serif fontlar web okunabilirliği için tercih edilir.
Font Ailesi: Birkaç font ailesiyle (genellikle en fazla 2-3) sınırlı kalmak, tasarımınızı daha tutarlı ve profesyonel hale getirir.
2. Font Boyutu ve Hiyerarşi
Hiyerarşi: Başlıklar, alt başlıklar ve gövde metni arasında net bir hiyerarşi oluşturun. Bu, kullanıcıların bilgiyi kolayca tarayıp anlamasına yardımcı olur.
Adaptif Boyutlar: Farklı ekran boyutları için font boyutlarını ayarlayın. Responsive tasarım, mobil cihazlar dahil tüm cihazlarda iyi bir kullanıcı deneyimi sağlar.
Birimler: Font boyutları için genellikle em, rem veya yüzdelik (%) gibi göreceli birimler kullanılır. Bu, daha iyi bir esneklik ve erişilebilirlik sağlar.
3. Font Yüklemesi
Performans: Kullanılan fontların web performansı üzerinde büyük bir etkisi olabilir. Gereksiz font ağırlıklarını ve stillerini yüklemekten kaçının.
Web Fontları: Google Fonts gibi hizmetler, web fontlarını kolayca entegre etmenize olanak tanır. Ancak, yalnızca ihtiyacınız olan font stillerini seçtiğinizden emin olun.
4. Erişilebilirlik
Renk Kontrastı: Font rengi ve arka plan rengi arasında yeterli kontrast olmalıdır. Bu, WCAG (Web İçerik Erişilebilirlik Kılavuzları) gerekliliklerine uygun olmalıdır.
Scalable: Kullanıcıların metin boyutunu tarayıcı veya cihaz ayarları üzerinden büyütebilmesine izin verin.
5. Uluslararası Kullanım
Karakter Desteği: Eğer web siteniz birden fazla dilde kullanılacaksa, seçtiğiniz fontun geniş karakter desteği olmasına dikkat edin.
Sonuç
İyi düşünülmüş bir font yönetimi stratejisi, markanızın çevrimiçi varlığını güçlendirecek ve sitenizin kullanıcı deneyimini önemli ölçüde iyileştirecektir. Font seçimi, boyutlandırma, yüklemesi ve erişilebilirliği, web tasarımının temel taşlarındandır. Bu elementlerle dikkatli bir şekilde çalışmak, sitenizin estetik ve işlevsel hedeflerine ulaşmasını sağlar.
CSS: Font-family
Tailwind:
font-sans font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-mono font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
<p class="font-sans ...">The quick brown fox ...</p> <p class="font-serif ...">The quick brown fox ...</p> <p class="font-mono ...">The quick brown fox ...</p>
Google Fonts:
Web yazı tipleri, bir web sayfasındaki metinlere uygulanmak üzere özel olarak oluşturulmuş yazı tipleridir. Bir tarayıcı, bir web sayfasını oluştururken belirtilen web yazı tiplerini indirir ve yazı tiplerini o sayfadaki metne uygular.
Web yazı tipleri bir web sunucusunda yaşar, bu nedenle kendi web yazı tiplerinizi barındırma sağlayıcınızda barındırabilir ve kullanabilirsiniz. Alternatif olarak, Google Fonts gibi harici bir sağlayıcıdan web yazı tiplerini kullanabilirsiniz.
Makalede Poppins yazı tipi ile çalışacağız. Bu, geometrik sans serif yazı karakterleri içeren popüler bir tasarım aracıdır.
Google Fonts, web sitenize özel yazı tipleri eklemenin harika bir yoludur. Ücretsizdir, kullanımı kolaydır ve aralarından seçim yapabileceğiniz çok çeşitli yazı tipleri vardır. Tailwind CSS'de Google Yazı Tiplerini kullanmanın üç yolu vardır:
CDN bağlantısını kullanma
<Head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet" /> </Head>
Ardından, yazı tipi ailesini tailwind.config.js dosyasına eklemeliyiz.
Tailwind'e bunun yerine eklediğimiz Poppins yazı tipini kullanmasını söyleyelim. tailwind.config.js dosyanızı açın ve yeni eklediğimiz Poppins yazı tipini genişletmek için yapılandırmayı güncelleyin:
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { fontFamily: { poppins: ["Poppins", "sans-serif"], }, }, }, plugins: [], };
Yeni bir font-poppins font ailesi yardımcı sınıfını ortaya çıkarmak için varsayılan Tailwind yapılandırmasını genişletiyoruz. Bu, Tailwind varsayılan yazı tipi sınıflarının yanında var olacağı anlamına gelir.
Bu aynı zamanda Tailwind'in yardımcı program tabanlı stil konsepti için de bir avantajdır. Yazı tipini projenin başka bir yerinde kullanmamız gerekirse, tek yapmamız gereken font-poppins sınıfını öğeye eklemektir ve bu sadece çalışmalıdır. Bu ayrıca, istersek farklı kesme noktalarında farklı yazı tipleri ayarlamamızı da mümkün kılar.
... <section className="font-poppins text-gray-600"> ...
import kuralını kullanma:
Google Fonts'u Tailwind CSS'de kullanmanın ikinci yolu @import kuralını kullanmaktır. Bu kural, bir CSS dosyasını başka bir CSS dosyasına aktarmanıza olanak tanır; bu, içine aktardığınız CSS dosyasıyla aynı dizinde veya klasörde olmayan bir CSS dosyasını kullanmak istediğinizde kullanışlıdır.
CSS dosyası farklı bir sunucuda veya hatta farklı bir etki alanında da olabilir. Google Fonts CSS dosyasını Tailwind CSS dosyamıza aktarmak için kullanacağız.
import kuralını kullanmak için Google Fonts CSS dosyasını global.css dosyamıza eklememiz gerekiyor:
/* global.css */ @tailwind base; @tailwind components; @tailwind utilities; @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
Ardından, yazı tipi ailesini tailwind.config.js dosyasına eklemeliyiz.
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.