Các quy tắc của kiểu chữ Web đáp ứng

Bài viết này nhằm mục đích cung cấp cho cả nhà thiết kế và nhà phát triển với nền tảng mà từ đó để bắt đầu giao tiếp về chủ đề typography. Chúng tôi sẽ bao gồm các nguyên tắc thiết kế cần thiết và khám phá các giải pháp thực tế cho Kiểu chữ đáp ứng. .

Kiểu chữ tốt là gì?

'Tốt' luôn chủ quan; Nó không phải là một mỏ neo cố định mà chúng ta có thể bản lề liên lạc trên. Đối với các nhà thiết kế và nhà phát triển để giao tiếp một cách hiệu quả, chúng ta phải bắt đầu bằng cách nói về một mẫu số chung mà cả hai bên có thể hiểu. Mẫu số đó là mục đích của typography.

Typography là sự xuất hiện của văn bản; Chúng tôi đang trang điểm văn bản lên. Mục đích của việc mặc quần áo là làm cho người mặc hấp dẫn đủ để thu hút một cuộc trò chuyện, nhưng không được nhiều sự chú ý đến nỗi bên kia bị phân tâm khỏi cuộc trò chuyện.

Tương tự, mục đích của typography là cho phép người đọc tập trung và đắm mình vào nội dung của văn bản. Kiểu chữ tốt, theo định nghĩa, là kiểu chữ giúp văn bản đáp ứng mục đích liên lạc của nó.

Hai điều phải xảy ra để độc giả tập trung và đắm mình vào văn bản. Đầu tiên, kiểu chữ phải truyền đạt cảm xúc thích hợp (nếu có). Thứ hai, văn bản phải dễ đọc. Điều này đưa chúng ta đến bốn tài sản thiết yếu mà bạn cần để có được quyền.

• Font Family.
• Cỡ chữ
• Chiều cao dòng (còn được gọi là hàng đầu)
• Chiều rộng văn bản (còn gọi là thước đo văn bản)

Lấy đúng gia đình phông chữ giúp những cảm xúc cơ bản của văn bản tỏa sáng. Lấy ba thuộc tính khác, đảm bảo văn bản của bạn dễ đọc. Đối với hầu hết các phần, các nhà thiết kế là tuyệt vời trong việc tìm kiếm gia đình phông chữ phù hợp. Vì vậy, đối với phần còn lại của bài viết này, chúng tôi sẽ tập trung vào ba yếu tố khác.

Nghệ thuật của văn bản có thể đọc được

Bước đầu tiên trong bất kỳ dự án nào là đặt cỡ chữ Cái gì chiều cao giữa các dòng và chiều rộng của văn bản cơ thể của bạn. Quá trình này được gọi là sắp chữ. Bắt đầu bằng cách sắp chữ với một trang chứa thông tin cần người dùng. Càng nhiều càng tốt, trang này phải chứa nhiều phần tử, như H1, H2, H3, văn bản cơ thể và chú thích, mà bạn phải đưa ra một lựa chọn có ý thức về những gì hoạt động cho thiết kế của bạn. Càng nhiều phần tử mà trang của bạn chứa, cơ hội thiết lập sơ đồ loại hoạt động tốt hơn trên bảng.

Khi bạn chọn cỡ chữ Cái gì chiều cao giữa các dòng Và đo cho văn bản cơ thể của bạn, đảm bảo bạn sử dụng nội dung thực. Nếu bạn không có nội dung thực tế, hãy sử dụng văn bản từ Wikipedia thay vì Lorem Ipsum.

Bạn cũng cần đặt mình vào cùng một tình huống mà bạn đang tẩy trang, vì khoảng cách giữa mắt của người đọc và màn hình khác nhau đối với các thiết bị khác nhau. Nếu bạn sắp xếp cho một thiết bị di động, hãy nhìn vào đầu ra của bạn thông qua điện thoại. Nếu bạn đang tẩy vào máy tính xách tay, hãy ngồi vào bàn của bạn với máy tính xách tay của bạn, v.v.

Khi bạn đã giải quyết chính mình trong môi trường phù hợp, hãy bắt đầu quá trình sắp xếp của bạn bằng cách chọn lần đầu tiên cỡ chữ , theo sau là biện pháp và cuối cùng chiều cao giữa các dòng . Hãy nhớ rằng không có sự kết hợp hoàn hảo - chỉ cần nhìn vào các trang khác mà bạn cảm thấy có kiểu chữ tốt và bạn sẽ thấy rằng không ai trong số họ sử dụng giống nhau cỡ chữ Cái gì chiều cao giữa các dòng và đo lường. Vì vậy, những gì bạn đang nhắm đến chỉ đơn giản là văn bản dễ đọc.

