bÀi 6 những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong...
DESCRIPTION
Khái niệm hướng mắt của người duyệt web Weight (trọng lượng) Italic & oblique Các style trang trí Văn bản in hoa in thường Màu sắc Kiểu chữ Khái niệm hướng mắt của người duyệt web Weight (trọng lượng) Italic & oblique Các style trang trí Văn bản in hoa in thường Màu sắc Kiểu chữTRANSCRIPT
BÀI 6NHỮNG YẾU TỐ: TỶ LỆ, NHỊP ĐIỆU, NHẤN
MẠNH VÀ TƯƠNG PHẢN TRONG TYPOGRAPHY
NHẮC LẠI BÀI TRƯỚC
Tổng quan về việc sử dụng font trên web:Lựa chọn fontPhân loại font family trong CSSĐịnh rõ kiểu chữ với CSS
Web font an toàn ( web safe font)Liên kết font webDịch vụ liên kết font web văn phòngNhúng font web với javascriptNhững giải pháp để sử dụng font trên web
Tổng quan về việc sử dụng font trên web:Lựa chọn fontPhân loại font family trong CSSĐịnh rõ kiểu chữ với CSS
Web font an toàn ( web safe font)Liên kết font webDịch vụ liên kết font web văn phòngNhúng font web với javascriptNhững giải pháp để sử dụng font trên web
Slide 6 - Scale & Rhythm - Emphasis & Contrast 2
MỤC TIÊU BÀI HỌC
Khái niệm hướng mắt của người duyệt webWeight (trọng lượng)Italic & obliqueCác style trang tríVăn bản in hoa in thườngMàu sắcKiểu chữ
Khái niệm hướng mắt của người duyệt webWeight (trọng lượng)Italic & obliqueCác style trang tríVăn bản in hoa in thườngMàu sắcKiểu chữ
Slide 6 - Scale & Rhythm - Emphasis & Contrast 3
HƯỚNG MẮT NGƯỜI DUYỆT WEB
HƯỚNG MẮT NGƯỜI DUYỆT WEB
Mục đích của type nhằm miêu tả ngôn ngữ chữ viết,thuận tiện hơn cho việc đọc của người xemKhả năng đọc lướt là một nhân tố quan trọng trongweb typography, giống như nhân tố dễ đọcTypography giống như việc thiết kế từng thành phần
Slide 4 - Emphasis & Contrast 5
http://raygun.com/
HƯỚNG MẮT NGƯỜI DUYỆT WEB
Những nhân tố dễ đọc (readability), rõ ràng(legibility), khả năng đọc lướt (scannability):
Legibility: Chữ được thiết kế tốt và dễ dàng phân biệt.Đây là trách nhiệm của nhà thiết kế chữ.Readability: là trách nhiệm của người thiết kếtypography, chữ phải được bố trí dễ dàng cho việcđọcScannability: chữ phải được dễ dàng bao quát nhằmtruyền tải thông tin thích hợp cho người đọc
Những nhân tố dễ đọc (readability), rõ ràng(legibility), khả năng đọc lướt (scannability):
Legibility: Chữ được thiết kế tốt và dễ dàng phân biệt.Đây là trách nhiệm của nhà thiết kế chữ.Readability: là trách nhiệm của người thiết kếtypography, chữ phải được bố trí dễ dàng cho việcđọcScannability: chữ phải được dễ dàng bao quát nhằmtruyền tải thông tin thích hợp cho người đọc
Slide 4 - Emphasis & Contrast 6
WEIGHT
WEIGHT
Typeface (kiểu chữ) thường được ẩn chứa nhiềutrọng lượng đa dạng, từ thin (mỏng) tới heavy (dày)Có nhiều hơn một kiểu in đậm (bold), nhưng khôngphải tất cả luôn có sẵn:
Trọng lượng chữ được quy định cụ thể hoặc là bold(darker) hoặc normal (regular)Opentype font, có thể thay đổi trọng lượng từ 100-900
Typeface (kiểu chữ) thường được ẩn chứa nhiềutrọng lượng đa dạng, từ thin (mỏng) tới heavy (dày)Có nhiều hơn một kiểu in đậm (bold), nhưng khôngphải tất cả luôn có sẵn:
Trọng lượng chữ được quy định cụ thể hoặc là bold(darker) hoặc normal (regular)Opentype font, có thể thay đổi trọng lượng từ 100-900
Slide 4 - Emphasis & Contrast 8
font-weight: bold;font-weight: 200;font-weight: lighter;
WEIGHT
Trọng lượng luôn luôn được tổng hợp bởi trìnhduyệt
Slide 4 - Emphasis & Contrast 9
WEIGHT
Làm chữ kiểu dày để tạo tác động mạnh, nhưng sựlạm dụng có thể khiến mắt người xem phải dichuyển nhiều trong trang Web mà không có sự tậptrung nhất định
Không nên tin tưởng vào kiểu dáng mặc địnhKết hợp kiểu in đậm với kích thước và màu sắc đểlàm mượt hiệu ứng in đậmGiảm nhẹ sự nhấn mạnh
Làm chữ kiểu dày để tạo tác động mạnh, nhưng sựlạm dụng có thể khiến mắt người xem phải dichuyển nhiều trong trang Web mà không có sự tậptrung nhất định
Không nên tin tưởng vào kiểu dáng mặc địnhKết hợp kiểu in đậm với kích thước và màu sắc đểlàm mượt hiệu ứng in đậmGiảm nhẹ sự nhấn mạnh
Slide 4 - Emphasis & Contrast 10
http://seedmagazine.com/
ITALIC & OBLIQUE
ITALIC & OBLIQUE
Trong CSS, font style được tham chiếu tới kiểu chodù kiểu chữ sử dụng là kiểu italic hay obliqueOblique không phải là italic, nhưng chúng thườngđược dùng cùng ý nghĩafont-style: italic;font-style: oblique;
Trong CSS, font style được tham chiếu tới kiểu chodù kiểu chữ sử dụng là kiểu italic hay obliqueOblique không phải là italic, nhưng chúng thườngđược dùng cùng ý nghĩa
Slide 4 - Emphasis & Contrast 12
font-style: italic;font-style: oblique;
ITALIC & OBLIQUE
Thêm nhấn mạnh để làm nổi bật các khái niệmquan trọng và ý tưởng:
Tiêu đề sáchThuật ngữ quan trọngKhối trích dẫnSiêu liên kết văn bản
Thêm nhấn mạnh để làm nổi bật các khái niệmquan trọng và ý tưởng:
Tiêu đề sáchThuật ngữ quan trọngKhối trích dẫnSiêu liên kết văn bản
Slide 4 - Emphasis & Contrast 13
CÁC STYLE TRANG TRÍ
CÁC STYLE TRANG TRÍ
Không giống kiểu typography khác, kiểu trang trívăn bản không làm thay đổi các ký tự riêng lẻKhông sử dụng underline để tạo đường gạch châncho linka {text-decoration: none;}
Slide 4 - Emphasis & Contrast 15
CÁC STYLE TRANG TRÍ
Sử dụng nét gạch giữa chữ để biểu thị cho đoạn vănbản bị xóa.deletetext { text-decoration: line-though;}
Sử dụng nét gạch giữa chữ để biểu thị cho đoạn vănbản bị xóa
Slide 4 - Emphasis & Contrast 16
CÁC STYLE TRANG TRÍ
Tạo bóng đổ để thêm chiều sâu cho văn bản, nhưngkhông phụ thuộc vào hiệu ứng này để truyền đạtthông tin
text-shadow: -2px 2px 10px rgb(0,0,0);
Tạo bóng đổ để thêm chiều sâu cho văn bản, nhưngkhông phụ thuộc vào hiệu ứng này để truyền đạtthông tin
Slide 4 - Emphasis & Contrast 17
text-shadow:0 0 10px rgba(0,255,0,.5),-10px 5px 4px rgba (0,0,255,.45),15px -4px 3px rgba(255,0,0,.75),
CÁC STYLE TRANG TRÍ
Thay đổi độ mờ tới các trạng thái khác nhau củamàu sắc văn bản với màu nền:
Trong suốt của văn bản là tốt nhất khi sử dụng địnhdạng RGBAopacity: sử dụng cho IEfilter:alpha (): sử dụng cho các trình duyệt khác2 lệnh này tương đương nhau
Thay đổi độ mờ tới các trạng thái khác nhau củamàu sắc văn bản với màu nền:
Trong suốt của văn bản là tốt nhất khi sử dụng địnhdạng RGBAopacity: sử dụng cho IEfilter:alpha (): sử dụng cho các trình duyệt khác2 lệnh này tương đương nhau
Slide 4 - Emphasis & Contrast 18
em { opacity: .75; filter: alpha(75);}
Em:hover { opacity: 100; filter: alpha(100);}
VĂN BẢN IN HOA IN THƯỜNG
VĂN BẢN IN HOA IN THƯỜNG
Văn bản có thể sử dụng chính xác cho nhiều trườnghợp bởi hệ thống, nhưng sẽ có lúc bạn không chắcchắn trường hợp văn bản được sử dụngThiết lập tiêu đề văn bản nếu cần thiết:
Sử dụng thuộc tính text-transform để chuyển đổi từdạng in thường thành dạng in hoa
Văn bản có thể sử dụng chính xác cho nhiều trườnghợp bởi hệ thống, nhưng sẽ có lúc bạn không chắcchắn trường hợp văn bản được sử dụngThiết lập tiêu đề văn bản nếu cần thiết:
Sử dụng thuộc tính text-transform để chuyển đổi từdạng in thường thành dạng in hoa
Slide 4 - Emphasis & Contrast 20
text-transform: capitalize;
Tự động viết hoa ký từ đầu tiên
VĂN BẢN IN HOA IN THƯỜNG
Sử dụng chữ hoa dạng nhỏ để nhấn mạnh nhữngđoạn đặc biệt:
Là ý tưởng tuyệt vời để làm nới lỏng khoảng cách kýtự
font-variant: small-caps; text-spacing: .05em;
Slide 4 - Emphasis & Contrast 21
MÀU SẮC
MÀU SẮC
Phản ứng cơ bản nhất là phản ứng về màu sắcKết hợp màu sắc với một loạt thay đổi cảm giác vàkhái niệm, bao gồm: tôn giáo, văn hóa, chính trị, xãhội, tình cảm và khoa họcThách thức của các nhà thiết kế ở mọi cấp độ khôngchỉ biết kết hộp màu sắc tốt nhất, mà còn biết hạnchế màu sắc
Phản ứng cơ bản nhất là phản ứng về màu sắcKết hợp màu sắc với một loạt thay đổi cảm giác vàkhái niệm, bao gồm: tôn giáo, văn hóa, chính trị, xãhội, tình cảm và khoa họcThách thức của các nhà thiết kế ở mọi cấp độ khôngchỉ biết kết hộp màu sắc tốt nhất, mà còn biết hạnchế màu sắc
Slide 4 - Emphasis & Contrast 23
MÀU SẮC
Giá trị màu sắc:Hiển thị trên màn hình là một loạt màu sắc theo kiểudot, pixelGiá trị màu pixel định nghĩa giống kiểu kết hợp màured, green, blue
Slide 4 - Emphasis & Contrast 24
MÀU SẮC
Trong web typography, màu sắc có thể được đặt tại4 vị trí:
Màu sắc làm ảnh hưởng tới màu chữ
Màu nền:• Định màu sắc màu nền trang hoặc màu nền thành
phần thiết kế• Có thể được nhúng cả hình ảnh (đơn màu, màu ngẫu
nhiên)
color: rgb(204,51,255);
Trong web typography, màu sắc có thể được đặt tại4 vị trí:
Màu sắc làm ảnh hưởng tới màu chữ
Màu nền:• Định màu sắc màu nền trang hoặc màu nền thành
phần thiết kế• Có thể được nhúng cả hình ảnh (đơn màu, màu ngẫu
nhiên)
Slide 4 - Emphasis & Contrast 25
background-color: rgb(204,51,255);
MÀU SẮC
Đường viền: có chứa cả các giá trị màu sắc
Chữ bóng đổ:
border: 1px solid rgb(204,51,255);
Slide 4 - Emphasis & Contrast 26
text-shadow: -2px 2px 10px rgb(204,51,255)
MÀU SẮC
Một vài phương thức kết hợp màu sắc để làm việcnhất quánCó thể nhận dạng màu sắc bằng vị trí trên bánh xemàu:
Analogous: kết hợp màu sắc với màu sắc liền kềMonochromatic: màu đơn với cường độ và độ sángkhác nhau
Một vài phương thức kết hợp màu sắc để làm việcnhất quánCó thể nhận dạng màu sắc bằng vị trí trên bánh xemàu:
Analogous: kết hợp màu sắc với màu sắc liền kềMonochromatic: màu đơn với cường độ và độ sángkhác nhau
Slide 4 - Emphasis & Contrast 27
MÀU SẮC
Triad: ba màu và tông màu của chúng, trên 3 đỉnhriêng biệt của tam giác trên bánh xe màuComplementary: hai màu sắc từ các bên đối diệnnhau trên bánh xe màu, khi kết hợp sẽ cung cấp độtương phản cao nhất
Slide 4 - Emphasis & Contrast 28
MÀU SẮC
Shades: nhiều độ sáng của các màu đồng màu
Slide 4 - Emphasis & Contrast 29
MÀU SẮC
Chú ý cẩn thận xem xét độ tương phản giữa màutiền cảnh (foreground) và màu nền (background):
Hạ bớt độ tương phản của văn bản để làm mượt tôngmàu trang web
Slide 4 - Emphasis & Contrast 30
MÀU SẮC
Sử dụng độ tương phản thấp cho màu chữ để giảmnhẹ các thành phần: menu, bài viết, ngày và cácthông tin không quan trọng
Slide 4 - Emphasis & Contrast 31
MÀU SẮC
Sử dụng hình nền với độ tương phản cao
Slide 4 - Emphasis & Contrast 32
TỔNG KẾT
Khi thiết kế web cần thiết phải chú ý tới hướng mắtngười duyệt web. Nên đáp ứng được những yếu tốsau: tính dễ đọc (readability), sự rõ ràng (legibility),khả năng đọc lướt (scannability)Trọng lượng chữ được quy định cụ thể hoặc là bold(darker) hoặc normal (regular). Font Opentype, cóthể thay đổi trọng lượng từ 100-900Kiểu trang trí văn bản không làm thay đổi các ký tựriêng lẻÁp dụng những kiểu pha màu để thiết kế web mộtcách hài hòa: Analogous, Monochromatic, Triad,Complementary, Shades
Khi thiết kế web cần thiết phải chú ý tới hướng mắtngười duyệt web. Nên đáp ứng được những yếu tốsau: tính dễ đọc (readability), sự rõ ràng (legibility),khả năng đọc lướt (scannability)Trọng lượng chữ được quy định cụ thể hoặc là bold(darker) hoặc normal (regular). Font Opentype, cóthể thay đổi trọng lượng từ 100-900Kiểu trang trí văn bản không làm thay đổi các ký tựriêng lẻÁp dụng những kiểu pha màu để thiết kế web mộtcách hài hòa: Analogous, Monochromatic, Triad,Complementary, Shades
Slide 4 - Emphasis & Contrast 33