Khái niệm về Typography: Typography cho thiết kế graphic Typography trên web Sự khác biệt Màu sắc & màu sắc trên web Bố cục trong thiết kế web Khái niệm chống răng cưa Nguyên tắc chọn & sử dụng kiểu chữ

1. BÀI 3
TỔNG QUAN VỀ TYPOGRAPHY

2. NHẮC LẠI BÀI TRƯỚC
Lý thuyết tổng quan về màu sắc
Sự kết hợp màu sắc
Nhiệt độ của màu sắc
Giá trị của màu sắc
Bảng màu
Công cụ màu sắc
Lý thuyết tổng quan về màu sắc
Sự kết hợp màu sắc
Nhiệt độ của màu sắc
Giá trị của màu sắc
Bảng màu
Công cụ màu sắc
Slide 3 - Tổng quan về Typography 2

3. MỤC TIÊU BÀI HỌC
Khái niệm về Typography:
Typography cho thiết kế graphic
Typography trên web
Sự khác biệt
Màu sắc & màu sắc trên web
Bố cục trong thiết kế web
Khái niệm chống răng cưa
Nguyên tắc chọn & sử dụng kiểu chữ
Khái niệm về Typography:
Typography cho thiết kế graphic
Typography trên web
Sự khác biệt
Màu sắc & màu sắc trên web
Bố cục trong thiết kế web
Khái niệm chống răng cưa
Nguyên tắc chọn & sử dụng kiểu chữ
Slide 3 - Tổng quan về Typography 3

4. GIỚI THIỆU TYPOGRAPHY

5. GIỚI THIỆU
Typography:
Sự kết hợp giữa font, kiểu chữ, màu sắc … để làm
nổi bật nội dung
Tạo typography: photoshop, illustrator, HTML/CSS
typo graphic typography
Typography:
Sự kết hợp giữa font, kiểu chữ, màu sắc … để làm
nổi bật nội dung
Tạo typography: photoshop, illustrator, HTML/CSS
Slide 3 - Tổng quan về Typography 5
Nghệ thuật sắp đặt và kỹ thuật ghép chữ

6. GIỚI THIỆU
Nguyên liệu để tạo nên typography:
Font chữ
Kiểu chữ (chữ hoa, chữ thường)
Khoảng cách giữa các ký tự
Hình ảnh, đồ họa (màu sắc, mảng màu, đường thẳng,
đường cong, khoảng trống…)
Khả năng ứng dụng của Typography:
Đồ họa hình ảnh (graphic design + in ấn)
Đồ họa web (website design)
…
Nguyên liệu để tạo nên typography:
Font chữ
Kiểu chữ (chữ hoa, chữ thường)
Khoảng cách giữa các ký tự
Hình ảnh, đồ họa (màu sắc, mảng màu, đường thẳng,
đường cong, khoảng trống…)
Khả năng ứng dụng của Typography:
Đồ họa hình ảnh (graphic design + in ấn)
Đồ họa web (website design)
…
Slide 3 - Tổng quan về Typography 6

7. TYPOGRAPHY VỚI THIẾT KẾ GRAPHIC

8. TYPOGRAPHY VỚI THIẾT KẾ GRAPHIC
Phạm vi ứng dụng:
In ấn (poster, quảng cáo)
Website (banner, logo, …)
Quảng bá
Các chương trình hỗ trợ thiết kế typography:
Photoshop
Illustrator
Flash
…
Phạm vi ứng dụng:
In ấn (poster, quảng cáo)
Website (banner, logo, …)
Quảng bá
Các chương trình hỗ trợ thiết kế typography:
Photoshop
Illustrator
Flash
…
Slide 3 - Tổng quan về Typography 8

9. TYPOGRAPHY VỚI THIẾT KẾ GRAPHIC
Banner/ Website
Slide 3 - Tổng quan về Typography 9
Quảng cáo

10. TYPOGRAPHY TRÊN WEB
http://joe.vn/