Đặt kích thước phù hợp khó hơn để giải thích bằng văn bản, vì vậy tôi đã thực hiện một số video để giúp bạn với cỡ chữ Cái gì đo lường và hàng đầu .

Dưới đây là một số hướng dẫn nhanh để giúp bạn đảm bảo bạn có kích thước phông chữ tốt, dẫn đầu và đo lường.

Phông chữ của bạn quá nhỏ nếu:

• Bạn phải tập trung để đọc văn bản
• Bạn phải nheo mắt
• Bạn có sự thôi thúc để phóng to

Phông chữ của bạn quá lớn nếu:

• Bạn bắt đầu nhận thấy các chữ cái thay vì đọc nội dung
• Bạn chỉ có thể đọc một đến ba từ cùng một lúc
• Bạn có sự thôi thúc để thu nhỏ

Đo văn bản của bạn quá dài nếu:

• Bạn phải quay đầu để đọc văn bản
• Bạn mất tập trung giữa chừng

Biện pháp văn bản của bạn quá ngắn nếu:

• Bạn cảm thấy bị kích thích khi văn bản phá vỡ dòng tiếp theo
• Đôi mắt của bạn cảm thấy mệt mỏi từ nảy sang trái và phải nhanh chóng

Hàng đầu của bạn quá hẹp nếu:

• Các văn bản cảm thấy dày đặc và áp đảo
• Bạn vô tình đọc sai dòng văn bản

Hàng đầu của bạn quá lớn nếu:

• Bạn bị phân tâm bởi khoảng trắng giữa các hàng từ

Luôn nhớ định nghĩa về kiểu chữ tốt: Bạn không phải sau sự hoàn hảo, bạn chỉ cần mang đến cho văn bản dễ đọc. Trong khi làm như vậy, bạn sẽ muốn kiểm tra các lựa chọn sắp chữ của mình với khán giả (bạn bè và đồng nghiệp cũng tạo ra những người thử nghiệm tuyệt vời) để đảm bảo bạn đúng. Chỉ di chuyển để đặt kích thước của các yếu tố khác khi bạn định hoàn thành văn bản cơ thể.

Sắp chữ các yếu tố khác

Nhiều nhà thiết kế và nhà phát triển đã chọn cỡ chữ Đối với các yếu tố như H1 và H2 trực quan, và chỉ đơn giản là hy vọng rằng những con số ma thuật này hoạt động tốt trong thiết kế của họ. Nhưng không cần phải kéo số không khí mỏng; Các máy đánh máy đã sử dụng quy mô typography trong nhiều thế kỷ để giúp đỡ với điều này. Những gì bạn làm là chọn một số từ thang đo typography là kích thước của phần tử của bạn. Thật không may, các thang đo này không thể được sử dụng trực tiếp cho web vì chúng được xây dựng để thiết kế in.

Tim Brown, một chuyên gia trong lĩnh vực typography, đã đưa ra một giải pháp gọi là quy mô mô-đun. Nó hoạt động chính xác như thang đo kiểu chữ, ngoại trừ bạn xây dựng quy mô mô-đun với văn bản cơ thể bạn đã quyết định.

Để tạo quy mô mô-đun, bạn lấy văn bản cơ thể cỡ chữ (Cũng được gọi là kích thước phông chữ cơ sở) và nhân với một tỷ lệ nhiều lần cho đến khi bạn có được quy mô. Thông thường, tỷ lệ bạn sử dụng có nguồn gốc từ âm nhạc (vì âm nhạc có rễ hài hòa). Ở trên là một ví dụ về quy mô được tạo ra với sự trợ giúp của một Máy tính quy mô mô-đun .

Khi bạn đã hoàn tất việc xây dựng thang đo mô-đun, bạn có thể di chuyển vào để sắp xếp phần còn lại của các yếu tố của mình, chọn một số từ thang đo làm của bạn cỡ chữ . Sau đó đặt mục tiêu và đo lường với cùng một quy trình cho đến khi bạn có được sự cân bằng tốt của các yếu tố có thể đọc được.

Nhịp điệu dọc

