A note for myself after spending some time working out how to make a top menu bar on a website resize both the menu items (<ul><li> elements) and the font within the menu item as the screen width scaled.

The first bit was easy, istead of using a fixed size (120px) for the width of the <li> elements make the container element a percentage width of its parent - say 95% - and then if there are five menu items at the top (horizontal) level make the <li> width 20% (or whatever is appropriate for the number of entries in the top menu bar).

That's all well and good but the font-size doesn't scale.

Ok so use vw units instead of px or pt or em for the font. 

That works but fairly quickly the font becomes to small as the width decreases or too large as it widens.

Next fix to set a minimum is to use calc() for the font-size

eg {font-size: calc(8px + 0.5vw);}

This also works with em so if the default body font is 16px (it usually is, unless explicitly changed in CSS) then

{font-size: calc(0.5em + 0.5vw);} will be the same as above. But you need to know what the current font size is if it has been set higher up in CSS

This now works with user defined scaling (cmd +/- ) for accssibility

That works for the minimum but you have to tinker a bit to get the right combination of fixed value and proportion of view width.  

There is a solution here using SASS/SCSS, but that requires you to be compiling your scss into proper css which seems like a lot of faff for a simple bit of maths. So I reversed the mixin and came up with this in simple css

/******* if using Rvw for responsive size and Npx for min Xpx for max then

.classname {
    font-size: Rvw;
}
@media (max-width: (N*100)/R ) {
    .classname {font-size: Npx;}
@media (min-width: (X*100)/R ) {
    .classname {font-size: Xpx;}
}

*********/

Assuming Dpx default font size for em and specifying an min and max in em then: 

.classname {
    font-size: Rvw;
}
@media (max-width: (D*N*100)/R ) {
    .classname {font-size: Nem;}
@media (min-width: (D*X*100)/R ) {
    .classname {font-size: Xem;}
}

Now I have a template for a css class that will scale font size within limits set in em so obeying accessibility requirements. Whooeee :-)

Question remains - it is possible within the css to get the value for D, the default font size for 1em in pixels?