$ tools/fonts

Font Çifti Üretici

Google Fonts'tan başlık ve gövde fontu seç, canlı birlikte önizle ve CSS'i kopyala. Hızlı başlangıçlar için hazır setler.

$ Hazır Setler

# Başlık fontu

# Gövde fontu

$ Önizleme

</> Kod

$ Font çifti üreticisini nasıl kullanırsın

İşe hazır bir font çiftiyle başla — bunlar sınanmış, birlikte iyi çalışan kombinasyonlardır. Ya da özel git: açılır menülerden bir başlık fontu ve bir gövde fontu seç (hepsi Google Fonts'tan), boyut ve kalınlıkları ayarla ve önizlemenin canlı güncellenmesini izle. Çiftin farklı bağlamlarda nasıl durduğunu görmek için makale, hero ve kart önizlemeleri arasında gezin. Memnun kaldığında import veya CSS'i kopyala ve projene yapıştır.

İyi bir font çiftini ne yapar

En iyi çiftler çakışmadan kontrast yaratır. Yaygın bir desen, başlıklar için serif ya da display bir fontu temiz bir sans-serif gövde fontuyla eşleştirmektir. Başlık dikkati çeker; gövde okunaklı kalır. Birbirine fazla benzeyen iki fontu eşleştirmekten kaçın — gözünü kısıp ayırt edemiyorsan, başlık için daha karakterli bir şey seç.

Uygulaman için bu neden önemli

App Store ekran görüntülerin, açılış sayfan ve uygulama içi arayüzün; tutarlı, iyi eşleştirilmiş bir tipografiden faydalanır. Seçtiğin fontlar tonu belirler — eğlenceli, profesyonel, minimal, cesur. Çifti erken doğru tutturmak, sonradan yapılacak yeniden tasarım işinden kurtarır. Bu aracı hızla denemek için kullan, sonra tam CSS'i projene taşı.

$ SSS

Ücretsiz mi?

Evet — tamamen ücretsiz, kayıt yok, sınır yok. Tamamen tarayıcında çalışır ve fontları doğrudan Google Fonts'tan yükler.

Bu fontları uygulamamda kullanabilir miyim?

Buradaki tüm fontlar Google Fonts'tan ve açık kaynaklı. Uygulamalarda, web sitelerinde, baskıda — her yerde kullanabilirsin. Detaylar için her fontun lisansını Google Fonts'ta kontrol et (çoğu SIL Open Font License).

Fontları projeme nasıl eklerim?

Kod bölümünden <link> etiketini veya @import satırını kopyala ve HTML ya da CSS'ine ekle. Sonra CSS çıktısında gösterilen font-family tanımlarını kullan.

Bazı kalınlıklar neden kullanılamaz görünüyor?

Her Google Font tüm kalınlıkları desteklemez. Kalınlık chip'leri yalnızca seçili fontun gerçekten sağladığı kalınlıkları gösterir.

Diğer araçlar

LaunchShots'ı sevdin mi?
Her zaman ücretsiz — vakit kazandırdıysa bir kahve ısmarlayabilirsin.
Destek ol →
kopyalandı ✓