Canlı Tipografi Testi
(CSS Önizleme)
font-size, line-height ve letter-spacing değerlerini gerçek zamanlı test edin.
Oluşan CSS kodunu anında kopyalayın.
↑ Kendi içeriğinizle değiştirmek için bu alana doğrudan tıklayıp yazabilirsiniz.
Hakkında
Tipografi Önizleme (Typography Preview) aracı, tasarımınız için gerekli olan font-size (boyut), line-height (satır yüksekliği), letter-spacing (harf aralığı) ve font-weight (kalınlık) değerlerini sürükle-bırak kaydırıcılarla (slider) esnekçe tasarlamanızı ve anında görmenizi sağlayan ücretsiz bir sandbox'tır.
Türkçe ve Japonca dahil olmak üzere harici Google Web Fonts desteği sunar. Ayarlarınız ideal seviyeye ulaştığında "Kodu Kopyala" butonuna basarak doğrudan projenize entegre edebilirsiniz. Hiçbir girdi veriniz sunucularımıza kaydedilmez.
Nasıl Kullanılır
Ayarları Belirleyin
font-size, line-height, letter-spacing ve font-weight çubuklarını zevkinize ve projenize göre kaydırın. Dilerseniz üstteki "Hazır Ayarlar (Presets)" sekmesinden şablonları kullanabilirsiniz.
Gerçek Zamanlı Önizleme
Kaydırıcıda yaptığınız mikrometrik her değişim alttaki demo ekranına saniyesinde yansır. Kendinize ait metninizin nasıl görüneceğini test etmek için içerik yazısının üstüne tıklayın ve klavyeden kendi kelimelerinizi yazın.
Kodu Projeye Ekleyin
Her şey istediğiniz gibi olduğunda, alt kısımdaki kod panelinden "Kodu Kopyala" diyerek ortaya çıkan dört satırlık saf CSS betiğini (*.css) stil dosyanıza yapıştırın.
Sözlük
- font-size (Yazı Boyutu)
- Metnin ekranda kapladığı yüksekliğin net ölçüsüdür. px, em, rem, % parametreleriyle tarayıcıya bildirilir. Global (root) tarayıcı klasiği 16px'dir.
- line-height (Satır Yüksekliği)
- İki satır arasındaki nefes boşluğudur. Dar olursa metinler içine geçer, 1.5 ila 1.8 arası en yaygın değerdir (örn: 1.75 idealdir).
- letter-spacing (Karakter Aralığı)
- Karakterler (A B C) arasında ne kadar esneme veya daralma olacağını ayarlar. Em birimleri tercih edilir.
- font-weight (Kalınlık)
- Fontun etli (Bold) ya da zarif ve ince (Thin) olup olmayacağını sayısallaştırır. 100 inceyken 900 devasa kalındır. Ana metinler genellikle 400 (regular) kullanır.
- font-family (Yazı Tipi Kümesi)
- Tarayıcının hangi tasarım ailesinin gliflerini kullanacağını deklare eder.
- Tipografi (Tipografik Tasarım)
- Yazıyı harf dizini olarak değil form/işlev ikilisinde, okunabilir ve estetik bir UX sanatına dönüştürme eylemidir.
- Google Fonts (Açık Kaynak Sistem)
- Google'ın tüm internet dünyasına bedelsiz ve global sunucuları üzerinden dağıttığı web tabanlı font kaynağıdır.
- Web Fontları
- İşletim sisteminde yüklü olmayan tasarımsal font dosyalarının (@font-face) internet üzerinden milisaniyeler içinde çekilerek kullanılmasıdır.
SSS
- Q.Test ettiğim metin veya ürettiğim kodlar sunucuya (backend'e) kaydoluyor mu?
- Kesinlikle hayır. Tüm metin girişi, boyutlandırmalar ve oluşturulan CSS sadece bilgisayarınızdaki veya telefonunuzdaki tarayıcı donanımınız (DOM) içinde oluşur.
- Q.Eğer veri kaydedilmiyorsa yazılım neden aktifken dış ağa yükleme yapıyor?
- Web Fontlarının doğru bir render üzerinden test edilebilmesi adına Google Fonts altyapısındaki .woff2 dosyalarının çekilebilmesi için Google'a zararsız bir ağ isteği atılır.
- Q.Açılır menüde (Dropdown) olmayan bir Google Fontu'nu da kodlarımda kullanabilir miyim?
- Evet, bu araçta yalnızca yaygın fontlar listelenmiş olsa da kopyaladığınız CSS kodundaki font-family kısmını dilediğiniz Google font adıyla metin editöründe değiştirerek tasarımı uyarlayabilirsiniz.
- Q.Mobil cihazlardan veya tabletlerden (iPad) ayar yapabilir miyim?
- Evet. Tasarımımız tepkiseldir (responsive) ve tüm kaydırma çubukları dokunmatik (touch) olaylarını tam performansla destekler.
- Q.Ayar çubuklarını sürüklemek yerine sayıları elle net biçimde yazabilir miyim?
- Hazır şablonlarda veya kaydırma çubuklarında numerik kutu şimdilik bulunmamaktadır ancak oluşan .css kodundaki (örn; font-weight: 400) kısımları kodunuzda istediğiniz gibi ezebilirsiniz.
Kullanım Senaryoları
Web Tasarımı ve Tipografi Hiyerarşisi
Başlık, alt-başlık ve gövde (body) oranlarının birbirine uyumlu px ve satır yüksekliği kombinasyonlarını bulmak.
Blog Okunabilirlik Optimizasyonu
Uzun makale metinlerinde satır yüksekliği (line-height) ve harf aralığını göz yormadan ideal ve nefesli alanlara oturtmak.
Sunum (Presentation) Provaları
Powerpoint sunumları veya Keynote için kullanacağınız yazının sahnede kaplayacağı devasa harf hacmini önden tasarlamak.
CSS Eğitimi ve Antrenman
CSS'e yeni başlayanlar için 'Harf aralığı ile oynayınca tasarıma ne olur?', 'font-weight: 700 ne işe yarar?' sorularını canlı test etmek.