10 quy luật bất biến về TYPOGRAPHY trong thiết kế website

07/04/2017 08:58:00 2301

10 quy luật bất biến về TYPOGRAPHY trong thiết kế website
Mục lục

Vì vậy, trong thiết kế website thì typoraphy cũng có những quy luật hay nguyên tắc trong thiết kế nhằm đảm bảo sự hài hòa và tính tính thẩm mỹ so với tổng thể của một website.

Những nguyên tắc này là những quy luật bất biến mà bạn nên biết để có thể đánh giá và áp dụng vào việc thiết kế những website khác.

1. Chữ là để đọc không phải để ngắm

Có một vấn đề với nhiều designer đó là họ thiết kế website theo phong cách và cảm hứng của mình. Điều này dẫn đến tình trạng là đôi khi những thiết kế web trở nên quá đà khi mà những designer biến trang web thành nơi chơi chữ và khiến người phải căng mắt và suy nghĩ xem chữ này đọc như thế nào.

Nhiều designer nghĩ rằng chữ có thể tùy biến nhằm tạo hiệu ứng nghệ thuật và ngườ sử dụng ít khi đọc hết nội dung. Nhưng họ quên mất một điều rằng, chữ trong website đóng vai trò là cầu nối giữa các phần và thể hiện nội dung chủ yếu mà mình hướng đến người xem, do đó nếu những thiết kế quá khó đọc sẽ làm mất đi tính liền mạch của một trang web.

2. Sử dụng LOREM IPSUM càng sớm càng tốt

 

 

Bạn sẽ thấy trang web này sử dụng quá nhiều chữ viết với nhiều kiểu chữ và kích cỡ khác nhau. Nếu như là một nhà thiết kế website thì khi thực hiện trang web này bạn nghĩ rằng mình sẽ làm như thế nào để có cái nhìn tổng thể về việc các chữ sẽ thay đổi ra sao với từng định dạng khác nhau như này. Chẳng nghẽ chúng ta cứ chỉ copy và past một nội dung cho tất cả các kiểu chữ để đánh giá. Làm như vậy thì vô cùng nhàm chán. Nhưng với Lorem ipsum thì các bạn không phải lo lắng về điều đó

Các bạn có thể đưa ra bản demo website với các text là Lorem ipsum cho khách hàng và chờ đợi phản hồi từ phía họ mà không lo rằng thiết kế đó không sát với thực tế sử dụng.

3. Thể hiện sự phân chia giữa các nội dung rõ ràng

Hãy cùng nhìn vào một ví dụ sau đây

 

 

Các bạn thấy rằng chúng ta có thể dễ dàng biết được rằng mình nên đọc tư đâu và nội dung gì dành cho danh mục nào. Dòng tiêu đề chào mừng của Rik Catlow thể hiện rõ ràng và đập ngay vào mắt người đọc. Dòng tiêu đề này khác hoàn toàn với tất cả những text khác như kích cỡ to nhất, in đậm, và tách biệt.

Khi các bạn thiết kế website thì phải nhớ rằng một website tiêu chuẩn và chất lượngthì các phân chia nội dung phải rõ ràng, có tính dẫn dắt người xem. Những nội dung khác nhau phải chia tách nhau bằng tiêu đề và khoảng cách phù hợp.

4. Chú ý đền hai vấn đề là tổng thể và chi tiết của typography.

 

 

Tổng thể ( macro): là những vấn đề tổng thể của typopraphy như font chữ, màu sắc và hình ảnh tổng thể của các dòng text cho so với không gian chung của website.

Chi tiết (Micro): là những chi tiết nhỏ hơn như kích thước, khoảng cách giữa các chữ, khoảng cách giữa các dòng.

Cả hai yếu tố này đóng góp cực kỳ quan trọng vào một thiết kế website đẹp.

Như trong ví dụ ở trên, tất cả các yếu tố macro và micro phối hợp hài hòa đã làm mất đi bất lợi khi kết hợp hai font chữ lớn và nhỏ trong cùng một văn bản.

5. Hãy cẩn thận với màu sắc

 

 

Màu nền của những thiết kế web sẽ rất dễ khiến cho không thể đọc được các dòng text. Những màu sắc rất dễ khiến cho người xem mỏi mắt và khiến họ chỉ muốn tắt website đó càng nhanh càng tốt.