11. TYPOGRAPHY TRÊN WEB
Mục đích sử dụng typography trên web:
Trình bày nội dung rõ ràng tới người đọc
Tạo ấn tượng mạnh tới người duyệt web
Tạo thẩm mỹ cho trang web
Hạn chế của web typography:
Lựa chọn font bị hạn chế
Khi mỗi cột văn bản bị thu hẹp thì nội dung được
trình bày không thẩm mỹ
Kiểm soát khoảng cách các chữ (kerning)
Kích cỡ, độ phân giải màn hình
Mục đích sử dụng typography trên web:
Trình bày nội dung rõ ràng tới người đọc
Tạo ấn tượng mạnh tới người duyệt web
Tạo thẩm mỹ cho trang web
Hạn chế của web typography:
Lựa chọn font bị hạn chế
Khi mỗi cột văn bản bị thu hẹp thì nội dung được
trình bày không thẩm mỹ
Kiểm soát khoảng cách các chữ (kerning)
Kích cỡ, độ phân giải màn hình
Slide 3 - Tổng quan về Typography 11
http://dev.opera.com/articles/view/11-typography-on-the-web/

12. TYPOGRAPHY TRÊN WEB
Lựa chọn font bị hạn chế:
Có thể cài đặt bất kì font nào trong CSS
Đối với người xem:
• Chỉ xem được văn bản sử dụng font nào được cài đặt
sẵn trên máy tính
• Nếu như trên máy tính không có sẵn font đó trình
duyệt sẽ sử dụng font được chỉ định thay thế, đã được
định nghĩa trong CSS
Lựa chọn font bị hạn chế:
Có thể cài đặt bất kì font nào trong CSS
Đối với người xem:
• Chỉ xem được văn bản sử dụng font nào được cài đặt
sẵn trên máy tính
• Nếu như trên máy tính không có sẵn font đó trình
duyệt sẽ sử dụng font được chỉ định thay thế, đã được
định nghĩa trong CSS
Slide 3 - Tổng quan về Typography 12
font-family: Georgia, "Times New Roman", Times, serif
Thứ tự ưu tiên sử dụng font

13. TYPOGRAPHY TRÊN WEB
Lựa chọn font bị hạn chế:
Nhà thiết kế web thường hạn chế mình trong những
font phổ biến có trong hệ thống:
Lựa chọn font bị hạn chế:
Nhà thiết kế web thường hạn chế mình trong những
font phổ biến có trong hệ thống:
Slide 3 - Tổng quan về Typography 13

14. TYPOGRAPHY TRÊN WEB
Sự căn chỉnh:
Vấn đề được nói đến là việc căn chỉnh/ sắp xếp văn
bản trên trang web
Có 4 cách để căn chỉnh văn bản:
• Căn trái
• Căn phải
• Căn giữa
• Căn đều (justify)
Sự căn chỉnh:
Vấn đề được nói đến là việc căn chỉnh/ sắp xếp văn
bản trên trang web
Có 4 cách để căn chỉnh văn bản:
• Căn trái
• Căn phải
• Căn giữa
• Căn đều (justify)
Slide 3 - Tổng quan về Typography 14
justify

15. TYPOGRAPHY TRÊN WEB
Kiểm soát khoảng cách các chữ (kerning):
Đây là quá trình điều chỉnh khoảng cách giữa các cặp ký
tự của chữ cái
Kiểm soát khoảng cách các chữ (kerning):
Đây là quá trình điều chỉnh khoảng cách giữa các cặp ký
tự của chữ cái
Slide 3 - Tổng quan về Typography 15

16. TYPOGRAPHY TRÊN WEB
Thiếu kiểm soát:
Website không nhằm phục vụ in ấn
Người duyệt web có thể sử dụng nhiều thiết bị trong
nhiều môi trường khác nhau để xem trang web:
• Trên thiết bị di động
• Tăng kích cỡ font …
Tất cả những việc bạn làm đó là định kiểu cho văn bản
trên web, cung cấp một hướng dẫn cho tất cả các thiết
bị duyệt web khác nhau
Thiếu kiểm soát:
Website không nhằm phục vụ in ấn
Người duyệt web có thể sử dụng nhiều thiết bị trong
nhiều môi trường khác nhau để xem trang web:
• Trên thiết bị di động
• Tăng kích cỡ font …
Tất cả những việc bạn làm đó là định kiểu cho văn bản
trên web, cung cấp một hướng dẫn cho tất cả các thiết
bị duyệt web khác nhau
Slide 3 - Tổng quan về Typography 16

