Was ist wichtiger, die grundlegende Schriftgröße oder die grundlegende Linienhöhe, wenn Raster basierend auf einer modularen Skala erstellt werden?

Ich versuche, Raster basierend auf modularen Skalen zu verstehen und wie man sie im Webdesign verwendet. Soweit ich weiß, gibt es zwei Möglichkeiten, einen Basiswert für Ihre Skala zu bestimmen ... mithilfe Ihrer Basisschriftgröße (1 Rem) oder mithilfe Ihrer Basislinienhöhe (1 Rem * 1,6).

CSS-Frameworks wie Foundation scheinen die grundlegende Schriftgröße zu bevorzugen und verwenden diesen Wert im Raster wie folgt:

.myDiv {
    padding: 1rem;
    margin-bottom: 0.5rem;
}

Andere CSS-Frameworks wie Bootstrap scheinen die Grundlinienhöhe zu bevorzugen und verwenden diesen berechneten Wert in ihrem Raster wie folgt:

// $baselineFontsize is a pixel value like 14px 
// $baselineLineHeight is a unitless number like 1.4 or 1.6

$baseline = $baselineFontsize * $baselineLineHeight;

.myDiv {
    padding: $baseline;
    margin-bottom: $baseline * 0.5;
}

// or, based on em:

.myDiv {
    padding: 1em * $baselineLineHeight;
    margin-bottom: 1em * $baselineLineHeight * 0.5;
}

Was sind die Hauptunterschiede zwischen der Verwendung von Schriftgröße und Zeilenhöhe als Basis? Was sind jeweils die Vor- und Nachteile? Werden sie zu einem unverwechselbaren Aussehen führen?