6. Hiểu thêm biết về CSS

Các trang con trong một website có thể được thiết kế khác nhau tùy thuộc vào tính năng sử dụng của chúng. Vì vậy, có thể dẫn đến việc thay đổi về màu sắc hay kích thước của các dòng chữ tại mỗi trang. CSS có thể giúp giải quyết vấn đề này một cách dễ dàng. Hãy xem ví dụ dưới đây.

 

 

Tuy nhiên, hãy nhớ CSS có thể cung cấp sự ổn định chung cho toàn bộ trang web vì vậy, các bạn không nên đưa ra những thiết lập khác theo từng trang con. Sự thay đổi nhỏ có thể sẽ gây ra lỗi cho toàn hệ thống. Vì vậy hãy duy gì một dạng typography gồm kích thước hay font chữ cho toàn website của bạn.

7. Lựa chọn những văn bản làm trung tâm

Một trang web nên lựa chọn một văn bản hoặc 1 dòng nào đó làm trung tâm và truyền đạt những yếu tố cốt lõi. Hãy xem thiết kế ở dưới

 

 

Thiết kế này khiến cho người đọc cảm thấy khó khăn khi không biết đâu là chủ đề của website. Đồng thời những dòng thừa ra thụt vào của từng dòng làm cho website mất đi tính thẩm mỹ.

Thêm một điều nữa: chữ viết nên đặt sang trái thì tạo cảm giá dễ đọc hơn cho người xem trừ phi họ đọc chữ theo chiều từ phải sang.

8. Cẩn thận với những biểu tượng và ký hiệu.

Nhiều trang web được thiết kế với những biểu tượng hay ký hiệu nhằm tạo ra sự nổi bật và hấp dẫn cho website. Tuy nhiên, các bạn nên nhớ là có nhiều biểu tượng hay ký hiệu thì không thể hiện được trên website. Một sai lầm thực tế là những designer thường viết văn bản bằng file word và thêm vào đó những ký tự trên word. Nhưng khi chuyển nó lên website thì thành thảm họa. Ký tự đó website không đọc được hoặc bị biến dạng thành dạng khác.

Vì thế, nếu muốn sử dụng các biểu tượng hay ký tự của word thì hãy sử dụng HTML.

9. Có kế hoạch với trường hợp khi chữ được phóng to.

Hãy nhìn vào trường hợp này.

 

 

Bạn sẽ thấy khi font chữ được thu nhỏ và phóng to nhưng vẫn đảm bảo sự thống nhất về thiết kế và không làm website bị biến dạng. Nhiều website được mặc định cỡ chữ trong khoảng 10 đến 11 một chuẩn chung cho nhiều ngươi !. Nhưng thực tế có nhiều người muốn đọc chữ với kích thước lớn hơn như người già hoặc trẻ con thì sao? Đây là những đối tượng cần đọc chữ to và rõ ràng hơn. Đồng thời trên mỗi thiết bị truyền thông ngày này thì kích thước web và chữ cũng phải thay đổi cho phù hợp với những thiết bị có kích thước khác nhau.

10. Chữ không chân ( sans serif)

 

 

Khi trình bày văn bản trên một website thì thông thường khi muốn ngắt quãng hay làm nổi bật một ý nào đó thì chúng ta thường gạch chân chữ đó. Điều này giúp văn bản trở nên hài hòa hơn giữa các dòng.

Nhưng khi bạn thiết kế một web phẳng hình thì fon chữ không chữ (sans serif) là lựa chọn đầu tiên. Nhất là khi bạn dùng cho những dòng chữ có kích thước lớn hay đóng khung thì tốt nhất dùng sans serif.

KẾT THÚC

Thiết kế website đòi hỏi nhiều yếu tố để tạo nên một trang web đẹp và ưng ý nên bài viết này chỉ cung cấp một khía cạnh trong số những yếu tố đó. Nếu là một người thiết kế website chuyên nghiệp thì bạn không thể bỏ qua những yếu tố nêu trên. Chúc bạn thành công.

Bài viết liên quan:

Thiết kế website bất động sản cao cấp cần lưu ý điều gì?
08/08/2022 1243
Thiết kế website bất động sản cao cấp cần lưu ý điều gì?