17. TYPOGRAPHY TRÊN WEB
Cách tạo typography trên web:
Được điều khiển bởi CSS (kích thước, màu sắc, kiểu
chữ, kích thước dòng, khoảng cách ký tự, …)
Bằng cách tạo các khối văn bản,
có thể điều khiển được việc căn lề
và chỉnh kích thước dòng cho toàn
khối
Cách tạo typography trên web:
Được điều khiển bởi CSS (kích thước, màu sắc, kiểu
chữ, kích thước dòng, khoảng cách ký tự, …)
Bằng cách tạo các khối văn bản,
có thể điều khiển được việc căn lề
và chỉnh kích thước dòng cho toàn
khối
Slide 3 - Tổng quan về Typography 17
http://dev.opera.com/articles/view/11-typography-on-
the-web/

18. TYPOGRAPHY TRÊN WEB
Slide 3 - Tổng quan về Typography 18

19. TYPOGRAPHY TRÊN WEB
Dùng các font phổ biến để trình bày nội dung trên
trang web:
Font serif: font có chân (Georgia, Time New
Roman), thường được sử dụng cho dòng tiêu đề
Font sans-serif: font không chân (Arial, Vernada,
Tahoma), thường được sử dụng cho phần nội dung
Dùng các font phổ biến để trình bày nội dung trên
trang web:
Font serif: font có chân (Georgia, Time New
Roman), thường được sử dụng cho dòng tiêu đề
Font sans-serif: font không chân (Arial, Vernada,
Tahoma), thường được sử dụng cho phần nội dung
Slide 3 - Tổng quan về Typography 19
Tỷ lệ sử dụng giữa font có
chân và không chân
(Tạp chí smallshing)

20. TYPOGRAPHY TRÊN WEB
Kết hợp kích thước, màu sắc cho font chữ
Áp dụng các mảng sáng, tối, màu sắc, bố cục trên
trang web để tạo độ tương phản, điểm nhấn
Có thể sử dụng javascript để tạo thêm hiệu ứng cho
nội dung
Slide 3 - Tổng quan về Typography 20

21. SỰ KHÁC BIỆT
Sự khác biệt giữa typography của graphic design và
web design:
Web typography Graphic typography
Sử dụng các kỹ thuật CSS/HTML Không sử dụng
Độ phân giải bình thường từ
85dpi hoặc thấp hơn
Độ phân giải từ 1200dpi hoặc cao
hơn
Slide 3 - Tổng quan về Typography 21
Độ phân giải bình thường từ
85dpi hoặc thấp hơn
Độ phân giải từ 1200dpi hoặc cao
hơn
Nhiều cột nội dung giúp người
đọc duyệt tốt hơn trên màn hình
Cột có thể làm người đọc khó
theo dõi

22. KHÁI NIỆM CHỐNG RĂNG CƯA
Slide 3 - Tổng quan về Typography 22

23. KHÁI NIỆM CHỐNG RĂNG CƯA
Printed Typography: là kiểu chữ in ấn hiển thị với độ
phân giải cao DPI, hiển thị được những đường cong
đẹp và tinh tế.
PPI Monitor: là kiểu hiển thị trên màn hình máy tính
với độ phân giải thấp hơn so với kiểu hiển thị in ấn.
Chống răng cưa: là điều tốt nhất cho việc hiển thị
trên màn hình ở độ phân giải cao hơn nhằm giúp
văn bản hiển thị sắc nét, rõ ràng.
Việc chống răng cưa là vô cùng quan trọng
Printed Typography: là kiểu chữ in ấn hiển thị với độ
phân giải cao DPI, hiển thị được những đường cong
đẹp và tinh tế.
PPI Monitor: là kiểu hiển thị trên màn hình máy tính
với độ phân giải thấp hơn so với kiểu hiển thị in ấn.
Chống răng cưa: là điều tốt nhất cho việc hiển thị
trên màn hình ở độ phân giải cao hơn nhằm giúp
văn bản hiển thị sắc nét, rõ ràng.
Việc chống răng cưa là vô cùng quan trọng
Slide 3 - Tổng quan về Typography 23

24. KHÁI NIỆM CHỐNG RĂNG CƯA
Slide 3 - Tổng quan về Typography 24

25. KHÁI NIỆM CHỐNG RĂNG CƯA
Các kiểu định dạng văn bản cơ bản:
- HTML Text: chiếm phần lớn các văn bản được tìm
thấy trên trang web.
- font-smooth: kiểu font mịn
Slide 3 - Tổng quan về Typography 25

26. KHÁI NIỆM CHỐNG RĂNG CƯA
@font-face: là một kiểu nhúng font với tính năng mới
thú vị của CSS3, cho phép các trình duyệt nhập vào
một Font chữ từ URL.
Slide 3 - Tổng quan về Typography 26

