Execute typographic structure with ease.
The MegaType demo page shows how typesetting rules scale across breakpoints.
##Install
Download manually or install with Bower (recommended):
bower install megatype --save-dev
or with Npm
npm install megatype --save-dev
You can add a load path to your build process of choice (gulp example shown):
// gulpfile.babel.js
import gulp-sass from "gulp-sass";
gulp.task('styles', () => {
return gulp.src(“app/styles/screen.scss”)
.pipe(gulp-sass({
outputStyle: 'expanded',
precision: 6,
includePaths: [
'./node_modules/megatype'
]
})
.pipe(gulp.dest('dist'));
});
And import into your styles with:
@import "megatype";
##Using MegaType MegaType provides typesetting tools, and some breakpoint mixins.
###Config
Copy _config.scss
into your codebase and override the !default
settings where required, leaving unmodified values commented out.
First, set up your breakpoint map (defaults shown) and your baseline snap & scaling preferences:
// config.scss
// enable responsive baseline & type scaling.
// increases root font size from each breakpoint, starting from the size specified in the rootsizes below
$baseline-scaling: false;
// enable formal baseline grid
// snaps all type to the baseline grid
$baseline-snap: true;
// map for flexible retrieval of breakpoint info
$breakpoint-map: (
0: (
start: 0px,
max: 420px,
rootsize: 12px
),
1: (
start: 480px,
max: 560px,
rootsize: 14px
),
2: (
start: 768px,
max: 840px,
rootsize: 16px
),
3: (
start: 980px,
max: 1080px,
rootsize: 18px
),
4: (
start: 1280px,
max: 1440px,
rootsize: 20px
)
);
Breaking down the map:
start
is the start position of the breakpoint. Can bepx
orem
.max
is the max width of the container. Can bepx
,em
, or%
.rootsize
is the base font size applied to thehtml
element. Can bepx
orrem
. This also controls our grid size at this breakpoint. These values can be retrieved using thebreak-get
function, eg:
.my-component {
width: break-get(3, max);
}
To intialise the baseline, call MegaType at the top of your stylesheet:
@include megatype;
For containers, you may also wish to to apply max
widths from your config:
.my-container {
@include set-container;
}
Next we need to provide some information about each font we want to typeset. Modify the ones provided, or add your own:
// Set cap height to set to the baseline.
// Here are some cap-height sizes to get you started:
// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
// Lucida Grande: 0.72, Helvetica: 0.65, Helvetica Neue: 0.71, Verdana: 0.76, Tahoma: 0.76
$sans: (
font-family: '"Helvetica Neue", Arial, sans-serif',
regular: normal,
bold: bold,
cap-height: 0.71
) !default;
$serif: (
font-family: 'Georgia, serif',
regular: normal,
bold: bold,
cap-height: 0.69
) !default;
$monospace: (
font-family: 'Menlo, Courier, monospace',
regular: 400,
cap-height: 0.68
) !default;
To set the correct cap-height
, you will need to tweak this value and check in your browser until your typeface sits nicely on the baseline.
Tip: Setting $debug-allow
and $debug-baseline
variables to true
will display a visual representation of the baseline on your typeset elements.
###Setting type
With our rootsize initialised and our typographic config all set up, we can start setting type.
First, provide the typeface variable, and then provide $fontsize
, $lineheight
, $leader
and $trailer
in px
, rem
, or baseline units. One baseline unit is equivalent to the rootsize
for that media query.
// We can set our type using pixels, rems or baseline units
// Heading level 1.
h1 {
@include typeset($font: $sans, $fontsize: 38px, $lineheight: 38px, $leader: 2, $trailer: 2rem);
}
// Heading level 2.
h2 {
@include typeset($sans, 26px, 28px, 2, 1);
}
// Paragraph.
p {
@include typeset($sans, 16px, 2rem, 0, 2);
}
The $fontsize
, $leader
and $trailer
are output in rem
units, whereas the lineheight is output as a unitless number.
$leader
is calculated alongside an offset to put our type on the baseline, and output as a top
value. This is then added to the $trailer
, which is output as margin-bottom
.
###Media queries
To set type at different breakpoints, our typeset
mixin needs to know about the configured rootsize for that breakpoint. Use the min-width
mixin with a breakpoint defined:
p {
@include typeset($sans, 16px, 24px, $leader: 0, $trailer: 2);
// we can apply a single breakpoint, starting with breakpoint key: 1
@include min-width(1) {
@include typeset($sans, 16px, 24px, $leader: 0, $trailer: 2);
}
// or set several keys at once
@include min-width(2 3 4) {
@include typeset($sans, 18px, 28px, $leader: 1, $trailer: 3);
// Feel free to set other styles for these breakpoints here as well.
padding: 2rem;
// we can leverage the break-get mixin and $current-breakpoint variable for config information on each breakpoint used
max-width: break-get($current-breakpoint, max);
}
}
There is also a max-width
mixin, but this will always use the smallest breakpoint for type calculations, so exercise caution when using this in conjunction with the typeset
mixin.
Both of these mixins can also accept px
values for a custom media query shortcut, but these will use the settings from breakpoint 0
so should be avoided when setting type with typeset
.
###Debugging MegaType contains extensive debugging tools to let you visualise your type and grid setup, these are enabled by default.
// debug baseline grid
$debug-grid: true;
// debug typeset elements, their cap height, and baseline
$debug-type: true;
// show some information about the current breakpoint and it's config
$debug-breakpoints: true;
Debugging can be toggled on and off globally with one variable in megatype.scss
:
$debug-allow: true;
Note: Background gradients are used for some debugging elements. As background gradients suffer from pixel rounding issues, they may get out of sync on some configurations with extreme dimensions (on lengthy typeset pages, for example). This is an unfortunate, but expected behaviour.
MegaType also includes a mixin to make your link underlines look great. The global variables in _config.scss
control their default settings:
// Link offset from baseline. Can be a positive or negative value
$link-offset: 2px !default;
// Opacity of the underline.
$link-underline-opacity: 0.6 !default;
// Opacity of the underline when hovered.
$link-underline-hover-opacity: 0.8 !default;
Your underlines can be initialised where necessary using the text-link()
mixin. By default, it will use the variables above - however, you can override them in-context if necessary.
a {
@include text-link($color: palette(blue), $hover: $color, $offset: $link-offset, $opacity: $link-underline-opacity, $hover-opacity: $link-underline-hover-opacity);
}
This mixin is intended to be used with inline links, but will also work with inline-block
if top and bottom padding is equal. Otherwise, you can manually adjust the link-offset
value to correct for uneven padding.
Alternatively, you can remove fancy underlines by including the reset-link()
mixin on the element.
###Why did we make this? Web typography, as we see it, is broken. For a full explanation on why MegaType exists, read our blog post!
###Extras A few extra goodies.
- See
_typography.scss
for some functions that can easily return information from your typeface configs. - An optional color palette config is included, see
_config.scss
and_map-helpers.scss
for - The
typeset
mixin sets some background position for easily replacing ugly default text decoration with background gradients (can be disabled with$link-underline-support
in_config.scss
). See_text-link.scss
for a self-explanatory helpertext-link
mixin. - See
_toolset_easing.scss
for some handy functions to use in animation easing - See
_toolset_units.scss
for some handy unit conversion tools
###Bootstrap example Looking for an example bootstrap integration? We've set up a basic example here, based on the yeoman webapp generator.
- Megatype Susy 2 example
- More example tests
- Default config templates
- Example themes?