Mike là một nhà phát triển web độc lập đến từ Úc, người đã từng làm việc trên một số trang web lớn nhất của Úc cũng như một số cộng đồng nhỏ nhất… Thông tin thêm về Michael ↬
Bản tin email
Email [đập vỡ] của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.
- Các mẫu thiết kế giao diện Đào tạo UX
- Đập tanConf Freiburg. Tất cả về Web. Ngày 4–6 tháng 9 năm 2023
- Quảng cáo trên tạp chí Smashing
- Bắt đầu miễn phí
- Giao diện người dùng SmashingConf 2023
Nắm bắt kiểu chữ linh hoạt có thể dễ dàng hơn bạn nghĩ. Nó có hỗ trợ nhiều trình duyệt, dễ triển khai và có thể đạt được mà không mất kiểm soát đối với nhiều khía cạnh quan trọng của thiết kế
Không giống như kiểu chữ đáp ứng, chỉ thay đổi tại các điểm ngắt đã đặt, kiểu chữ linh hoạt thay đổi kích thước mượt mà để phù hợp với mọi chiều rộng của thiết bị. Đây là một tùy chọn trực quan cho một trang web mà chúng tôi có vô số kích thước màn hình để hỗ trợ. Tuy nhiên, vì một số lý do, nó vẫn được sử dụng ít hơn nhiều so với các kỹ thuật đáp ứng
Điều này có thể là do kiểu chữ đã ăn sâu vào lịch sử hàng thế kỷ của việc sắp chữ. Khái niệm có bất cứ thứ gì “linh hoạt” thường mâu thuẫn với truyền thống này. Trong bản in, các kích thước luôn được cố định, nhưng chúng không cần phải có trên web. Đó là lý do tại sao tôi nghĩ rằng kiểu chữ linh hoạt là sự kết hợp hoàn hảo cho web. Đó là một cách tiếp cận khác cho một phương tiện hoàn toàn khác
Đọc thêm trên SmashingMag.
- 16 điểm ảnh. Đối với bản sao nội dung. Bất cứ điều gì ít hơn là một sai lầm tốn kém
- Giới thiệu kiểu chữ web đáp ứng với FlowType. JS
- 10 nguyên tắc cho kiểu chữ web có thể đọc được
- Đoạn hoàn hảo
Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓
Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác
Chuyển đến hội thảo ↬Điều này không có nghĩa là chúng ta cần loại bỏ mọi quy ước và mọi thứ chúng ta biết về kiểu chữ. Chúng ta chỉ cần học cách áp dụng các kỹ thuật mà chúng ta biết theo một cách hơi khác. Chú ý cẩn thận đến từng chi tiết sẽ đảm bảo chúng tôi vẫn có trải nghiệm hoàn hảo ở mọi kích cỡ màn hình
Bắt đầu với kiểu chữ linh hoạt
Các đơn vị khung nhìn là những gì làm cho kiểu chữ linh hoạt trên web trở nên khả thi. Đơn vị khung nhìn đề cập đến tỷ lệ phần trăm kích thước khung nhìn của trình duyệt. Ví dụ: 1 chiều rộng khung nhìn [_______62] bằng 1% chiều rộng của khung nhìn. Các đơn vị khác với tỷ lệ phần trăm vì chúng luôn liên quan đến chế độ xem, trong khi tỷ lệ phần trăm liên quan đến vùng chứa chính của phần tử
Điều này có nghĩa là, không giống như tất cả các loại đơn vị khác, đơn vị khung nhìn không có bất kỳ cách nào liên quan đến kích thước phông chữ cơ sở. Sự khác biệt này là đáng kể và làm cho các đơn vị thú vị và độc đáo
Bốn đơn vị khung nhìn có sẵn cho chúng tôi
2. chiều rộng khung nhình1 { font-size: 2em; }
1. chiều cao khung nhình1 { font-size: 2em; }
2. giá trị nhỏ hơn của chiều rộng và chiều cao của khung nhình1 { font-size: 2em; }
3. giá trị lớn hơn của chiều rộng và chiều cao của khung nhình1 { font-size: 2em; }
Cách dễ nhất để bắt đầu sử dụng kiểu chữ linh hoạt là đặt
h1 { font-size: 2em; }h1 { font-size: 2em; }html { font-size: 2vw; }Trong ví dụ này, chúng tôi đã đặt phần tử gốc thành
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Kích thước tiêu đề của
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Chỉ sử dụng các đơn vị tương đối với khung nhìn đi kèm với một số nhược điểm. Chúng tôi không có quyền kiểm soát chính xác đối với tỷ lệ quy mô; . May mắn thay, có nhiều cách để khắc phục tất cả những hạn chế này
Kiểm soát các đơn vị khung nhìn để có kích thước phông chữ tối thiểu và tối đa
Gắn
h1 { font-size: 2em; }h1 { font-size: 2em; }Bởi vì các đơn vị khung nhìn luôn liên quan đến khung nhìn, trên các màn hình rất nhỏ, bạn có thể kết thúc với kích thước phông chữ nhỏ một cách lố bịch
Lý tưởng nhất là chúng tôi có thể đặt kích thước phông chữ tối thiểu, nhưng chúng tôi chưa có thuộc tính
h1 { font-size: 2em; }Đầu tiên, chúng ta có thể sử dụng biểu thức
h1 { font-size: 2em; }h1 { font-size: 2em; }Trong ví dụ này, ở chiều rộng khung nhìn bằng 0,
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Trong ví dụ này, kích thước phông chữ sẽ trở nên linh hoạt khi chế độ xem đạt đến chiều rộng 50 ems. Điều này hoạt động thực sự tốt, nhưng nó thường có nghĩa là một bước nhảy giữa các giá trị cố định và linh hoạt. Để loại bỏ điều này, chúng ta có thể tìm ra điểm chính xác mà tại đó giá trị chất lỏng khớp với giá trị cố định và đặt điểm ngắt ở kích thước khung nhìn đó
Nếu kích thước phông chữ mặc định là 16 pixel và nếu
h1 { font-size: 2em; }h1 { font-size: 2em; }Vì chúng tôi muốn sử dụng đơn vị em cho các truy vấn phương tiện của mình, hãy chuyển đổi pixel thành ems. Chúng tôi sẽ chia 800 cho 16 [hoặc bất kỳ em gốc nào bằng pixel].
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Chúng ta có thể sử dụng phép tính tương tự để tìm ra kích thước phông chữ tối đa. Nếu chúng tôi muốn kích thước phông chữ tối đa là 24 pixel, chúng tôi có thể tính toán như sau.
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Những tính toán này không khó, nhưng tôi thấy rằng một bảng giúp chúng ta hình dung các điểm ngắt và tốc độ mà phông chữ chia tỷ lệ với các đơn vị khung nhìn khác nhau. Các giá trị đơn vị khung nhìn nằm ở phía trên cùng và độ phân giải của thiết bị nằm ở phía bên trái của bảng
1vw2vw3vw4vw5vw400px4px8px12px16px20px500px5px10px15px20px25px600px6px12px18px24px30px700px7px14px21px28px35px800px8px16px24KB32px40pxNhìn vào bảng này, bạn có thể thấy rằng chúng tôi có ít quyền kiểm soát đối với tốc độ thay đổi đơn vị khung nhìn. Chỉ sử dụng các đơn vị khung nhìn, chúng tôi bị giới hạn ở các kích thước phông chữ có sẵn trong một cột của bảng
Kiểm soát tỷ lệ quy mô
Nếu chúng tôi muốn chọn kích thước phông chữ 16 pixel ở độ phân giải màn hình 400 pixel và sau đó chuyển sang 24 pixel ở độ phân giải 800 pixel, chúng tôi sẽ không thể — không phải không có điểm dừng. Đồng thời, bạn có thể nhận thấy rằng chúng tôi đã tính toán các điểm dừng cho kích thước phông chữ tối thiểu và tối đa, không chọn chúng
Làm thế nào để chúng ta vượt qua những hạn chế này? . Sử dụng các đơn vị
h1 { font-size: 2em; }Hàm này lấy một giá trị trong một phạm vi và tìm ra giá trị mới sẽ là gì nếu được áp dụng cho một phạm vi khác. Vì vậy, nếu chúng tôi có các số 1 và 100 và giá trị là 50, sau đó áp dụng giá trị này cho một phạm vi mới từ 1 đến 200, giá trị mới của chúng tôi sẽ là 100. Cả hai giá trị này vẫn ở ngay giữa phạm vi
Đây là một chức năng phổ biến để ánh xạ các giá trị và tôi đã sử dụng nó rất nhiều khi làm việc với dữ liệu trong JavaScript. Tôi tò mò về khả năng sử dụng các hàm với
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Mặc dù tính toán có vẻ hơi phức tạp, nhưng nó khá đơn giản. Chúng tôi chọn kích thước phông chữ tối thiểu và tối đa cũng như kích thước màn hình mà phông chữ sẽ chia tỷ lệ và sau đó cắm chúng vào phương trình. Chúng tôi có thể sử dụng bất kỳ loại đơn vị nào, bao gồm ems, rems hoặc pixel. Tôi đã sử dụng pixel cho các ví dụ trong bài viết này vì chúng giúp dễ hiểu các khái niệm hơn, nhưng tôi thường sử dụng đơn vị rem trong công việc của mình. Cho dù bạn chọn cách nào, điều duy nhất cần nhớ là bạn phải sử dụng cùng một loại đơn vị cho tất cả các giá trị trong phương trình và bạn phải loại bỏ các đơn vị, như minh họa trong ví dụ
Nếu bạn không muốn viết phần này bằng tay, có rất nhiều công cụ giúp việc này trở nên dễ dàng hơn, bao gồm mixin cho Sass và LESS và plugin PostCSS. Tuy nhiên bạn cuộn, bạn được bảo hiểm
Duy trì chiều dài dòng lý tưởng
Trong cuốn sách The Elements of Typographic Style, Robert Bringhurst gợi ý rằng độ dài dòng thoải mái là khoảng 45 đến 75 ký tự
Mọi thứ từ 45 đến 75 ký tự được nhiều người coi là độ dài dòng thỏa đáng cho trang một cột được đặt trong một mặt văn bản có chân đế ở kích thước văn bản. Dòng 66 ký tự [tính cả chữ cái và dấu cách] được nhiều người coi là lý tưởng
Quy tắc tương tự có thể được áp dụng trực tiếp cho kiểu chữ linh hoạt và trong nhiều trường hợp, đạt được độ dài dòng nhất quán khi tỷ lệ văn bản là có thể
Theo cách tiếp cận đáp ứng, trong đó chúng tôi điều chỉnh kích thước phông chữ tại các điểm ngắt đã đặt, chúng tôi cũng thường tùy ý điều chỉnh độ rộng của vùng chứa để duy trì độ dài dòng phù hợp. Tuy nhiên, với kiểu chữ linh hoạt, việc điều chỉnh tại các điểm dừng cụ thể trở nên không cần thiết. Chỉ cần đặt kích thước của vùng chứa theo tỷ lệ giống như phông chữ. Chúng ta có thể sử dụng kỹ thuật
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Xin lưu ý rằng việc duy trì độ dài dòng lý tưởng trở nên không thực tế trên màn hình rất nhỏ. Có một điểm khi giảm kích thước phông chữ để duy trì độ dài đọc “lý tưởng” sẽ làm giảm khả năng đọc. Chúng tôi chỉ cần chấp nhận điều này và đặt chiều rộng của vùng chứa thành thứ gì đó hợp lý cho thiết bị di động
Triển khai quy mô mô-đun
Thang đo mô-đun là một dãy số tỷ lệ hài hòa với nhau. Điều này được mô tả trực quan tốt nhất
Các tỷ lệ khác nhau hoạt động tốt hơn cho các kích thước màn hình khác nhau
Trên màn hình nhỏ, kích thước tiêu đề phải thống nhất hơn; . Chúng ta có thể sử dụng các kỹ thuật đánh máy được mô tả ở trên để chuyển đổi trôi chảy giữa các tỷ lệ mô-đun khác nhau. Chỉ cần chọn một tỷ lệ cho màn hình nhỏ và một tỷ lệ khác cho màn hình lớn, sau đó tìm ra kích thước phông chữ tối thiểu và tối đa cho từng cấp tiêu đề
Để tính tỷ lệ mô-đun, hãy lấy kích thước phông chữ cơ sở và nhân nó với tỷ lệ mong muốn để có số lớn hơn. Đối với các số nhỏ hơn, hãy chia. Lặp lại quy trình này với các kết quả tiếp theo để có được từng bước cần thiết trong thang đo
lớn hơn
- 1 em × 1. 125em = 1. 125em
- 1. 125em × 1. 125em = 1. 266em
- 1. 266em × 1. 125em = 1. 424em
- 1. 424em × 1. 125em = 1. 602em
nhỏ hơn
- 1em ÷ 1. 125em = 0. 889em
- 0. 889em ÷ 1. 125em = 0. 790em
- 0. 790em ÷ 1. 125em = 0. 702em
- 0. 702em ÷ 1. 125em = 0. 624em
Hãy sử dụng 1. 125 là tỷ lệ tối thiểu của chúng tôi và thực hiện các phép tính tương tự cho 1. 250 là thang đo tối đa của chúng tôi. Sau đó, chúng tôi sẽ áp dụng các bước khác nhau trong thang đo cho các cấp độ tiêu đề của chúng tôi
- quy mô tối thiểu. 1. 125
- quy mô tối đa. 1. 250
Tôi đã thiết lập một ví dụ về tiêu đề quy mô mô-đun linh hoạt trên Codepen để bạn xem qua. Bạn có thể đọc thêm về tầm quan trọng của tỷ lệ mô-đun trong bài viết của Tim Brown “Mẫu chữ có ý nghĩa hơn. ”
Nếu bạn cần trợ giúp chọn thang đo phù hợp, tôi khuyên bạn nên truy cập trang web Type Scale của Jeremy Church và Modular Scale của Tim Brown và Scott Kellum
Duy trì nhịp điệu dọc
Nhịp dọc liên quan đến việc duy trì không gian nhất quán và tỷ lệ giữa các thành phần trên trang. Bạn có thể tìm hiểu thêm về nhịp dọc trong bài viết của Espen Brunborg “CSS Baseline. Cái tốt, cái xấu và cái xấu. ”
Để duy trì nhịp dọc trong bố cục của chúng tôi, chúng tôi cần đặt khoảng cách dọc của từng phần tử theo tỷ lệ của thước đo cơ sở của chúng tôi. Một điều mà nhiều người cảm thấy khó khăn với kiểu chữ đáp ứng là tìm ra nhịp điệu dọc phù hợp với cả màn hình nhỏ và lớn. Thông thường, chúng tôi có thể muốn các biện pháp cơ bản khác nhau cho màn hình nhỏ và lớn hoặc chúng tôi có thể muốn sử dụng các tỷ lệ khác nhau
Với kiểu chữ linh hoạt, đường cơ sở có thể linh hoạt, giống như kích thước phông chữ. Trên thực tế, nếu chúng tôi đã đặt phần tử gốc thành giá trị linh hoạt, chúng tôi có thể sử dụng các đơn vị
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Giả sử chúng ta đặt
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Chúng tôi sẽ làm tương tự cho chiều cao và lề của dòng
h1 { font-size: 2em; }Đối với các thành phần tiêu đề, tôi muốn có chiều cao dòng khác. Tuy nhiên, tôi muốn chiều cao của dòng cộng với các lề bằng một phần gia tăng của đường cơ sở. Đây là nơi
h1 { font-size: 2em; }h1 { font-size: 2em; }Trong ví dụ này, tổng chiều cao của phần tử tiêu đề cộng với các lề sẽ là
h1 { font-size: 2em; }Tôi đã tạo một ví dụ về kỹ thuật này bằng cách sử dụng các biến Sass để bạn có thể thử với các phép đo đường cơ sở khác nhau để xem nó hoạt động như thế nào
Trong tương lai, các thuộc tính CSS tùy chỉnh sẽ làm cho kỹ thuật này trở nên thú vị hơn. Chúng tôi sẽ có thể sử dụng các biến CSS trong biểu thức
h1 { font-size: 2em; }Làm việc với các ràng buộc
Có lẽ bạn muốn triển khai kiểu chữ linh hoạt trên một trang web có các ràng buộc về bố cục hiện có hoặc bạn phải làm việc trong một bố cục được xác định trước trong WordPress hoặc Bootstrap. Trong tình huống này, các vùng chứa có thể sẽ không linh hoạt hoặc nếu có, có thể sẽ không thay đổi cùng tốc độ với kích thước phông chữ
Gần đây tôi đã giúp triển khai kiểu chữ linh hoạt cho Bộ Dịch vụ Nhân sinh của Chính phủ Úc. Đó là một trang web lớn với nội dung đầy thách thức và chúng tôi phải làm việc với một thiết kế hiện có. Tôi có hai mối quan tâm chính trong việc triển khai kiểu chữ linh hoạt trên một trang web được buôn bán nhiều như vậy
Đầu tiên, làm cách nào tôi có thể ngăn bố cục bị phá vỡ? . Trước sự ngạc nhiên của tôi, đây không phải là một vấn đề
Trên thực tế, hóa ra lại hoàn toàn ngược lại. Nội dung hiện được điều chỉnh tự nhiên để phù hợp với vùng chứa, trong khi trước đây nội dung cần điều chỉnh tại một số điểm dừng nhất định. Nhìn chung, biểu định kiểu cần ít truy vấn phương tiện hơn và phần lớn, các thành phần cần ít khai báo kiểu hơn nhiều
Đây là một lợi ích bất ngờ và ở nhiều nơi, chúng tôi đã bỏ qua cách xử lý thiết kế dành cho máy tính bảng vì bản trình bày trên máy tính để bàn hiện hoạt động trên màn hình nhỏ hơn
Dưới đây là một ví dụ về thành phần điều hướng trước đây cần một số điều chỉnh ở các kích thước màn hình khác nhau. Mặc dù không hoàn hảo ở kích thước nhỏ, nhưng nó giữ chặt với nhau và duy trì chức năng mà không bị gãy
Mối quan tâm thứ hai của tôi là, bởi vì tôi phải làm việc với một số chiều rộng cố định, nên tôi biết rằng không phải lúc nào tôi cũng đạt được độ dài ký tự lý tưởng trên mỗi dòng. Thay vào đó, tôi đã điều chỉnh kích thước phông chữ ở độ dài lý tưởng trên điện thoại và máy tính bảng — nơi mà tôi cho rằng nó quan trọng nhất
Tôi phải chấp nhận điều đó, bởi vì vùng chứa chính không mở rộng theo cùng tốc độ với văn bản, một số văn bản chắc chắn sẽ bị chỉnh lại khi trình duyệt được thay đổi kích thước. Đây chỉ là một mối quan tâm vì tôi không muốn người đọc bị mất vị trí khi thay đổi hướng của thiết bị. Vì chúng tôi không thể tránh được điều này nên điều duy nhất chúng tôi có thể làm là kiểm tra tác động trên một số thiết bị nhất định. Với các lựa chọn mà chúng tôi đã thực hiện, may mắn thay, việc chỉnh lại dòng hầu như không đáng chú ý trên thiết bị di động và ngay cả trên máy tính bảng lớn, tác động cũng rất nhỏ
Cuối cùng, chúng tôi hài lòng với kết quả. Mặc dù chúng tôi có thể làm nhiều hơn để cải thiện kiểu chữ, nhưng không nghi ngờ gì nữa, chúng tôi đã cải thiện khả năng đọc của trang web. Với những bài học rút ra từ việc triển khai kiểu chữ linh hoạt, lần lặp lại tiếp theo của thiết kế có thể sẽ tập trung mạnh vào kiểu chữ và khả năng đọc
Mẹo để triển khai kiểu chữ linh hoạt trên một trang web hiện có
- Chọn cẩn thận tỷ lệ và kích thước phông chữ tối thiểu và tối đa phù hợp nhất với thiết kế của bạn
- Sử dụng đơn vị em cho cỡ chữ. Nếu bạn cần tắt kiểu chữ linh hoạt trong một vùng chứa cụ thể, chẳng hạn như điều hướng, hãy đặt kích thước phông chữ của vùng chứa thành một giá trị cố định. Giá trị em trong vùng chứa này sau đó sẽ liên quan đến giá trị cố định
- Tương tự, nếu cần, bạn chỉ có thể đặt kiểu chữ linh hoạt cho một số vùng chứa nhất định. Nếu bạn đặt kích thước phông chữ của một vùng chứa cụ thể thành giá trị linh hoạt, thì tất cả các giá trị em trong vùng chứa sẽ trở nên linh hoạt
- Reflowing text is not necessarily a bad thing if it only happens when the browser is resized or the device’s orientation changes
- Duy trì độ dài dòng hoàn hảo có thể là không thể. Trước tiên, hãy nhắm đến độ dài dòng lý tưởng trên thiết bị di động và máy tính bảng
Hỗ trợ trình duyệt và lỗi
Tôi thường nghe nói rằng Safari và đặc biệt là Safari dành cho thiết bị di động, có lỗi nghiêm trọng với cả đơn vị khung nhìn và biểu thức
h1 { font-size: 2em; }Tôi đã tự kiểm tra các đơn vị biểu thức và khung nhìn của
h1 { font-size: 2em; }h1 { font-size: 2em; }Tôi thấy rằng cả đơn vị
h1 { font-size: 2em; }h1 { font-size: 2em; }Bạn có thể buộc đánh giá lại một biểu thức bằng các truy vấn phương tiện bổ sung
html { font-size: 2vw; }Kỹ thuật này buộc Safari dưới phiên bản 8 và Internet Explorer dưới phiên bản 11 tính toán lại kích thước phông chữ tại các điểm dừng đã đặt
Có thể buộc các trình duyệt cũ tính toán lại bố cục bằng một sự kiện thay đổi kích thước cửa sổ trong JavaScript, nhưng tôi không thể tìm thấy phương pháp đáng tin cậy để thực hiện việc đó và nó có thể làm giảm hiệu suất. Trong hầu hết các trường hợp, việc buộc tính toán lại tại các điểm dừng đã đặt sẽ là phương án dự phòng có thể chấp nhận được đối với các trình duyệt này
Đối với các trình duyệt cũ hoặc , kỹ thuật linh hoạt sẽ bị bỏ qua. Nếu các giá trị mặc định hợp lý được đặt, kỹ thuật này có thể được áp dụng với tính năng nâng cao lũy tiến
Sử dụng Fluid Typography ngay hôm nay
Nếu bạn có kế hoạch triển khai kiểu chữ linh hoạt ngay hôm nay, trước tiên hãy quyết định phương pháp bạn sẽ thực hiện
Nếu toàn bộ thiết kế trở nên linh hoạt, thì có lẽ bạn sẽ muốn xem xét làm cho phần gốc em linh hoạt, bằng cách khai báo kích thước phông chữ với đơn vị linh hoạt trên phần tử
h1 { font-size: 2em; }h1 { font-size: 2em; }h1 { font-size: 2em; }Chọn kích thước phông chữ tối thiểu và tối đa của bạn một cách cẩn thận. Tại thời điểm này, bạn sẽ cần quyết định nên sử dụng trực tiếp các đơn vị khung nhìn hay thực hiện kiểm soát chính xác hơn đối với tốc độ của tỷ lệ. Nếu là cái sau, thì mixin cho Sass hoặc LESS hoặc plugin PostCSS sẽ giúp mọi việc dễ dàng hơn
Đảm bảo chọn đúng kích thước phông chữ tối thiểu và tối đa. Đây là quyết định quan trọng nhất. Khi bạn thay đổi em gốc, kích thước phông chữ cho tất cả các thành phần khác sẽ liên quan đến điều này. Thay đổi điều này muộn trong một dự án có thể có nghĩa là bạn phải điều chỉnh mọi thứ
Đừng quên khai báo kích thước phông chữ mặc định trước khi triển khai kỹ thuật linh hoạt. Mặc định này sẽ được sử dụng trong các trình duyệt không hỗ trợ các đơn vị chất lỏng và nó không cần phải giống với kích thước phông chữ tối thiểu của bạn
Cuối cùng, hãy xem xét các ràng buộc trong thiết kế của bạn và cách bạn sẽ tiếp cận những thứ như cấp độ tiêu đề và độ dài dòng. Xem các kỹ thuật trong bài viết này. Nếu bạn có các thành phần không phải là tiêu đề mà bạn muốn chia tỷ lệ ở một tỷ lệ khác với văn bản thông thường, hãy cân nhắc kỹ khả năng đọc và việc duy trì biểu định kiểu trước khi thêm nhiều biểu thức
h1 { font-size: 2em; }