1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
# RFS mixin[![npm][npm-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/rfs.svg
[npm-url]: https://npmjs.org/package/rfs
> This package lets you use the `responsive-font-size` mixin which **automatically calculates the appropriate font
size** based on the dimensions of the monitor or device.
## What is RFS?
RFS (abbreviation for responsive font size) is the name of the algorithm behind the mixin. It's also used by
[PostCSS RFS](https://github.com/MartijnCuppens/postcss-rfs).
## Advantages
- Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen on
mobile devices.
- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can
be assured.
- **Super easy** to use, no need to define complex configurations for each font size.
- Font sizes of all text elements will always remain in relation with each other.
## Instalation
You can use RFS in your project by installing it using a package manager (recommended):
**npm:**
```
$ npm install rfs --save
```
**yarn:**
```
$ yarn add rfs
```
**Bower:**
```
$ bower install rfs --save
```
**Copy/paste (not recommended):**
You can download the RFS SCSS-file and save it in your `scss/` directory. This method is not recommended because you
lose the ability to easily and quickly manage and update RFS as a dependency.
## Usage
This input (SCSS):
```scss
.title {
@include responsive-font-size(62);
}
```
Will generate this (CSS):
```css
.title {
font-size: 62px;
}
@media (max-width: 1200px) {
.title {
font-size: calc(23.6px + 3.2vw);
}
}
```
In this case a value without unit was passed to the mixin (`62`), which is interpreted as `62px`. It's also possible to
pass font sizes in rem-units. You can also use `rfs()` instead of `responsive-font-size()` which is a bit
shorter to type.
## Configuration
There are configuration variables which influence the calculation of the font size. In the graph above the default
configuration is used.
**$rfs-minimum-font-size:** (in `px` or `rem`)
Font sizes which are calculated by RFS will never be lower than this size. However, you can still pass a smaller font
size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): `responsive-font-size(19)` will
trigger dynamic rescaling, with `responsive-font-size(10)` it will just stay `10px` all the time.
*Default value: `14px`*
**$rfs-font-size-unit:** (string)
The font size will be rendered in this unit. Possible units are `px` and `rem`.
*Default value: `px`*
**$rfs-breakpoint:** (in `px`, `em` or `rem`)
Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the
font size will dynamically scale.
*Default value: `1200px`*
**$rfs-breakpoint-unit:** (string)
The width of `$rfs-breakpoint` will be rendered in this unit. Possible units are `px`, `em` and `rem`.
*Default value: `px`*
**$rfs-factor:** (number)
This value determines the strength of font size resizing. The higher `$rfs-factor`, the less difference there is between
font sizes on small screens. The lower `$rfs-factor`, the less influence RFS has, which results in bigger font sizes for
small screens. `$rfs-factor` must me greater than 1, setting it to 1 will disable dynamic rescaling.
*Default value: `5`*
**$rfs-two-dimensional** (Boolean)
Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with
`vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode.
*Default value: `false`*
## Best practices
- Remember to set RFS on your font size of your `html` or `body`, otherwise some text may not dynamically rescale. Note
that setting RFS on `html` will influence the value of `rem`.
- Always set your line-heights relative (in `em` or unitless).
- More tips and tricks with examples can be found
[on this article](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6).
## Demos
- [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy)
- [RFS in bootstrap demo](http://martijncuppens.github.io/rfs)
|