Hãy cùng công ty thiết kế website ở hải phòng HIG phân tích tại sao công ty kinh doanh bất động sản lại cần có website? Một website bất động sản chuyên nghiệp sẽ cần có những gì? Những mẫu website bất động sản tốt nhất hiện nay do HIG thiết kế.

Công ty chuyên tạo website theo yêu cầu
25/07/2022 645
Công ty chuyên tạo website theo yêu cầu

Việc thiết kế website theo yêu cầu được xem như một phương án khá hữu ích, đối với các doanh nghiệp đang có nhu cầu quảng bá thương hiệu nhanh chóng đến các đối tượng khách hàng.

Cách chọn được đơn vị thiết kế website uy tín tại Hải Phòng
01/07/2022 696
Cách chọn được đơn vị thiết kế website uy tín tại Hải Phòng

Hiện nay có rất nhiều đơn vị cung cấp dịch vụ thiết kế website với mức giá khác nhau cho cùng một dịch vụ. Để chọn được đơn vị thiết kế website uy tín tại Hải Phòng sẽ không đơn giản nếu như bạn không có kinh nghiệm. Thế nên, các bạn đừng  bỏ qua những chia sẻ kinh nghiệm quý báu dưới đây:

Dịch vụ thiết kế website tại Hải Phòng
03/03/2022 740
Dịch vụ thiết kế website tại Hải Phòng

Công ty thiết kế website tại Hải Phòng - HIG cung cấp dịch vụ thiết kế web chuẩn SEO chuyên nghiệp giá rẻ hàng đầu Hải Phòng, với giao diện web đẹp, nhiều tính năng hỗ trợ cực tốt cho SEO website và quản trị web dễ dàng sẽ mang đến cho quý khách một website tuyệt vời.

Top 6 công ty thiết kế website tại TPHCM chuyên nghiệp
03/03/2022 814
Top 6 công ty thiết kế website tại TPHCM chuyên nghiệp

Đâu là công ty thiết kế website tại TPHCM chuyên nghiệp? Hiện nay, để tìm một công ty thiết kế web là không khó nhưng lại không dễ dàng để thấy một đơn vị uy tín thật sự. Vậy làm sao để tìm được một đơn vị làm web tốt nhất Sài Gòn? Bài viết dưới đây sẽ giúp bạn.

Thiết kế website chuyên nghiệp tại Hải Phòng
02/03/2022 856
Thiết kế website chuyên nghiệp tại Hải Phòng

Doanh nghiệp sở hữu website chuyên nghiệp, chuẩn Seo sẽ giúp quảng bá hình ảnh hiệu quả, thu hút được nhiều khách hàng tiềm năng. Và để có một website tốt thì quá trình chọn đơn vị thiết kế cũng phải chọn lọc, cẩn thận. Vì vậy, để bớt một nỗi lo, sự khó khăn trong việc lựa chọn một công ty làm web uy tín thì HIG- Đơn vị Thiết kế website chuyên nghiệp tại Hải Phòng luôn trong tư thế sẵn sàng đáp ứng mọi yêu cầu để cùng doanh nghiệp ngày càng phát triển cao và xa hơn nữa!

 

Thiết kế web Shop Thời Trang Pro Store
20/02/2022 641
Thiết kế web Shop Thời Trang Pro Store

Khách hàng tại Hải Phòng. Màu sắc chủ đạo: Trắng - Đen. Thời gian làm web: 7 ngày.

Tại sao phải đăng ký website với Bộ Công Thương?
10/02/2022 1018
Tại sao phải đăng ký website với Bộ Công Thương?

Cá nhân kinh doanh nhỏ lẻ liệu có cần thực hiện thông báo/đăng ký website với Bộ Công Thương hay không? Và nếu có thì thủ tục cần chuẩn bị và các bước đăng ký như thế nào? Hãy cùng HIG tìm hiểu qua bài viết dưới đây

Cấu trúc website cơ bản gồm những gì?
09/02/2022 957
Cấu trúc website cơ bản gồm những gì?

