Tipografi, yazı ile sanat yapmadır. Tipografi, Yunanca kelime olan “typos” (form) ve “graphia” (yazmak) kelimelerinden türemiş bir kelimedir. Tipografi kavramı en basit açıklamasıyla forma uygun yazmaktır. Sarıkavak'a göre tipografi, harf, sözcük ve satırlarla, boşluklarının düzenlenmesi gereken diğer ögelerle belirlenmiş bir sayfa üzerinde yapılan görsel ve işlevsel düzenlemelerdir. Tipografi, izleyiciye sözel mesajları iletmek üzere tasarlanmış harfler, rakamlar ve noktalama işaretlerinin iki boyutlu yüzeyler üzerinde, tek başlarına, kelimeler ya da metinler olarak hangi büyüklük ve türde kullanılacaklarını ve bir araya geleceklerini belirleyen kurallar
sistemidir.

ipografi dalında uzmanlaşmış bireylere tipograf denir. Tipograflar; grafik tasarımı, reklamcılık ve web tasarımı gibi görsel mesajların ağırlıklı olduğu iş kollarında görev yapmaktadırlar. Tipografi, bilgi ve mesajın anlaşılabilir bir form diliyle iletilmesinin yanı sıra bir tarz, kişilik, görsel bir dil ve farklı imge olarak ortaya konan elemanlar olarak yazı karakteri (tipi) boyutu ortaya çıkmaktadır

Tipografi ile ilgili temel kavramlara bakıldığında Serif, Sans Serif, Leading, Kerning, Baseline, x-Height, Type Size gibi kavramlar kullanılmaktadır.

Serif: Tırnak demektir. Karakterlerin uç kısımlarındaki tırnaklı kısımları ifade eder.
Sans Serif: Sans, Fransızca kökenli bir terimdir ve olumsuzluk anlamı katar. Tırnaksız karakterleri ifade eder.

Leading: Metindeki satırlar arası boşluğu ifade eder.
Kerning: Metni oluşturan harfler arasındaki boşluğu ifade eder. Tracking ise bir satır içindeki karakterler arası boşluktur.

Descender (Alt): Harfin satır çizgisinin alt kısmında yani gövde kısmının (x-Height) alt bölgesinde kalan kuyruk kısmıdır.
Ascender (Üst): Harfin gövde kısmının (x-Height) üst kısmında kalan çıkıntıdır.

Harf büyüklükleri, yazı karakterleri ve bold, italik gibi değişkenlikler sayfada hiyerarşik düzeni oluşturmada önemlidir.

Type Size: Metni oluşturan harflerin, karakterlerin boyutunu ifade eder. Tipografik ölçü birimleri dijital ortam ve baskı için ayrı ayrı ifade edilmektedir.
• Dijital Ölçüler: 12 punto (point) = 1 em (pica),
• Baskı Ölçüleri: 1 punto = 0,376 mm, 72 punto (point) = 6 pika (pica) = 1 inç (inch)

Sözcük Boşluk Düzeni: Metni oluşturan sözcüklerin arasındaki boşluklar “ı” harfinin genişliği kadar olmalıdır. Başlıkların daha iyi algılanması ve bütünün algılanması sağlanarak daha akıcı bir okuma için sözcükler arasındaki boşluklar azaltılır.

1. Font Seçimi
2. Büyük ve Küçük Harf Kullanımı
3. Boşlukları Düzenleme
4. Metni Düzenleme
5. Yayınlanacak Ortamı Seçme

Dan Mayer font seçimi için beş kural belirlemiştir. Bu kurallar:
• Duruma uygun seçim
• Font ailelerini bilme
• Arka planın metnin önüne geçmemesi
• Kullanım amacına göre seçim
• Kuralsızlık

• Sözcükler arasında bir boşluk bırakılır.
• Noktalama işaretlerinden sonra bir boşluk bırakılır.
• Harf arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.
• Satır arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.
• Paragraf boşluğu verildiği durumlarda satırların arası ayrıca açılarak paragraf vurgulanmaya çalışılmaz.

Okuma düzeni soldan sağa doğru olan dillerde yazılan içeriğin sunulmasında sola yaslı ya da her iki tarafa yaslı yapılar tercih edilirken; başlık ve türevlerinde ortaya ya da her iki yana yaslı yapılar tercih edilir.

