REACT UI STYLING
Fontları React Projesine Nasıl Dahil Ederiz ?
Projemizde bazen hali hazırda olmayan fontları kullanmak isteriz. Bunları React Projemize nasıl ekleyebiliriz ?
--
Bu yazıda aşağıdaki konular üzerinde duracağız;
- Temel Kavramlar (Typography, Typeface, Font)
- Web’de Metinleri Düzenlemek İçin Elimizde Nasıl Bir Programalama Setine Sahibiz ?
- Web’de Kullandığınız Font , Sayfanızı Kullanan Kişinin İşletim Sisteminde Yoksa ?
A. Temel Kavramlar
Bu konudaki teknik kısımlara dalmadan önce bazı kavramları anlamaya çalışalım. Typography, Typeface, Font
Tipografi, yazı dilini okunaklı, okunabilir ve görüntülendiğinde çekici kılmak için yazı düzenleme sanatı ve tekniğidir. Yazı düzeni, yazı tiplerini, nokta boyutlarını(point sizes), çizgi uzunluklarını(line lengths), satır aralığını (letter spacing) ve harf aralığını (izleme) seçmeyi ve harf çiftleri arasındaki boşluğu ayarlamayı (karakter aralığı kerning) içerir. (Wikipedia)
Typography kullanarak Typeface ve Fontlar oluştururuz. Peki Typeface ve Font arasında nasıl bir fark bulunur ? Aşağıdaki resim bu farkı çok net bir şekilde açıklamakta Roboto Typeface iken, Roboto içerisindeki farklı kalınlıklarda weight Fontları oluşturmakta. Thin, Light, Regular, Medium, Bold, Black..
Peki neden farklı kalınlarda fontlar var. Fontlar vektörel olarak çok farklı görsellik ve eğimler içeriyor ama bunlar farklı büyüklükte bile pixel haline gelmesinden antialising, smoothing gibi teknikler ile daha iyi hale getirilebilirken, bunu weights için oluşturabilmek çok da mümkün değildir. Bu yüzden Font dediğimiz kavram weight birlikte ifade anılır.
Aşağıdaki video’da typeface oluşturan Matthew Carter sunumundan bu konuda daha detaylı bilgi edinebilirsiniz.
B. Typography (Tipografi)
Typeface tanımlayan parçalar nelerden oluşur;
Tip Özellikleri
- aperture, ascender, baseline, cap height, descender, leading, letter-spacing, sans serif, serif, stem, stroke, x-height
Baseline: Taban çizgisi dediğimiz metnin üzerine oturduğu görünmez çizgidir. Dikey mesafenin ölçülmesinde ve karakterlerin birbirlerine göre hizalı bir şekilde gözükmesini sağlar.
Line Height: Çizgi Uzunluğu alt alta olan satırlarda bir üst baseline ile mevcut baseline arasındaki dikey uzunluktur. Material Design içerisinde 4 ün katları olarak tasarlanır.
Bu uzaklıklar işletim sistemi UI elementleri için belli sabitlerle ayarlanırken, Web ortamında bir sonraki konu kapsamında bahsedeceğim CSS gibi sistemler ile tanımlanır.
Cap Height, Büyük harflerin yüksekliğini, X-Height ise küçük harflerin yüksekliğini belirtir. Sol kısımda M harfi yüksekliği sağ kısımda x,y ve d harflerinin yüksekliği bu durumu gösteriyor
Ascenders, yani bazı harf karakterlerinden mevcut gövdenin üstünde ve altında yer alan kısmıdır.
Weight: Yazının ağırlığı dediğimiz , siyah boyanın kapladığı alan üzerinden verilen isimlendirmeler ile belli kalınlarda yazı tipleri oluşturmak mümkündür. 1. Light 2. Regular 3. Medium 4. Bold
Tip Sınıflandırmaları
- Serif: Harflerin kenarlarında olan ekstradan çıkıntı anlamına geliyor.
- Sans Serif: San fransızca without yani Serif olmayan anlamına geliyor
- Mono-Space: Tüm harflerin aynı genişlikte olmaları
- Handwriting: El yazısına benzer karakter tiplerinin oluşabilmesidir.
Okunabilirlik (Readibility)
- Color: Yazının rengi, arkaplan rengi
- Letter-Spacing: Karakterlerin arasındaki uzaklığı belirtir.
- Line-Length: Satırın uzunluğu
- Line-Height: Satır yüksekliği
- Paragraph-Spacing: Paragraflar arası boşluk
- Type Aligned: Yazının sağa, sola veya ortalı olarak hizalanması anlamına gelir.
B. Web’de Metinleri Düzenlemek İçin Nasıl Bir Programalama Setine Sahibiz ?
HTML içerisinde Metinler çok önemli bir yer teşkil eder. Metinlerde ayarlama yapabileceğimiz metin üzerinden bazı yetenekler olduğu gibi bazıları daha derinde bu metnin yapısından gelen Font özellikleri içerisinde gelir.
(https://developer.mozilla.org/en-US/)
Text is CSS Property aşağıda listelenmiştir.
- font: font
- color: RGB, HEX, HSL, Named colors
- text-align: center | left | right | justify (Extras: text-justify)
- text-decoration: overline | line-through |underline | none (Extras: text-decoration-color, text-decoration-style, text-decoration-line)
- text-transform: uppercase | lowercase | capitalize
- text-indent: the indentation of the first line
- letter-spacing: space between characters
- line-height: space between lines
- word-spacing: space between words
- text-overflow: clip|ellipsis| string;
- white-space: white-space: normal|nowrap|pre …
- word-break: normal|break-all|keep-all|break-word | ….
- word-wrap: normal|break-word|…
- writing-mode: horizontal-tb|vertical-rl|vertical-lr
Different Font Family
Fontlar text oluşturan en önemli konulardan birisidir. Her bir property değişimi web sayfanızın kalitesini, ergonomisini ve okunabilirliğini arttırır veya azaltır. Bu nedenle Font property ve bunların etkilerini çok iyi biliyor ve uyguluyor olmanız önemlidir.
- font-family: Times New Roman, Georgia, serif → if the browser does not support first font-family settings then tries the second one and then tries next.
- @font-face: Custom font loading from local or server
- font-style: normal | italic | oblique
- font-size: {number} px | em | % | vw
- font-weight: normal | bold
- font-variant: normal | small-caps
- font-stretch: ultra-condensed | extra-condensed| condensed |…
- font-size-adjust:
- font-kerning: auto | normal | none
- -webkit-font-smoothing: none | auto | antialiased | subpixel-antialiased
- -moz-osx-font-smoothing: auto | grayscale
Color ışık yansımalarının gözünüzde oluşturduğu tetiklemelerle beyninize oluşan algılamar sonucu olur. Bu durumu yansıtabilmek için farklı farklı renk modelleri bulunur.
- Named colors: red, green, blue, etc..
- Transparent Keyword: transparent
- 3 Digit, 4 Diget, 6 Digit, 8Digit Hex Colors: #FFBBAA
- rgb, rgba, hsl, hsla:
C. İşletim Sistemleri Bize Temel Fontlar Sağlıyor mu ?
Evet farklı farklı işletim sistemleri içerisinde hazır bir takım fontlar ile geliyor. Bunların bazıları her işletim sisteminde mevcut bu konu hakkında aşağıdaki linkten erişebilirsiniz.
D. Web’de Kullandığınız Font , Sayfanızı Kullanan Kişinin İşletim Sisteminde Yoksa ?
İşte bu durumda Web sayfalarınızda kullandığınız Font ya download edip Web sayfanızla indirilebilir bir kaynak haline getirmelisiniz veya internette indirilebilen bir adrese link olarak vermelisiniz.
Bu konuda en iyi kaynaklardan bir taneside Google Fonts sitedir. Bir çok Typeface hazır bir şekilde bulunduğu, download veya bir api üzerinden kullanmanızı sağlayacak bir altyapıya sahiptir.
Not: Font ilgili variable, width, weight, stretch gibi kavramlar var bu kavramları başka bir yazı içerisinde daha detaylı anlatmaya çalışacağım.
Fontları farklı kategori, dil desteği, font özelliği ve isme göre sorgulayabilirsiniz.
Herhangi bir typeface içerisine girdiğinizde o typeface ait farklı fontların listesini göreceksiniz. Download family diyerek tüm font setinide indirebilirsiniz. veya ilgili kullanacağınız style + düğmesine basarak ilgili font setinide indirebilirsiniz.
Not: Font indirerek uygulamanızda kullanma olayını ayrıca bir yazı içerisinde anlatırım. Bu font gruplarının daha kolay bir şekilde projede kullanabilirsiniz. link ve import yöntemi ile
- link veya import olarak yapmanız gereken react projenizdeki public/index.html dokümanına bu linki eklemeniz.
Referanslar
- https://material.io/design/typography/
- https://fonts.google.com/
- https://snowball.digital/blog/what-is-the-difference-between-a-font-and-a-typeface
- https://www.ted.com/talks/matthew_carter_my_life_in_typefaces
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