Bước tiếp theo là giúp gel các yếu tố riêng lẻ với nhau bằng cách sử dụng một kỹ thuật gọi là nhịp điệu dọc. Đối với một yếu tố để chảy hài hòa vào phần tiếp theo, chúng ta cần điều chỉnh thứ tham gia chúng: không gian trắng. Không gian màu trắng này phải đủ lớn để phân biệt một yếu tố từ phần tiếp theo, nhưng nó phải đủ nhỏ để đảm bảo dòng chảy không bị hỏng.

Bạn nên sử dụng bao nhiêu khoảng trắng? Nhiều nhà thiết kế chọn một con số như 10px dễ dàng để họ thiết kế xung quanh. Nhiều nhà phát triển, mặt khác, có xu hướng chuyển ra một số ngẫu nhiên (như 6px) từ một hệ thống lưới khác hoặc một bài viết mà họ đã đọc trực tuyến. Không có gì ngạc nhiên khi hai người không thể giao tiếp.

Như bạn có thể tưởng tượng, không cần phải dựa vào một số ma thuật cho khoảng trắng; Chúng ta có thể sử dụng bội số của chiều cao giữa các dòng giá trị của văn bản cơ thể của chúng tôi. Điều này là do chúng tôi nhận ra theo bản năng mô hình không gian màu trắng trong văn bản. Mẫu càng mạnh, bạn cảm thấy an toàn hơn và dễ dàng hơn để cho tâm trí của chúng ta đi lang thang vào nội dung.

Để sử dụng nhịp điệu dọc, tất cả những gì bạn làm là:

1. Đặt khoảng trắng giữa các phần tử thành bội số của đế chiều cao giữa các dòng
2. Đặt. chiều cao giữa các dòng của tất cả các yếu tố khác với bội số của căn cứ chiều cao giữa các dòng

Nhiều câu hỏi không cần phải là một số nguyên. Bạn có thể sử dụng các giá trị như 0,5 lần và 1,25 lần cơ sở chiều cao giữa các dòng để cung cấp cho bạn sự linh hoạt hơn. Những giá trị này hoạt động vì nhịp điệu dọc sử dụng nguyên tắc lặp lại.

Lưới cơ sở hay không?

Bất cứ khi nào chúng ta đề cập đến nhịp điệu dọc, khái niệm về một lưới cơ sở chắc chắn sẽ xuất hiện vào hình ảnh. Mặc dù lưới cơ sở có khả năng hữu ích, nhưng chủ yếu là một vụ đắm tàu ​​vì người mới bắt đầu tập trung rất nhiều năng lượng để tạo ra văn bản nằm giữa (hoặc trên) đường cơ sở mà họ cảm thấy không thể có được nhịp điệu thẳng đứng.

Thành thật mà nói, bạn sẽ không bao giờ có được lưới cơ sở để hoạt động hoàn hảo trên web vì toán học trong kiểu chữ luôn chứa subpixels (như 24,8px) và tất cả các trình duyệt xử lý sumpepels khác nhau. Ví dụ: một số trình duyệt khiến mọi yếu tố trên trang bị tắt bởi 1px. Những lỗi 1px này tích lũy và đẩy bất kỳ phần tử nào được đặt thấp hơn xuống trang thậm chí xa hơn lưới. Kết quả là, tôi khuyên bạn nên sử dụng lưới cơ sở.

Tiếp tục, hãy bước vào cõi thực hành đáp ứng và thiết kế cho nhiều màn hình.

Kiểu chữ cho nhiều màn hình

Thiết kế kiểu chữ cho nhiều màn hình không có nghĩa là kỳ công. Có ba điều chúng ta cần làm từ góc độ thiết kế.

Đầu tiên, khoảng cách giữa mắt người dùng và màn hình của chúng phụ thuộc vào loại thiết bị nào chúng đang sử dụng. Nói chung, người dùng sẽ đặt thiết bị xa hơn khi sử dụng màn hình lớn hơn. Hiện tượng này có nghĩa là bạn cần tăng kích thước phông chữ của mình khi chiều rộng thiết bị tăng lên.

Thứ hai, chúng tôi muốn giữ tỷ lệ giữa văn bản cơ thể và các yếu tố khác nhất quán. Điều này có nghĩa là chúng ta phải tăng kích thước của tất cả các yếu tố như chúng ta tăng kích thước văn bản cơ thể.

