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..

https://snowball.digital/blog/what-is-the-difference-between-a-font-and-a-typeface

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.

Matthew Carter (My Life in Typefaces)

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
https://material.io/design/typography/understanding-typography.html#type-properties

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.

baseline — https://material.io/design/typography/understanding-typography.html#type-properties

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.

Line-height — https://material.io/design/typography/understanding-typography.html#type-properties

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.

Line-height — https://material.io/design/typography/understanding-typography.html#type-properties

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

X ve Cap Height— https://material.io/design/typography/understanding-typography.html#type-properties

Ascenders, yani bazı harf karakterlerinden mevcut gövdenin üstünde ve altında yer alan kısmıdır.

Ascender, Descender — https://material.io/design/typography/understanding-typography.html#type-properties

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

Weight — https://material.io/design/typography/understanding-typography.html#type-properties

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.
Type Classifications — https://material.io/design/typography/understanding-typography.html#type-properties

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.

Google Fonts Ekranı

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.

Font sayfası.

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

Selected Font Family
  • link veya import olarak yapmanız gereken react projenizdeki public/index.html dokümanına bu linki eklemeniz.

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--