Web Tipografisi için modern ölçekler

Web Tipografisi için modern ölçekler
51

Günümüzde ziyaretçiler artık web sitelerinde içeriklerin verimli olup olmadığını değerlendirirken içeriğin özgünlüğü kadar seçilen fontlar ve büyüklükleri de ziyaretçiler için çok büyük bir öneme sahip olmaktadır. Bu nedenle web siteniz ziyaretçi odaklı bir siteyse içerik kadar sitenizin web tipografisine de önem vermeniz gerekmekte.

modernscale-mobile-compare

Modern Web Tipografisine Giriş

Canlı demo’ya göz atabilirsiniz. Bu tipografi Jason Pamental tarafından oluşturulmuştur. Demo’yu indirmek için tıklayın.

Modern Web Tipografi Ölçekleri

Body

Font Size Line Height Characters
Baskı 12pt 1.25em 60-75
Masaüstü (büyük) 1em (16px) 1.375em 60-75
Masaüstü 1em (16px) 1.375em 60-75
Tablet (büyük) 1em (16px) 1.375em 60-75
Tablet (küçük) 1em (16px) 1.25em 60-75
Telefon 1em (16px) 1.25em 35-40

H1

Font Size Line Height
Baskı 36pt 1.25em
Masaüstü (büyük) 3em (48px) 1.05em
Masaüstü 3em (48px) 1.05em
Tablet (büyük) 2.5em (40px) 1.125em
Tablet (küçük) 2em (32px) 1.25em
Telefon 2em (32px) 1.25em

H2

Font Size Line Height
Baskı 24pt 1.25em
Masaüstü (büyük) 2.25em (36px) 1.25
Masaüstü 2.25em (36px) 1.25em
Tablet (büyük) 2em (32px) 1.25em
Tablet (küçük) 1.625em (26px) 1.15384615em
Telefon 1.625em (26px) 1.15384615em

H3

Font Size Line Height
Baskı 18pt 1.25em
Masaüstü (büyük) 1.75em (28px) 1.25em
Masaüstü 1.75em (28px) 1.25em
Tablet (büyük) 1.5em (24px) 1.25em
Tablet (küçük) 1.375em (22px) 1.13636364em
Telefon 1.375em (22px) 1.13636364em

H4

Font Size Line Height
Baskı 14pt 1.25em
Masaüstü (büyük) 1.125em (18px) 1.22222222em
Masaüstü 1.125em (18px) 1.22222222em
Tablet (büyük) 1.125em (18px) 1.22222222em
Tablet (küçük) 1.125em (18px) 1.11111111em
Telefon 1.125em (18px) 1.11111111em

Blockquote

Font Size Line Height
Print 24pt 1.45833333em
Desktop (lg) 1.5em (24px) 1.45833333em
Desktop 1.5em (24px) 1.45833333em
Tablet (lg) 1.5em (24px) 1.45833333em
Tablet (sm) 1.25em (20px) 1.25em
Phone 1.25em (20px) 1.25em

Hazırlanmış olan modewrn web tipografisinin bulunduğu CSS dosyasını indirmek için tıklayın.

modernscale-demo-scaleoff

Bu kaynak oluşturulurken örnekler bu web sitesinden alınmıştır.

Yorum Yap