Thứ ba, tại các điểm dừng cụ thể, chúng tôi muốn tăng cỡ chữ các yếu tố cụ thể (như H1) bằng cách chọn một số khác với quy mô mô-đun. Làm như vậy cho phép chúng ta kiểm soát hệ thống phân cấp trực quan và đảm bảo rằng các yếu tố thu hút đủ sự chú ý để kéo người dùng để đọc.

Mã hóa cho kiểu chữ đáp ứng

Chúng tôi biết chúng tôi cần tăng kích thước văn bản của chúng tôi theo tỷ lệ. Cách dễ nhất để làm điều này là tăng cỡ chữ trong html. bộ chọn. Chúng tôi cũng muốn sử dụng các đơn vị tương đối để tôn trọng người dùng cỡ chữ ưu tiên.

 html {kích thước phông chữ: 100%;}
@Media (Chiều rộng tối thiểu: 40EM) {
 HTML {Kích thước phông chữ: 112,5%;}
} 

Chúng tôi cũng muốn sử dụng một đơn vị tương đối cho các yếu tố khác, vì vậy chúng quy mô theo HTML cỡ chữ ( H2. trong ví dụ dưới đây). Nếu bạn cần thay đổi cỡ chữ đến một số khác trong quy mô mô-đun, tất cả những gì bạn làm là thay đổi cỡ chữ Theo đó ( H1. phía dưới).

 H1 {Kích thước phông chữ: 2.369EM;}
@Media (Chiều rộng tối thiểu: 40EM) {
 HTML {Kích thước phông chữ: 3.147EM;}
Không thể

H2 {Kích thước phông chữ: 1,777EM;} 

Mặc dù quá trình này trông đơn giản, các nhà phát triển mới có thể phải đối mặt với một tấn những cơn đau đầu vì các môn toán liên quan, đó là lý do tại sao tôi khuyên bạn nên sử dụng các chức năng và mixin để giúp đỡ. Tôi thường sử dụng bệnh đa xơ cứng() từ Thư viện quy mô mô-đun. . Với điều này, bạn có thể viết MS (4) thay vì 3.157EM. và MS (3) thay vì 2,369EM. .

Một ví dụ về một hàm có thể giảm bớt tải về tính toán theo chiều dọc là:

  @fert vr (nhịp điệu $ nhịp) {@return $ nhịp điệu / 16 * 1rem;} 

Điều này vr. Chức năng cho phép bạn viết VR (3) cho bội số của ba đường cơ sở thay vì tự tính toán. Để giúp bạn (và bản thân tôi) hơn nữa, tôi đã tạo ra một thư viện kiểu chữ đáp ứng được gọi là Typi .

Đơn vị tương đối

Tất cả các cuộc thảo luận về các đơn vị tương đối kết thúc với một câu hỏi xem bạn có nên sử dụng không rem. hoặc là em. các đơn vị. Tôi tin rằng rem. và em. có các trường hợp sử dụng độc đáo của họ và bạn nên sử dụng chúng trong các trường hợp khác nhau. Dưới đây là hai quy tắc có thể giúp bạn chọn đơn vị nào để sử dụng:

1. Sử dụng em. Nếu tài sản cần mở rộng với cỡ chữ
2. Nếu không, sử dụng rem.

Để biết thêm thông tin về việc lựa chọn giữa các đơn vị này, Xem bài viết này .

Tóm tắt nó lên

Trong bài viết này, bạn đã học được những điều cần thiết của kiểu chữ Web đáp ứng. Tất nhiên, bạn sẽ tìm thấy thêm chi tiết khi bạn lặn sâu hơn, cả về lý thuyết và triển khai, nhưng những gì bạn có ở đây bao gồm 80% những gì bạn sẽ cần trong một dự án thực sự. Được trang bị kiến ​​thức này, bạn đã sẵn sàng để bắt đầu trò chuyện với cả nhà thiết kế và nhà phát triển về cách thiết kế và mã kiểu chữ tốt cho trang web đáp ứng.

Typography đáp ứng không quá khó khăn. Nó chỉ là thử thách bởi vì bạn cần một lượng lớn kiên nhẫn và siêng năng để khám phá các nguyên tắc liên quan và áp dụng chúng theo cách phù hợp với Web.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. . Đăng ký tại đây .

Những bài viết liên quan:

• Master Kiểu chữ Web có thể truy cập
• Thiết kế một trang web đáp ứng với kích thước dựa trên EM
• 10 quy tắc để thực hiện các hình thức web thân thiện với người dùng