27. KHÁI NIỆM CHỐNG RĂNG CƯA
Text as Image: là dạng văn bản dạng hình ảnh bằng
cách sử dụng tùy chọn Free Transform để di chuyển
các vị trí lớp và thường được thiết lập theo thông số
có sẵn
Slide 3 - Tổng quan về Typography 27

28. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ

29. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Họ font Helvetica Neue: sử dụng để thể hiện một
loạt các tiếng nói và cảm xúc linh hoạt và thoải mái
Slide 3 - Tổng quan về Typography 29

30. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Grouping Fonts: Kiểu chữ có thể được chia và
phân chia thành hàng chục loại
Slide 3 - Tổng quan về Typography 30

31. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Geometric Sans:Kiểu chữ dựa trên các hình thức
hình học nghiêm ngặt.
• Helvetica
• Univers
• Futura
• Avant Garde
• Akzidenz Grotesk
• Franklin Gothic
• Gotham
Slide 3 - Tổng quan về Typography 31
Geometric Sans:Kiểu chữ dựa trên các hình thức
hình học nghiêm ngặt.
• Helvetica
• Univers
• Futura
• Avant Garde
• Akzidenz Grotesk
• Franklin Gothic
• Gotham

32. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Humanist Sans: Kiểu chữ có nguồn gốc từ chữ
viết và có kiểu dáng hiện đại.
• Gill Sans
• Frutiger
• Myriad
• Optima
• Verdana
Slide 3 - Tổng quan về Typography 32
Humanist Sans: Kiểu chữ có nguồn gốc từ chữ
viết và có kiểu dáng hiện đại.
• Gill Sans
• Frutiger
• Myriad
• Optima
• Verdana

33. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Humanist Sans: Kiểu chữ lâu đời nhất cổ điển,
truyền thống
• Jenson
• Bembo
• Palatino
• Garamond
Slide 3 - Tổng quan về Typography 33
Humanist Sans: Kiểu chữ lâu đời nhất cổ điển,
truyền thống
• Jenson
• Bembo
• Palatino
• Garamond

34. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Transitional and Modern: Kiểu chữ chuyển tiếp
từ truyền thống đến hiện đại
• Times New Roman
• Baskerville
• Bodoni
• Didot
Slide 3 - Tổng quan về Typography 34
Transitional and Modern: Kiểu chữ chuyển tiếp
từ truyền thống đến hiện đại
• Times New Roman
• Baskerville
• Bodoni
• Didot

35. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Slide 3 - Tổng quan về Typography 35

36. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Humanist Sans: Kiểu chữ hoang dã, mạnh mẽ
• Clarendon, Rockwell
• Courier
• Lubalin Graph
• Archer
Slide 3 - Tổng quan về Typography 36

37. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
The Principle of Decisive Contrast (nguyên tắc
tương phản): Đây là một nguyên tắc chung về thiết
kế.
Slide 3 - Tổng quan về Typography 37
The Principle of Decisive Contrast (nguyên tắc
tương phản): Đây là một nguyên tắc chung về thiết
kế.

38. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Sự kết hợp một họ font cùng với Helvetica tạo ra
phong cách cổ điển và có độ tương phản mạnh.
Slide 3 - Tổng quan về Typography 38

39. NGUYÊN TẮC CHỌN VÀ SỬ DỤNG KIỂU CHỮ
Hai kiểu chữ kết hợp tốt với nhau nếu có một điểm
chung.
Slide 3 - Tổng quan về Typography 39

40. TỔNG KẾT
Typography là sự kết hợp của font, kiểu chữ, màu
sắc, bố cục… nhằm truyền đạt nội dung một cách
ấn tượng nhất đến với người xem
2 trường phái Typography:
Typography dành cho thiết kế hình ảnh
Typography dành cho thiết kế web
Nguyên liệu tạo nên typography:
Font chữ
Kiểu chữ
Màu sắc, độ tương phản, bố cục mảng màu …
Typography là sự kết hợp của font, kiểu chữ, màu
sắc, bố cục… nhằm truyền đạt nội dung một cách
ấn tượng nhất đến với người xem
2 trường phái Typography:
Typography dành cho thiết kế hình ảnh
Typography dành cho thiết kế web
Nguyên liệu tạo nên typography:
Font chữ
Kiểu chữ
Màu sắc, độ tương phản, bố cục mảng màu …
Slide 3 - Tổng quan về Typography 40