Để sở hữu một website chuẩn seo bạn cần hiểu qua về cấu trúc website để nếu có tìm đơn vị thiết kế web tại Hải Phòng uy tín thì cũng tránh bị mắc lừa bởi địa chỉ "đội lốt". Bài viết hôm nay, HIG sẽ giới thiệu với bạn các thành phần cơ bản cấu thành 1 web. Hy vọng sẽ giúp bạn có thêm thông tin về loại hình dịch vụ này.

Phân biệt XML và HTML trong thiết kế website
12/10/2021 1035
Phân biệt XML và HTML trong thiết kế website

Nhiều người vẫn hay lầm tưởng XML và HTML là 2 hai loại ngôn ngữ tương đồng, nhưng thực chất chúng có chức năng riêng của mình. Nếu bạn cũng đang băn khoăn về 2 loại ngôn ngữ này, thì hãy cùng theo dõi bài viết dưới đây của websitehaiphong.vn nhé!

Thiết kế web thương mại điện tử bán được nhiều hàng nhất
28/07/2021 1094
Thiết kế web thương mại điện tử bán được nhiều hàng nhất

Làm thế nào để thiết kế web thương mại điện tử bán được nhiều hàng nhất? Đọc ngay những bí quyết dưới đây!

THIẾT KẾ WEBSITE BÁN MỸ PHẨM, ĐỒ MAKE UP TRANG ĐIỂM TẠI HẢI PHÒNG GIÁ RẺ
06/07/2021 805
THIẾT KẾ WEBSITE BÁN MỸ PHẨM, ĐỒ MAKE UP TRANG ĐIỂM TẠI HẢI PHÒNG GIÁ RẺ

Bạn muốn tìm đơn vị thiết kế website bán mỹ phẩm, đồ make up trang điểm tại Hải Phòng giá rẻ, đẹp ấn tượng? HIG chính là sự lựa chọn hoàn hảo nhất.

Schema là gì? Tác dụng của Schema đối với website
26/06/2021 1236
Schema là gì? Tác dụng của Schema đối với website

Trong thời gian gần đây cộng đồng SEO đang bàn tán về cấu trúc Schema – Schema Structured Data, Cách khai báo Schema cho Website..vv Vậy thì chính xác Schema là gì? Tác dụng của Schema đối với website, một số schema chắc chắn bạn sẽ cần. Hãy cùng thiết kế web Hải Phòng HIG tìm hiểu chi tiết bên dưới nhé!

TÍNH NĂNG TÙY BIẾN RESPONSIVE WEBSITE NÀO CŨNG NÊN CÓ
25/06/2021 1307
TÍNH NĂNG TÙY BIẾN RESPONSIVE WEBSITE NÀO CŨNG NÊN CÓ

RESPONSIVE là gì? tại sao website nên có tính năng này? Tất cả sẽ được giải đáp qua bài viết hôm nay của websitehaiphong.vn

Giá thành thiết kế website ảnh hưởng từ những yếu tố nào?
23/03/2021 1389
Giá thành thiết kế website ảnh hưởng từ những yếu tố nào?

Bạn đang lo lắng và thắc mắc tại sao giá thành lại khác nhau như vậy có ảnh hưởng đến chất lượng website hay không. Trong bài viết này Thiết kế web hải phòng chúng tôi sẽ liệt kê các yếu tố ảnh hưởng đến chi phí một trang web. 

Trang chủ
Chuyên viên tư vấn
Phòng Kinh Doanh

Phòng Kinh Doanh

0225.777477 nhánh 1
Phụ trách SEO, Facebook - Mr. Quyết

Phụ trách SEO, Facebook - Mr. Quyết

0225.7774777 nhánh 4
Phòng kỹ thuật website

Phòng kỹ thuật website

0225.7774777 nhánh 2
Hỗ trợ quản trị web

Hỗ trợ quản trị web

0225.7774777 nhánh 2
Hỗ trợ quản trị Fanpage

Hỗ trợ quản trị Fanpage

0225.7774777 nhánh 2
Kế toán - Ms. Thảo

Kế toán - Ms. Thảo

0225.7774777 nhánh 3
Than phiền, góp ý dịch vụ

Than phiền, góp ý dịch vụ

0888.876.444 0225.7774777 nhánh 9
Vị trí Công Ty
0904.945.840
Click để gọi ngay cho tôi - messenger Click để gọi ngay cho tôi - zalo