In che modo Zurb's Foundation 4 calcola la tipografia?

Question

Sto scavando attraverso molti articoli su Golden Ratio e Modular Scale cercando di capire come la tipografia funziona a livello tecnico. Non posso dire di averlo compreso appieno, ma sono ancora più confuso con Zurb's Foundation 4.

Nel loro docs hanno dichiarato che non dipendono più/usano la scala modulare per la tipografia. Quindi sono curioso di sapere come sono arrivati ​​con i numeri, in particolare nei loro elementi di intestazione.

Esempio: ecco come i loro titoli sono scritti nella loro _type.SCSS

$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; 

Le mie domande;

1. Come sono venuti a questi valori, e come si relazionano tra loro matematicamente? I documenti non sembrano specificare come funziona.

2. Desidero modificare il carattere del carattere del paragrafo (base-line?) A 18px (1.125em) anziché il 16px (1em) - come farei per calcolare gli elementi di intestazione in modo che siano appropriati/distanza matematicamente solida?

3. Ho ragione di presumere che la modifica delle dimensioni delle intestazioni inizia con la scelta della dimensione del carattere del corpo e quindi il calcolo da lì?

Apprezzerei molto qualche consiglio su questo argomento, io non sono il più matematica mentalità persona così .. essere gentile.

Grazie!

Answer 1

I valori delle dimensioni dei caratteri non sono necessariamente un calcolo della perfezione matematica. È del tutto possibile che gli autori abbiano provato alcuni valori e pensato "questo sembra buono". Sulla base di questo article, sembra che originariamente stessero usando 14px @ 1:1.618, 44px @ 1:1.618 e arrotondando molto, e alla fine ha deciso di usare solo 18px invece di 16.807. Usare una scala modulare è bello, ma romperlo non è illegale.

Per rispondere, la seconda domanda, il bello di em s è che sono relativi! Se si desidera ridimensionare tutti di tipo proporzionale, basta cambiare il font-size sul corpo:

body { 
    font-size: 18px; 
} 

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

Demo

Dalla fondazione fa tutto in em, non sarà necessario modificare le variabili.

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; 
} 

Questa è la funzione che fondamento utilizza per calcolare il "$ em-base" dovrebbe darvi contesto globale.

Una cosa che ho trovato con l'approccio attuale di ZURB è che non dà abbastanza potenza/abbastanza flessibile come quello di em cascata così io di solito modificare per questo:

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

questo ti permette di dire quale contesto il elemento è in

Answer 3

Gli autori spiegano la loro metodologia in questo intervento:

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

Answer 4

Usiamo ancora una scala modulare per determinare le dimensioni dei caratteri, abbiamo appena non usano più la scala modulare ruby gem al fine di ridurre le dipendenze. Le dimensioni dei caratteri in Foundation 4 sono state semplicemente calcolate a mano (quindi arrotondate) utilizzando la sezione aurea, come descritto nel post sul blog relativo alla tipografia per Foundation 3 (zurb [punto] com/article/1000/foundation-3-0-typography- e-modulare-sca).

Iniziando con il ridimensionamento del corpo e calcolando verso l'alto è un buon modo per generare le dimensioni del carattere, anche se suggerirei di utilizzare l'approccio a doppia scala, come descritto nell'articolo More Meaningful Typography di Tim Brown in quanto è molto meno estremo di un aumento .