Dokumen tersebut membahas tentang tipografi dan desain tulisan yang baik untuk media online. Beberapa poin penting yang disarankan adalah menggunakan perataan teks ke kiri, menghindari penggunaan huruf kapital untuk judul, serta menggunakan warna biru sebagai warna utama karena dianggap paling aman dan nyaman bagi pengguna.

1. Desain Media Digital:
Tipografi
Disusun oleh :
Iwan Setiawan SE, M.I.Kom
Kontak@BungIwan.com
0818 799 543

2. Tipografi (typography) adalah perpaduan antara
seni dan teknik mengatur tulisan, termasuk di
dalamnya alur spasi, kerning, dan perataan (text
alignment). Dalam desain media online, tipografi
menjadi isu tersendiri, terutama menyangkut
perataan (text alignment), huruf kapital, serta jenis
dan warna
Konsep dan tehnik seputar tipografi di media online
bermuara pada tingkat keterpindaian (scannability)
dan keterbacaan (readability), yaitu menyajikan
tulisan yang mudah dipindai dan dibaca pengguna
online.

3. Di bagian ini akan diulas tentang perataan teks dan
jenis huruf. Ini bukan soal benar atau salah, tapi
soal komunikasi efektif atau tidak efektif. Di dunia
desain, terutama desain komunikasi visual, tidak
ada istilah salah atau benar; yang ada adalah
komunikasi efektif atau tidak efektif.
"There is no right or wrong way to align text," tulis
laman Desktop About seraya mengutip ungkapan
Peter Bilak (Illegibility): “Right and wrong do not
exist in graphic design. There is only effective
and non-effective communication."

4. Perataan Teks: Gunakan Rata Kiri!
Untuk komunikasi efektif di media online-scannable
& readable--gunakan rata kiri (align left), bukan
rata kiri-kanan (justify). Rata kiri adalah text
alignment terbaik untuk website dengan alasan
sebagai berikut:

5. 1. Lebih enak dibaca. Naskah rata kiri lebih mudah
dipindai dan dibaca serta lebih nyaman di mata
pengguna (user friendly).
2. Bukan standar untuk web. Rata kiri-kanan
(justify) bukan standar website. la standar surat-
menyurat, tulisan "serius" (skripsi atau karya
ilmiah).
3. Bawaannya Rileks! Rata kiri-kanan (justify)
menunjukkan formal, kaku, tidak rileks. Rata kiri
(align left) akan menyisakan "ruang putih" (white
space) lebih banyak untuk "istirahat mata", lebih
informal, dan ramah" friendlier)

6. Kita bisa melihat dan merasakan sendiri
perbandingan naskah rata kiri dan rata kiri-kanan
di media online. Kita bisa merasakan tampilan
mana yang lebih enak dipindai dibaca dan nyaman
di mata
Justified "tersingkir" karena ia adalah gaya media
cetak formal , penulisan surat resmi, karya ilmiah,
dan tidak cocok untuk media online (web) karena
sulit dipindai dan dibaca

7. Itulah sebabnya, fakta menunjukkan, situs-situs
web terkemuka di dunia Google, Yahoo, Wikipedia,
Facebook, Twitter-menggunakan rata kiri. Situs-
situs berita (news portal) peringkat teratas di Alexa
Ranks—CNN, The New York Time, Huffington
Post, The Guardian, Forbes, Fox News-juga
menggunakan rata kiri.
Demikian halnya situs-situs berita di Indonesia
(posisi teratas di ranking Alexa), seperti Detik,
Kompas, Liputan6, Tribunnews, Merdeka,
Republika Online, BBC Indonesia, menggunakan
rata kiri, bukan justified.

8. Ada juga situs berita Indonesia yang menggunakan
justified, tapi "risikonya" sajian tulisan mereka lebih
sulit dipindai (tidak memenuhi kaidah scannability),
tidak efektif, dan peringkat situs mereka berada di
bawah situs-situs ber text align rata kiri.
Berikut ini sejumlah referensi yang menjelaskan
mengapa Rata Kiri (Left Align) merupakan text
alignment terbaik untuk website. Intinya, rata kiri
merupakan standar website dan lebih mudah
dipindai dan dibaca user internet.

9. Konsorsium WWW:
"Many people with cognitive disabilities have a great
deal of trouble with blocks of text that are justified
(aligned to both the left and the right margins). The
spaces between words create "rivers of white" running
down the page, which can make the text difficult for
some people to read.
This failure describes situations where this confusing
text layout occurs. The best way to avoid this problem
is not to create text layout that is fully justified." (World
Wide Web Consortium/ W3C).

10. "Banyak orang dengan disabilitas kognitif
mengalami banyak masalah dengan blok teks yang
rata (sejajar dengan margin kiri dan kanan). Spasi
di antara kata-kata menciptakan" sungai putih
"yang mengalir di halaman, yang dapat membuat
teks sulit dibaca oleh sebagian orang.
Kegagalan ini menjelaskan situasi di mana tata
letak teks yang membingungkan ini terjadi. Cara
terbaik untuk menghindari masalah ini adalah
dengan tidak membuat tata letak teks yang
sepenuhnya benar. " (World Wide Web Consortium
/ W3C).

