Chào mừng bạn đã đến với diễn đàn Designer Việt Nam, hãy đăng ký thành viên để có thể dễ dàng cùng nhau trau dồi kiến thức đồ họa nhé!

[Tips] Các yếu tố cơ bản về sử dụng Typography trên thiết kế Website

Chủ đề thuộc danh mục 'Thảo luận' được đăng bởi rongtihon, 25/8/12.

  1. rongtihon Thành viên cấp 1

    TYPOGRAPHY TRONG THIẾT KẾ WEBSITE

    [IMG]

    Đôi lúc những chi tiết nhỏ nhặt lại tạo được những tác động rất lớn cho website của bạn. Typography là 1 ví dụ rất hay trong những chi tiết ấy. Typography còn là 1 trong những phương pháp được chú trong sử dụng rất nhiều trong phần lớn website hiện nay. Thậm chí nếu phần layout và hình ảnh của bạn rất đẹp, nhưng bạn mắc một lỗi nào đấy trong typography thì toàn bộ thiết kế coi như thất bại - không thu hút và khó đọc là ví dụ.

    Có rất nhiều phương pháp và "chiêu trò" mà bạn có thể áp dụng để làm website nhìn đẹp và thu hút hơn. Sau đây tôi sẽ giới thiệu đến các bạn 1 vài yếu tố mà nếu áp dụng tốt bạn có thể cải thiện tối đa hiệu quả trong việc thu hút người xem.
    FONT ĐƠN GIẢN


    [IMG]

    1 trong các lỗi sơ đẳng của những designer thiếu kinh nghiệm là dùng font quá cầu kì, hoặc font viết tay (script) trên trang web thiết kế. Font viết tay có thể rất đẹp trong 1 vài trường hợp, nhưng không phải ý kiến hay nếu bạn ÉP người dùng phải đọc những thứ ngoằn ngoèo như thế trong những đoạn văn bản dài. Hãy dùng font 1 cách hợp lí, quan trong là giữ cho font chữ của bạn rõ ràng, đơn giản, sạch và dễ đọc.

    MÀU
    [IMG]

    Như đã đề cập, font chữ trên trang web thiết kế phải dễ đọc và "ngon mắt". Mặc dù rất nhiều designer học việc cố gắng làm cho trang web của mình trở nên bắt mắt, thu hút hơn bằng cách dùng những combo màu quá loè loẹt và "độc nhất vô nhị", hậu quả là thường gây nhức đầu cho người dùng. Hoặc phần chữ nội dung không tương phản đủ với màu background, quá sáng hoặc quá tối sẽ gây nhức mắt và khó đọc cho người xem. Nói chung, font chữ nội dung trên trang web thường nên dùng màu đen hoặc xám sậm trên nền trắng hoặc nền màu sáng, và chữ trắng trên nền đen thì nên tránh trong hầu hết trường hợp.

    CÓ CHÂN vs. KHÔNG CHÂN (SERIF vs. SANS- SERIF)


    [IMG]
    Font chữ có chân (serif) có 1 phần nhô ra nhỏ ở phần cuối của mỗi ký tự - nói gọn là có chân nghĩa đen, trong khi font chữ không chân (sans serif) thì không. Ví dụ đơn giản nhất là: Times New RomanGeorgia, Verdana Arial. Font có chân (serif) thường dùng cho thứ gì đó mang vẻ cổ điển, văn học, nhưng không phải là tốt nhất khi ứng dụng cho web. Font không chân (sans serif), ở khía cạnh khác, không chỉ tạo cho trang web cảm giác sạch, hiện đại, mà còn dễ đọc hơn rất nhiều trên màn hình máy tính có độ sáng rất lớn hiện nay.

    DẤU NGOẶC KÉP --> " (QUOTATION MARKS)


    [IMG]
    Dấu ngoặc kép thẳng thì thường đi chung với font chữ không chân (sans serif). Tuy nhiên, dấu ngoặc kép cong thì mang lại hiệu quả tốt hơn nhiều về thẩm mỹ, dễ nhìn hơn, và giúp người đọc theo dõi những đoạn trích dẫn trôi chảy hơn. Để tạo dấu ngoặc kép cong, bấm %ldquo&rdquo để đóng ngoặc khi chỉnh sửa với html. Các bạn có thể cho nó là chi tiết nhỏ nhặt, nhưng nó mang lại hiệu quả rất tốt.

    KHOẢNG CÁCH DÒNG

    1 trong những chi tiết quan trọng, khoảng cách dòng là số lượng khoảng trắng giữa mỗi dòng trong đoạn văn bản. Khoảng cách dòng không đủ sẽ làm cho đoạn văn bản trên trang web trở nên dính chùm và rất rối mắt khi đọc. Để làm cho trang web của bạn dễ đọc hơn, hiệu chỉnh nó vào khoảng 120% - 150%. Những font chữ khác nhau sẽ có khoảng cách dòng khác nhau, bạn cần thực tập để hiệu chỉnh khoảng cách dòng thật nhiều cho đến khi nó hoàn hảo.

    Chia nhỏ các đoạn văn bản trên trang web của bạn để tạo nên nhiều khoảng trống sẽ dễ đọc hơn nhưng đừng chia nhỏ quá nhé.

    KERNING


    Kerning là khoảng trống giữa 2 ký tự liền kề nhau. 1 vài font chữ cho phép bạn kiểm soát kerning, nhưng phần quan trọng nhất là bạn tự áp dụng nó cho riêng mình, đại khái là dùng Photoshop và hiệu chỉnh dưới dạng hình ảnh .jpeg thì tốt hơn là gõ trực tiếp từ bàn phím.

    Nếu kerning quá rộng, nó làm cho đoạn văn bản trở nên quá rời rạc và bị xé nhỏ. Giảm kerning lại sẽ làm cho các ký tự có phần nhô ra mở rộng ở đỉnh (như chữ V hay T) trở nên chặt chẽ hơn với các ký tự ở dưới.


    [IMG]

    Dịch bởi rongtihon
    Nguồn: designrfix
    sayhello, banbaonylong, Phạm Hữu Dư3 người khác thích bài viết này.
  2. Phạm Hữu Dư Thành viên cấp 3

    Rất hoan nghênh những bài viết chất lượng như thế này :)
    rongtihon thích bài viết này
  3. cusuhao8686 Thành viên cấp 1

  4. cusuhao8686 Thành viên cấp 1

  5. cusuhao8686 Thành viên cấp 1

  6. cusuhao8686 Thành viên cấp 1

  7. cusuhao8686 Thành viên cấp 1

  8. cusuhao8686 Thành viên cấp 1

  9. cusuhao8686 Thành viên cấp 1

  10. cusuhao8686 Thành viên cấp 1

  11. cusuhao8686 Thành viên cấp 1

  12. cusuhao8686 Thành viên cấp 1

Ủng hộ bài viết này