I do have strong opinions on CSS and typography, but if I recall correctly, you weren't thrilled to hear them.
...
Still here? Okay!
Since desktop browsers mostly round off sliding unit values to the nearest pixel, you are going to have wild results when applying uncommon units like vw to font sizes, which will reflow the text in unexpected ways. My technique for sites these days is to stick
normalize.css at the top (for browser consistancy and to spare some headaches), create a
root em unit value for the
BODY element, and then assign
rem units to font sizes and—well, anything else that calls for a width or height.
/* Initial base font size: 1rem == 1em == 10px */
html { font-size: 62.5%; }
body { font-size: 10px; }
html body { font-size: 1.0rem; }
body {
font-size: 1.6rem; /* 16px */
line-height: 1.5; /* 24px */
}
The above css will scale down 16pt browser default text to 10px, then redefine it as a single rem unit. Now every text element can be size in a metric (aka sensible) way: 1.6rem is 16px, 0.9rem is 9px, etc. The main advantage to rem is that once it's defined, it will behave predictably in nested elements* when scaling the width of the viewport or when zooming in and out with the browser. You can redefine the root em for different media or different screen widths, and not have to redefine the font size every other nested element, as long as you stick to the rem plan.
I would use
vw for sizing the dimensions of DIVs and floating blocks, like you've done with the episode blocks, but not for font sizes. Browsers are still not all
there yet.
Further reading:
https://css-tricks.com/font-sizing-with-rem/,
https://css-tricks.com/rem-global-em-local/* That's the C in CSS, after all