62.5percent

62.5percent

62.5 is an easy way to use rem with no math complication.

What it does

The browser set the default font size to 16px, but it's not convenient for rem unit use. So we take 62.5% of 16px to have a font size base at 10px. Now you can set size in rem with a 10 base maths. Example: 2.4rem is 24px.

It only adds the following code to your css

html {
  font-size: .625em;
  font-size: calc(1em * .625);
}

Now you can use rem easily with low maths.

Use with CDN

You can simply add this before your own stylesheet.

  <link rel="stylesheet" href="//unpkg.com/62.5percent@latest">

Import with eyeglass or NPM

With eyeglass

npm i -D eyeglass
npm i -S 62.5percent

/* gulpfile.js */
const gulp     = require('gulp');
const sass     = require('gulp-sass');
const eyeglass = require("eyeglass");

gulp.task('css', function () {
    return gulp.src('sass/**/*.{sass,scss}')
        .pipe(sass(eyeglass())
        .pipe(gulp.dest('./dist/css/')
    );
});

or With NPM

npm i -S 62.5percent

/* gulpfile.js */
const css625 = require("62.5percent").includePaths;

gulp.task('cssTask', function () {
  return gulp.src(PATH.css.src)
  .pipe(sass(
    { includePaths: [css625] }
  ).on('error', sass.logError))
  // ...
  .pipe(gulp.dest(PATH.css.dest));
});

easy use

@import '62.5percent';

body {
    font-size: 1.4rem; // equivalent to 14px
    @media screen and (min-width: 76.8rem) { // equivalent to 768px
        font-size: 1.5rem; // equivalent to 15px
    }
    @media screen and (min-width: 99.2rem) { // equivalent to 992px
        font-size: 1.6rem; // equivalent to 16px
    }
}