Tipografi seçiminde dikkat edilmesi gereken en önemli noktalardan biri metnin yayınlanacağı ortamın belirlenmesidir. Basılı ortamda yayınlanacak metinlerin düzenlenmesinde ilk dört kural takip edilebilir. Fakat metnin basılı olmayan elektronik ortamda yayınlanması durumunda yayınlanacak ortamda kullanılan yazılımın alt yapısı, üstünlükleri ve sınırlıklarının yanı sıra içeriğin görüntüleneceği ekran büyüklüğü önemlidir. Burada elektronik ortamdan kasıt web ortamıdır. Web ortamında sabit (fixed),  akışkan (Fluid), uyarlanabilir (Adaptive) ve esnek (Responsive) tasarım yapıları kullanılmaktadır.

Tipografi paketlerine geçmeden önce tipografi paketlerinin temelinin oluşturan Cascading Style Sheets yani kısaca CSS yapısına bakmak gerekmektedir. CSS, HTML yapısındaki web sayfalarında metin ve format biçimlendirme alanında olanaklar sunan bir web teknolojisidir. Web sayfaları için hazır şablonlar sunduğu gibi bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Cumhuriyet’in ilk yıllarından itibaren kurulmaya başlanan, sanat ve tasarım eğitimi veren kurumların ders programlarında yazı eğitimi ağırlıktadır. 

Resim öğretmeni yetiştirmek amacıyla 1926 yılında Orta Muallim Mektebi ve Terbiye Enstitüsü olarak kurulan ve 1976 yılında adı Gazi Eğitim Enstitüsü olarak değişen kurumda yazı eğitiminin verildiği görülmektedir. Yeni Türk alfabesiyle güzel örnekler vermek ve alfabeyi topluma öğretecek öğretmenler yetiştirmek amacıyla, kurumun ders programına yazı dersleri eklenmiş ve derslerin eğitmenliğini Almanya’da eğitim görerek yurda dönen Şinasi Barutçu üstlenmiştir. 1961 yılına kadar enstitüde dersler veren Barutçu, daha sonra İstanbul Atatürk Eğitim Enstitüsü’ne atanmış ve burada yazı eğitimi vermeye devam etmiştir. Yazı derslerinin içeriğini, güzel yazı alıştırmaları ve çocuklar için el yazısı uygulamaları oluşturmaktadır.

Bootstrap, HTML, CSS ve JavaScript çerçevesi için geliştirilmiş esnek ve mobil cihaz uyumlu web biçimlendirme çatısıdır. www.getbootstrap.com adresinden .zip dosyası indirilerek web tasarımı çalışmalarında kullanılabilir. Bootstrap, tipografi için CSS ön işlemci olarak Less ve Sass’ı tercih etmektedir. Less, Bootstrap ile geliştirilecek tasarımlarda CSS kodları ile kolaylıkla kullanılabilir. Sass için aynı durum söz konusu değildir. Dosyaları indirip tasarım projesinin içerisine kurmak gerekmektedir. Bootstrap ile hazırlanan web tasarımlarında tek çerçeve ile bütün cihazlarda uyum sorunu olmadan projeleri yayınlamak mümkündür.

BassCSS, esnek uygulamaları yapmak için temel stil, yardımcı programlar, anahat ve renk stili ögelerinin oluşturulmasını sağlayan CSS çerçevesidir. Bu çerçeveyi kullanmak için herhangi bir .zip dosyası indirmeye gerek yoktur. Web üzerinden sağlanan CSS dosyasının HTML kodları kullanılarak tasarım bağlanılabilir (“<link href=”https://npmcdn.com/basscss@8.0.1/css/basscss.min.css” rel=”stylesheet”>” CSS dosyasına ait bağlantı). CSS dosyasının içerdiği stil kolay bir şekilde kişiselleştirilebilir ve tipografi ile oynamalar yapılabilir.

Furtive, ızgara yapısının ve ögelerin boyutlandırılmasında rem parçası için Flexbox ve SVGs kullanımı gibi gelişmiş web standartları etrafında geliştirilmiş CSS çerçevesidir. www.furtive.co adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Furtive, eski tarayıcıların desteklemediği küçük CSS ayak izine sahiptir ve CSS indirmeleri için gerekli olan bant genişliğini kesmektedir. Gelişmiş web tasarımı projelerinde kullanılmak üzere geliştirilmiş yapıdır. Esnek ızgara yapısıyla sayfa yapıları rahatlıkla cihaz boyutuna göre ölçeklenebilir.

Mueller, Sass ve Compass temelinde yapılmış esnek modüler ızgara sistemidir. www.muellergridsystem.com adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Mueller ile ya HTML ögelerine sınıf eklenerek ya da tercihe bağlı olarak
düzenli HTML ögeleri “grid()” fonksiyonu kullanılarak ızgara yapılabilir. Mueller ızgarası, Masonry JS Kütüphanesi ile sıralı kullanılabilir.