Default font size in VMWare Clarity v3 and Angular v9 - vmware-clarity

Question

I'm a total noob to Angular and Clarity. I'm at the very beginning of my project but the font size is very small. I've gone through the Clarity documentation and I'm not sure what I'm missing. For instance, p, .p1 should be a font size of 14px according to the documentation. Yet it appears very small in the browser (Chrome) and when I check my source code using developer tools it shows the font size as .583333rem which translates to 8px. Font size is small in my header as well. Any help or push in the right direction would be much appreciated. Thanks!
app.component.html
<clr-main-container class="main-container">
<app-header></app-header>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
</clr-main-container>
header.component.html
<clr-header class="header header-1" *ngIf="showHeader() == true">
<button type="button" class="header-hamburger-trigger" aria-label="Open"><span></span></button>
<div class="branding">
<a class="nav-link">
<img src="../../../assets/images/logo.png">
</a>
</div>
<div class="divider"></div>
<div class="header-nav clr-nav-level-1">
<a class="nav-link" href="#" aria-label="Test1"><span class="nav-text">Test1</span></a>
<a class="nav-link active" href="#" aria-label="Test2"><span class="nav-text">Test2</span></a>
</div>
<div class="header-actions">
<a href="#" class="nav-link nav-icon" aria-label="Ticket">
<clr-icon shape="help"></clr-icon>
</a>
<clr-dropdown>
<button class="nav-text dropdown-toggle" clrDropdownToggle aria-expanded="true" aria-label="open user profile">
<clr-icon shape="user" size="24"></clr-icon>
{{ first_name }} {{last_name }}
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<div clrDropdownItem>Change Password</div>
<div clrDropdownItem>Log Out</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>

Answer 1

Thank you both for your response! There wasn't anything conflicting with the CSS. I did a file search of the entire node_modules/clr directory and found several references to .583333rem in the clr-ui.min.css file. I went back to the Clarity documentation that says:
/*
* The following percentage would produce a UI that follows a design with a 32px vertical rhythm
* and 8px grid – 32 ÷ 0.192 = 166.66667.
*/
html{
font-size: 166.66667%;
}
I added this to my styles.css file and tada! I don't know if the Clarity documentation is wrong or misleading but I was under the impression from the typography section that the body text font is supposed to be 14px. Regardless, it's working and the larger font size no longer makes my eyes hurt. Thanks again!

Answer 2

This is related to the fact that Clarity uses an unusually large :root font-size of 24px. That's why it shows 14px on their website: 24px * 0.583333rem = 14px.
But if your :root font-size is smaller (as it should and probably is) it will show as way too small to read: 13.7 * 0.583333rem = 8px.
Solution: if you're OK with it, set your :root font-size, that you may find or declare on your global (s)css file, to 24px, like this:
:root { font-size: 24px }
P.S.: I can't understand why set the root font-size so big if you have to downsize everything afterwards.. this is a real question so, if someone knows the answer, please enlighten me.