Những điều cần biết về Typography trong UI
Tìm hi u v Typography trong UIể ề
Con ng i đ c g n nh toàn th i gian, không ch nh ng quy n sách hay ườ ọ ầ ư ờ ỉ ở ữ ể
t p chí, mà còn thông qua hàng t n thông tin trên Internet, hay trên nh ng ạ ấ ữ
bi n qu ng cáo giăng kh p các con đ ng, các khu v c giao thông công ể ả ắ ườ ự
c ng ho c các c a hàng mua s m. Tuy nhiên, ch có m t s ít “đ c gi ” cóộ ặ ử ắ ỉ ộ ố ọ ả
th th c s hi u đ c công s c và th i gian đ t o ra m t dòng ch là ể ự ự ể ượ ứ ờ ể ạ ộ ữ
nh th nào. Khi chúng ta đ c m t b n th o nào đó m t cách tho i mái và ư ế ọ ộ ả ả ộ ả
th giãn, thì đó là nh công c a designer. Vi c s p x p các con ch và ư ờ ủ ệ ắ ế ữ
ch n đúng ki u font m t cách th m m là m t trong nh ng u tiên hàng ọ ể ộ ẩ ỹ ộ ữ ư
đ u c a các designer. Đ t o ra đ c m t UI hi u qu và m t UX rõ ràng,ầ ủ ể ạ ượ ộ ệ ả ộ
h u h t designer c n ph i h c m t s đi u c b n trong ngành khoa h c ầ ế ầ ả ọ ộ ố ề ơ ả ọ
v Typography. Và bài vi t hôm nay s th ng kê nh ng đi u c b n đó, mà ề ế ẽ ố ữ ề ơ ả
đ i v i b t kỳ m t designer chuyên nghi p cũng nên n m rõ và áp d ng ố ớ ấ ộ ệ ắ ụ
đ c trong công vi c.ượ ệ
*
Typography là gì?
Typography là m t t không ch dành cho m t k thu t design, mà còn là ộ ừ ỉ ộ ỹ ậ
cho m t th bao quát, r ng l n h n th . Robert Bringhurst, m t ộ ứ ộ ớ ơ ế ộ
typographer (ng i chuyên v typography) Canada, trong quy n sách c a ườ ề ể ủ
mình có tên là The Elements of Typographic Style – đã đ nh nghĩa v ị ề
Typography nh m t ngh th công đ t o ra nh ng hình thái th giác b n ư ộ ề ủ ể ạ ữ ị ề
v ng c a ngôn ng loài ng i. Hay nói cách khác, Typography bi n đ i ữ ủ ữ ườ ế ổ
ngôn ng thành m t v t ch t có tính th giác đ c tô đi m, trang trí phù ữ ộ ậ ấ ị ượ ể
h p. ợ
Typography có m t l ch s lâu đ i h n r t nhi u khi so v i vi c design hayộ ị ử ờ ơ ấ ề ớ ệ
Internet. Typography xu t hi n l n đ u tiên vào gi a th k th 11-12, khi ấ ệ ầ ầ ữ ế ỉ ứ
con ng i sáng t o ra h th ng in n d ng có th di chuy n đ c – ườ ạ ệ ố ấ ạ ể ể ượ
moveable type Nh ng cu c cách m ng v typography m i th c s b t đ u ư ộ ạ ề ớ ự ự ắ ầ
k t sau s ra đ i c a Gutenberg Bible – cu n sách đ u tiên đ c t o ra ể ừ ự ờ ủ ố ầ ượ ạ
ph n l n b i h th ng in n nêu trên, và đi u này đã đánh d u s b t đ u ầ ớ ở ệ ố ấ ề ấ ự ắ ầ
c a k nguyên sách in các n c ph ng Tây. Style đ c s d ng trong ủ ỉ ở ướ ươ ượ ử ụ
quy n Gutenberg Bible đ c bi t đ n ngày nay v i tên g i là Textualis ể ượ ế ế ớ ọ
(Textura) và Schwabacher.
Ngày nay, có nhi u vi c ph i làm h n là ch sao chép các b n in và s p x pề ệ ả ơ ỉ ả ắ ế
l i chúng. Nói chung thì, typography đ c đ nh nghĩa nh m t môn khoa ạ ượ ị ư ộ
h c ngh thu t v style c a font ch , cách hi n th , c u trúc font ch v i ọ ệ ậ ề ủ ữ ể ị ấ ữ ớ
m c tiêu t o ra m t b n th o v a đ m b o v m t th m m , v a d dàng ụ ạ ộ ả ả ừ ả ả ề ặ ẩ ỹ ừ ễ
cho vi c đ c. Cách đây không lâu, typography v n ch là m t chuyên ngành ệ ọ ẫ ỉ ộ
dành cho nh ng ng i làm công vi c in n và xu t b n trong văn phòng, ữ ườ ệ ấ ấ ả
nh ng gi ngành khoa h c này đã đ c áp d ng r t nhi u lĩnh v c khác ư ờ ọ ượ ụ ở ấ ề ự
nhau, đ ng th i cũng chi m m t vai trò quan tr ng trong vi c design.ồ ờ ế ộ ọ ệ
Vai trò c a Typography trong Designủ
B n có th nghĩ ra đ c m t ví d nào đó v web ho c mobile design ạ ể ượ ộ ụ ề ặ
nh ng l iư ạ không có b t kỳ văn b n nào khôngấ ả ? Khó, đúng không? Đ ng ồ
th i, ch m t s xu t hi n c a văn b n trong giao di n cũng là không đ ờ ỉ ộ ự ấ ệ ủ ả ệ ủ
cho m t UI hi u qu và m t UX rõ ràng. Văn b n và cách th hi n c a nó ộ ệ ả ộ ả ể ệ ủ
nên đ c suy nghĩ m t cách c n th n, n u không r t có th s phá h ng ượ ộ ẩ ậ ế ấ ể ẽ ỏ
thi t k . Có nh ng designers hoàn toàn l đi vi c h c v typography vì h ế ế ữ ờ ệ ọ ề ọ
nghĩ r ng nó r t khó hi u và không đáng đ t n quá nhi u th i gian nh ằ ấ ể ể ố ề ờ ư
v y. Tuy nhiên, typography là m t trong nh ng thành ph n quan tr ng c a ậ ộ ữ ầ ọ ủ
m t design hi u qu . Hãy cùng xem t i sao.ộ ệ ả ạ
Con ng i chúng ta đã quen v i vi c thu nh n ph n l n thông tin d i ườ ớ ệ ậ ầ ớ ướ
d ng ch vi t, và designer là ng i c n ph i đ m b o quá trình này di n ạ ữ ế ườ ầ ả ả ả ễ
ra m t cách d dàng và hi u qu . Nh ng ki n th c c b n c a Typographyộ ễ ệ ả ữ ế ứ ơ ả ủ
có th giúp ích cho vi c nh n th c ra các đ c tính th giác c a t ng lo i ể ệ ậ ứ ặ ị ủ ừ ạ
font và nh h ng c a nó đ n nh n th c c a ng i dùng.ả ưở ủ ế ậ ứ ủ ườ
M t văn b n đ c th hi n m t cách hi u qu là chìa khoá cho m t designộ ả ượ ể ệ ộ ệ ả ộ
t t. S hi u qu c a nó không ch ph thu c vào n i dung c a văn b n, ố ự ệ ả ủ ỉ ụ ộ ộ ủ ả
mà còn cách th hi n. C ch , chi u r ng, màu s c, c u trúc các t – t t ở ể ệ ỡ ữ ề ộ ắ ấ ừ ấ
c nh ng y u t đó đ u là nh ng th c n ph i xem xét. Designer có th ả ữ ế ố ề ữ ứ ầ ả ể
truy n đ t m t chút tâm tr ng ho c n i dung thông qua vi c ch n fonts ề ạ ộ ạ ặ ộ ệ ọ
ch và cách th hi n phù h p. B ng cách này, typography giúp design giao ữ ể ệ ợ ằ
ti p v i con ng i. Các hi u ng th giác và tính d đ c c a văn b n trong ế ớ ườ ệ ứ ị ễ ọ ủ ả
các s n ph m k thu t s có nh h ng quan tr ng đ n tr i nghi m ng iả ẩ ỹ ậ ố ả ưở ọ ế ả ệ ườ
dùng. N u font ch khó đ c, ng i dùng có th g p khó khăn trong vi c ế ữ ọ ườ ể ặ ệ
đ nh h ng, ho c t h n là không th s d ng đ c. Ngày nay, m t tr i ị ướ ặ ệ ơ ể ử ụ ượ ộ ả
nghi m ng i dùng nghèo nàn trong các s n ph m k thu t s là m t đi u ệ ườ ả ẩ ỹ ậ ố ộ ề
không th tha th đ c, khi mà ng i dùng có th tìm các ph ng án thay ể ứ ượ ườ ể ươ
th t t h n m t cách d dàng.ế ố ơ ộ ễ
Thêm vào đó, typography t i s nh h ng đáng k đ n n t ng đ u tiênồ ẽ ả ưở ể ế ấ ượ ầ
(first impression) b i vì m c dù ng i dùng không đ c hoàn toàn văn b n, ở ặ ườ ọ ả
h v n l t qua chúng. Trong tr ng h p font ch t ra không phù h p, ọ ẫ ướ ườ ợ ữ ỏ ợ
ng i dùng có th s tr nên không mu n quan tâm đ n l i đ ngh b n ườ ể ẽ ở ố ế ờ ề ị ạ
đ a ra, ho c s d ng s n ph m c a b n.ư ặ ử ụ ả ẩ ủ ạ
Các thành ph n quan tr ng trong Typographyầ ọ
Đ có th ng d ng Typography m t cách sâu s c, b n c n ph i h c các ể ể ứ ụ ộ ắ ạ ầ ả ọ
y u t c a nó, cũng nh các yêu c u trong quá trình xây d ng Typography. ế ố ủ ư ầ ự
Hãy cùng xem.
Font và Typeface (ki u ch )ể ữ
Ngày nay, có r t nhi u designer dùng l n l n gi aấ ề ẫ ộ ữ font và typeface (ki u ể
ch ) và coi đó là các t đ ng nghĩa, nh ng nó không hoàn toàn chính xác. ữ ừ ồ ư
Hãy cùng làm rõ nó. M t Typeface – ki u ch là m t style trong vi c thi t ộ ể ữ ộ ệ ế
k ki u ch , mà nó ch a t t c các lo i th hi n đ c tính c a ch v i t t ế ể ữ ứ ấ ả ạ ể ệ ặ ủ ữ ớ ấ
c các kích th c và hình thái (Đ m, nh t,…). Trong khi đó, m t font ch ả ướ ậ ạ ộ ữ
là m t th hi n đ ho c a ch vi t mà th ng đ c gi i thi u v i 1 ki uộ ể ệ ồ ạ ủ ữ ế ườ ượ ớ ệ ớ ể
ch có kích th c và hình thái c th . Nói cách khác, ki u ch là m t cái gìữ ướ ụ ể ể ữ ộ
đó gi ng nh m t gia đình, và font ch là m t thành ph n c a nó. 2 th ố ư ộ ữ ộ ầ ủ ứ
trên là nh ng đ i t ng chính đ c designer và typographer thay đ i và ữ ố ượ ượ ổ
chuy n hoá đ t o ra các typography d đ c và th m m cao. M t s style ể ể ạ ễ ọ ẩ ỹ ộ ố
c a ki u ch s đ c mô t ngay sau đây.ủ ể ữ ẽ ượ ả
Meanline và baseline
V c b n, các ch cái đ c đ t trong m t đ ng th ng nh m t o ra m t ề ơ ả ữ ượ ặ ộ ườ ẳ ằ ạ ộ
th hi n th giác đ c s p x p ch n chu. Các công c h tr chính cho ể ệ ị ượ ắ ế ỉ ụ ỗ ợ
designer trong quá trình này là 2 đ ng th ng có tên là mean line và ườ ẳ
baseline. Đ ng đ u tiên đánh d u phía trên và đ ng còn l i đánh d u ườ ầ ấ ườ ạ ấ
phía d i c a ph n thân m t ch cái. Các đ ng này giúp cho vi c t o ra ướ ủ ầ ộ ữ ườ ệ ạ
các fonts ch b ng nhau. Và đ ng nhiên là chúng s đ c n đi sau khi ữ ằ ươ ẽ ượ ẩ
designer hoàn thành công vi c c a mình.ệ ủ
Các công c đo l ng ch cái (size – kích th c, weight – đ n ng nh , ụ ườ ữ ướ ộ ặ ẹ
height – chi u cao)ề
Đ phân bi t các lo i thông tin khác nhau, cũng nh t o các đi m nh n ể ệ ạ ư ạ ể ấ ở
nh ng v trí quan tr ng, designer s t o ra các font ch có kích th c và đữ ị ọ ẽ ạ ữ ướ ộ
n ng nh khác nhau. Đ n ng nh c a ki u ch là th c đo đ dày c a ặ ẹ ộ ặ ẹ ủ ể ữ ướ ộ ủ
m t ch cái. Kích th c c a ch th ng đ c đo d i d ng inches, mi-li-ộ ữ ướ ủ ữ ườ ượ ướ ạ
mét ho c pixel. Và chi u cao c a ch còn đ c g i làặ ề ủ ữ ượ ọ x-height b i vì ph nở ầ
thân c a t t c các ch cái trong cùng 1 kích th c s d a trên ch cáiủ ấ ả ữ ướ ẽ ự ữ x.
Vi c ti p c n nh th này s làm cho các ch cái trông b ng nhau. Và cũngệ ế ậ ư ế ẽ ữ ằ
s r t d dàng đ phân chia các thành ph n c a văn b n nh làẽ ấ ễ ể ầ ủ ả ư Tiêu đ , ề
tiêu đ ph , n i dungề ụ ộ ch b ng cách thay đ i các thông s này c a font ỉ ằ ổ ố ủ
ch .ữ
Ascender và Descender (Cao lên và th p đi)ấ
có thể bạn quan tâm
Những điều cần biết trong Writing task 2
3
944
411
Luyện thi IELTS
3
(New)
Những điều cần biết về Settings trong Windows 10
0
608
308
Tài liệu CNTT khác
(New)
Những điều cần biết về Mask trong Photoshop
9
910
195
Đồ họa, thiết kế
9
(New)
Những điều cần biết về vốn điều lệ cho kế toán
3
695
300
Kế toán, kiểm toán
3
(New)
Những điều cần biết về XML
59
763
548
Cơ sở dữ liệu
59
(New)
Những điều cần biết về GPU rời
9
2.313
275
Cơ sở dữ liệu
9
(New)
API và những điều cần biết
7
1.232
275
Cơ sở dữ liệu
7
(New)
NHỮNG ĐIỀU TRẺ NÊN BIẾT
4
1.116
357
Mẹ và bé
4
(New)
thông tin tài liệu
Để tạo ra được một UI hiệu quả và một UX rõ ràng, hầu hết designer cần phải học một số điều cơ bản trong ngành khoa học về Typography. Và bài viết hôm nay sẽ thống kê những điều cơ bản đó, mà đối với bất kỳ một designer chuyên nghiệp cũng nên nắm rõ và áp dụng được trong công việc.
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
xem nhiều trong tuần
Tâm lý xã hội VÀ Hệ tư tưởng
Tham khảo 12 bài tập nguyên lý thống kê có lời giải
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
Trắc nghiệm kinh tế
Địa lý 12 Phát triển cây công nghiệp lâu năm Tây Nguyên
Mẫu slide về các môn thể thao
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