11. Panduan Halaman Web:
"Most commonly used in newspapers and other printed
media. Justified text is not implemented on the web in the
same way software for printed material adjusts the text. On
the web, additional spaces are added between the words to
force the line to fill to the left and right margins. Web pages
do not add hyphens like other software will to break up the
text more evenly.
The best text alignment for the web is left aligned. This
makes the web page easy to scan (which people do on the
web), is easier to read and the words are spaced evenly."
(Web Page Mistakes)

12. "Paling umum digunakan di surat kabar dan media cetak
lainnya. Teks yang dibenarkan tidak diterapkan di web
dengan cara yang sama perangkat lunak untuk bahan
cetakan menyesuaikan teks. Di web, spasi tambahan
ditambahkan di antara kata-kata untuk memaksa baris
mengisi ke margin kiri dan kanan Halaman web tidak
menambahkan tanda hubung seperti software lain yang
akan memecah teks secara lebih merata.
Perataan teks terbaik untuk web adalah rata kiri. Hal ini
membuat halaman web mudah dipindai (yang dilakukan
orang-orang di web), lebih mudah dibaca dan kata-kata
ditempatkan secara merata. "(Kesalahan Halaman Web)

13. Desain Grafis Digital:
Justified text is not usually appropriate on the Web.
Justified text is more difficult to read than left-aligned text.
This is because of the low resolution of screen displays.
Screen displays cannot cope well with the addition of small,
subtle amounts of space between words or letters. As a
result, justification always looks poor on screen displays. It
tends to result in uneven spacing, and can also sometimes
break up the shape of the word (we recognise words based
on their overall shape, not on the individual letters).
Left-aligned text is best suited to almost all "body text” use
on the Web. Increasing the gap between lines can improve
readability. (Leaf Digital)

14. Teks yang dibenarkan biasanya tidak sesuai di Web. Teks
rata kiri lebih sulit dibaca daripada teks rata kiri. Ini karena
resolusi tampilan layar yang rendah.
Tampilan layar tidak dapat mengatasi dengan baik dengan
penambahan spasi kecil dan halus di antara kata atau
huruf. Akibatnya, pembenaran selalu terlihat buruk pada
tampilan layar. Ini cenderung menghasilkan spasi yang
tidak rata, dan terkadang juga dapat merusak bentuk kata
(kami mengenali kata berdasarkan bentuk keseluruhannya,
bukan pada huruf individual).
Teks rata kiri paling cocok untuk hampir semua
penggunaan "teks tubuh" di Web. Meningkatkan jarak antar
baris dapat meningkatkan keterbacaan. (Leaf Digital)

15. Forum User Experience (UX):
Try looking at the reviews on Amazon.com, postings to
your facebook wall, tweets from your favorite celebrities,
and search engine listing results from Google. That's
enough to tell me that left-aligned seems to be the way to
go. (Stack Exchange).
Coba lihat review di Amazon.com, posting di wall facebook
Anda, tweet dari selebriti favorit Anda, dan hasil listing
mesin pencari dari Google. Itu cukup untuk memberi tahu
saya bahwa rata kiri tampaknya merupakan cara yang
tepat.

16. UI Design:
For text, it is ideal to use left-alignment when desiging for
the screen. Since most for-screen type rendering methods
are incapable of distributing space appropriately when
justifying text to both sides, left alignment keeps text
readable and organized. You can, of course, use center
and right alignment where the design demands it, but those
are usually reserved for special cases and smaller chunks
of text. (UI Design).

17. Untuk teks, sangat ideal menggunakan perataan
kiri saat mendesain layar. Karena sebagian besar
metode rendering tipe layar tidak mampu
mendistribusikan ruang dengan tepat saat
meratakan teks ke kedua sisi, perataan kiri
membuat teks dapat dibaca dan diatur. Anda
dapat, tentu saja, menggunakan perataan tengah
dan kanan di mana desain menuntutnya, tetapi itu
biasanya disediakan untuk kasus khusus dan
potongan teks yang lebih kecil. (Desain UI).

18. Dari sejumlah data atau opini di atas, dapat
disimpulkan:
Rata-kiri (align-left) adalah yang terbaik, lebih
mudah dibaca, sesuai dengan standar website,
cocok sekali dengan pengalaman pengguna (UX),
lebih ramah pengguna (user friendly), dan lebih
efektif!
Tampilan posting rata kiri-kanan alias full-justified
tidak lazim. Selain membuat kaku, memperlambat
user untuk membacanya, tampilan teks justify ini
juga akan tampak buruk jika ada di kolom sempit.

