Explain the Visualisation graph about rfs

[MartijnCuppens]

The colors are just different font sizes being rescaled. For example:

.title {
  @include font-size(40px);
}

This is the green line. A font size of 40px stays 40px in viewports with a size larger than 1200px. Below 1200px, the font size is rescaled and at viewport of 360px, the font size is about 27px. Note that every font size is generated in a combination of rem and vw units, but the I've mapped this to px in the graph to make it easier to understand.

The factor is a configuration variable. You don't have to understand how the factor works to make use of RFS. The higher the factor, the less difference there is between font sizes on small screens (on the graph, the lines would lay closer to each other). The lower the factor, the less influence RFS has, which results in bigger font sizes for small screens.

Did this help you a bit or did it just confuse you more, @nettiopsu?

[nettiopsu]

Ah yeah I see now. Then in fact "Base font size" is "Base font sizeS", because there are multiple fonts. In addition, my focus point was somehow concentrated in breakpoint 0, where font-sizes are not marked for the lines, however it should be in fact in the breakpoint 1200. Maybe this breakpoint could be somehow marked with another color for example?

It would be nice if you could copy your explanations to README.MD if someone like me will try to understand how does it work :) It would be great

[SilviaGars]

Hi
I am trying to overwrite the $rfs-breakpoint: 1200px !default; with 1024px.
body {
$rfs-breakpoint: 1024px;
}
but it doesn't work.

[arthurshlain]

How to calculate the factor value and base font-size correctly? I have website layout designed with 18px paragraphs font-size on 1280px artboard and 16px paragraphs font-size on 375px mobile artboard. How deal if designer's headings and other font styles has different factor?