Zurb's Foundation 4 tính toán Typography như thế nào?

Question

Tôi đã nghiên cứu rất nhiều bài viết về Tỷ lệ vàng và Quy mô mô đun cố gắng hiểu cách thức hoạt động của kiểu chữ trên cấp độ kỹ thuật. Tôi không thể nói rằng tôi hoàn toàn hiểu nó, nhưng tôi thậm chí còn bối rối hơn với Quỹ của Zurb 4.

Trong số docs họ đã tuyên bố rằng họ không còn phụ thuộc/sử dụng quy mô mô-đun cho kiểu chữ. Vì vậy, tôi tò mò muốn biết làm thế nào họ đến với những con số, đặc biệt là trong các yếu tố nhóm của họ.

Ví dụ: đây là cách tiêu đề của họ được viết bằng _type.SCSS họ

$h1-font-size:       emCalc(44px) !default; 
$h2-font-size:       emCalc(37px) !default; 
$h3-font-size:       emCalc(27px) !default; 
$h4-font-size:       emCalc(23px) !default; 
$h5-font-size:       emCalc(18px) !default; 
$h6-font-size:       1em !default; 

// Also... 

$paragraph-font-size:     1em !default; 

Câu hỏi của tôi;

1. Làm thế nào mà họ đến với những giá trị này, và làm thế nào để họ liên hệ với nhau về mặt toán học? Tài liệu dường như không chỉ định cách hoạt động của Tài liệu.

2. Tôi muốn thay đổi kích thước phông chữ (dòng cơ sở?) Thành 18px (1.125em) thay vì 16px (1em) - tôi sẽ tính toán các phần tử tiêu đề như thế nào để chúng phù hợp/khoảng cách âm thanh cách âm?

3. Tôi có quyền giả định thay đổi kích thước tiêu đề bắt đầu bằng cách chọn kích thước phông chữ cơ thể và sau đó tính toán từ đó?

Tôi rất cảm kích mọi lời khuyên về chủ đề này, tôi không phải là người có đầu óc toán học nhất nên hãy nhẹ nhàng.

Cảm ơn!

Answer 1

Giá trị kích thước phông chữ không nhất thiết là một số tính toán về sự hoàn hảo toán học. Đó là hoàn toàn có thể các tác giả đã thử một vài giá trị và nghĩ rằng "điều này có vẻ tốt." Dựa trên điều này article, có vẻ như ban đầu họ đã sử dụng 14px @ 1:1.618, 44px @ 1:1.618 và làm tròn rất nhiều, và cuối cùng quyết định chỉ sử dụng 18px thay vì 16.807. Sử dụng một quy mô mô-đun là tốt đẹp, nhưng phá vỡ nó không phải là bất hợp pháp.

Để trả lời, câu hỏi thứ hai của bạn, điều tuyệt vời về em s là chúng tương đối! Nếu bạn muốn mở rộng tất cả các loại tương ứng, chỉ cần thay đổi font-size trên cơ thể:

body { 
    font-size: 18px; 
} 

h1 { 
    font-size: 3em; 
} 
h2 { 
    font-size: 2em; 
} 
p { 
    font-size: 1em; 
} 

Demo

Kể từ khi nền tảng làm mọi thứ trong ems, bạn sẽ không cần phải chỉnh sửa bất kỳ biến.

Answer 2

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) 
@function emCalc($pxWidth) { 
    @return $pxWidth/$em-base * 1em; 
} 

Đây là chức năng mà nền tảng sử dụng để tính toán "$ em-base" sẽ cung cấp cho bạn ngữ cảnh chung.

Một điều tôi nhận thấy với cách tiếp cận hiện nay Zurb là nó không cung cấp đủ năng lượng/đủ linh hoạt như em của thác vì vậy tôi thường sửa đổi nó như thế này:

@function emCalc($target, $context:16) { 
    @return $target/$context * 1em; 
} 

này cho phép bạn biết những gì bối cảnh các phần tử nằm trong.

Answer 3

Các tác giả giải thích phương pháp của họ trong gửi bài này:

http://zurb.com/article/1000/foundation-3-0-typography-and-modular-sca

Answer 4

Chúng tôi vẫn sử dụng một quy mô mô-đun để xác định kích thước font chữ, chúng tôi chỉ không còn sử dụng quy mô mô-đun ruby gem nhằm giảm phụ thuộc. Kích thước phông chữ trong Nền tảng 4 chỉ đơn giản là được tính toán tay (sau đó được làm tròn) bằng tỷ lệ vàng, như được mô tả trong bài đăng trên blog của chúng tôi về kiểu chữ cho Nền tảng 3 (zurb [dot] com/article/1000/foundation-3-0-typography- và mô-đun-sca).

Bắt đầu với việc tăng tỷ lệ cơ thể và tính toán lên là một cách tốt để tạo kích thước phông chữ, mặc dù tôi khuyên bạn nên sử dụng phương pháp quy mô kép, như được mô tả trong bài viết của Tim Brown More Meaningful Typography. .