19. Hindari Semua Kapital (ALL CAPS)
dalam Judul
Tulisan
• Sama dengan alasan penggunaan perataan kiri (align
left), menghindari penggunaan semua huruf kapital (ALL
CAPS) juga terkait aspek scannability dan readability.
• Penggunaan semua huruf kapital dalam judul tulisan,
selain bertentangan dengan etika internet (netiket)—
karena huruf kapital mengindikasikan marah dan teriak
(angry & shouting), juga sulit dibaca.

20. Misalnya: SITI NURHALIZARINDU INDONESIA
Sebaiknya: Siti Nurhaliza Rindu Indonesia
Dalam panduan penulisan online berbahasa Inggris, huruf
kapital bahkan sebaiknya digunakan di awal kalimat saja,
kecuali untuk menulis nama atau istilah. Simak saja BBC
Indonesia, misalnya, yang hanya menuliskan huruf kapital
di awal kalimat judul.
Menurut hasil penelitian pakar web usability dari NN Group,
Jakob Nielsen, judul tulisan yang menggunakan semua
huruf besar (ALL CAPS) memperlambat bacaan hingga
10% dan pengguna menolak karena melihat seperti
teriakan.

21. • Dengan kata lain, judul tulisan (posting) yang
menggunakan huruf besar semua dapat
mengurangi tingkat keterbacaan (readability).
Artinya, judul demikian tidak user friendly alias
"nyusahin pembaca", bikin cepat lelah bagi mata
user.
• Ahli Usability, Jakob Nielsen menemukan bahwa
membaca pada layar lebih lambat kira-kira 25%
ketimbang membaca pada kertas, dan membaca
kapital semua bisa jauh lebih lambat kira-kira
10%.

22. Gunakan Warna Biru
• Selain soal tipografi, isu lain dalam desain
media online juga menyangkut warna.
Warna terbaik, terpopuler, dan terfavorit
untuk website adalah biru (blue).
• Di posisi dua ada hijau (green) dan ungu
(purple) dengan angka yang cukup jauh,
hanya 14%. Lainnya-merah, hitam,
oranye, kuning, cokelat, abu, putih di
bawah 10%.

23. Di data kedua, warna yang sangat tidak
disukai (least favorit), orange menempati
posisi pertama dengan nilai 30%. Brown
(cokelat) di urutan kedua dengan 23%.
Warna biru 0% alias tidak masuk kategori
warna yang tidak disukai.

24. Alasan utama biru menjadi warna favorit adalah
"aman”. "Blue is safe," tulis Crazyegg. “Skema
warna teraman adalah biru. Bayangan apa pun
dari biru bekerja dan kombinasi apa pun dari biru
dalam skema warna adalah efektif.“
• Aman = Biru adalah warna favorit bagi
mayoritas penduduk, tanpa melihat jenis
kelamin, usia, dan sebagainya.
• Aman = Biru adalah warna yang dirasakan orang
dengan kepercayaan, otoritas, dan tahan uji.

25. • Biru, hitam, hijau, dan warna gelap lainnya lebih
nyaman di mata pembaca (user friendly). Warna
merah, orange, dan warna terang lainnya
membuat silau mata user alias tidak nyaman
dilihat di layar monitor.
• Itulah sebabnya mayoritas situs ternama di dunia
memilih warna biru sebagai warna utama,
termasuk logo. Sedikit sekali situs terkemuka
yang logonya berwarna orange. Tentu, blogger
adalah pengecualian, namun tulisan "Blogger"-
nya biru juga, hanya favicon/logo "B"-nya
berlatar orange.

26. Tercatat Facebook, Twitter, Linkedin, Walmart, Bank of
America, Citibank, memilih biru. Salah satu sebab biru
menjadi warna favorit dengan baik digambarkan laman
OXP berikut ini:
"Blue is an overwhelmingly "Popular Color”. The color of the
sea and sky, blue is seen as trustworthy, dependable and
committed. We are surrounded by the color blue, from the
blue skies above to the deep blue of the oceans.“
"Biru adalah" Warna Populer "yang luar biasa. Warna laut
dan langit, biru dipandang sebagai warna yang dapat
dipercaya, dapat diandalkan, dan berkomitmen. Kami
dikelilingi oleh warna biru, dari biru langit di atas hingga biru
samudra. "

28. • Warna merah dan orange sangat baik digunakan
untuk button (tombol), misalnya tombol download
atau "beli”,
• Warna biru bahkan dinilai tidak cocok untuk
tombol khusus yang memerlukan perhatian
khusus semacam "buy button".
• - blue is not a good color for grabbing the user's
attention because it doesn't stand out as much
against contrasting colors” (Codrops).
• Soal warna logo atau website lebih terkait
dengan kenyamanan mata dan "pengalaman
user” (user experience/ UX). Biru adalah warna
paling umum untuk website dan aplikasi.

29. TERIMAKASIH
Iwan Setiawan SE, M.I.Kom
BungIwan.com
0818 799 543