Cutup #1 Set up Typography
Today, I would like to share with you how to set up Typography (web font) in your boilerplate or framework.
① Get Web font loader
Go to the web font loader and copy below snippet.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>② Paste it in the html <head>
③ Replace the font families to what you want from ‘Droid Sans’. You can check (or copy) specific font families and weights in Google fonts like the images below.
④ Make variables in the Sass file
- Font family
- Font weight
- Font size
- Line height
- Letter spacing
- Margin
- etc
I’ve designed based on Material design system.
/* Variables */// Base font
$base-font-scale: 1; //The font scale multiplier (e.g. 2=32px/2em.2rem)
$base-font-pixel: 16; //Used for font size calulations & conversions
$base-font-color: midnightblue; //#191970$font-family-roboto: 'roboto', sans-serif;$font-light: 300;
$font-regular: 400;
$font-medium: 500;
$font-bold: 600;
$font-black: 900;/* Fuctions */
@function rem($pixel) {
@return $pixel/$base-font-pixel + rem;
}/* Custom Styles */
body {
font-family: $font-family-roboto;
color: $base-font-color;
}h1 {
font-size: rem(96);
font-weight: $font-light;
letter-spacing: -1.5px;
}h2 {
font-size: rem(60);
font-weight: $font-light;
letter-spacing: px;
}h3 {
font-size: rem(48);
font-weight: $font-regular;
letter-spacing: px;
}h4 {
font-size: rem(34);
font-weight: $font-regular;
}h5 {
font-size: pxToRem(24);
font-weight: $font-regular;
}h6 {
font-size: rem(20);
font-weight: $font-medium;
}.subtitle1 {
font-size: rem(16);
font-weight: $font-regular;
}.subtitle2 {
font-size: rem(14);
font-weight: $font-medium;
}.body1 {
font-size: rem(16);
font-weight: $font-regular;
}.body2 {
font-size: pxToRem(14);
font-weight: $font-medium;
}a {
font-size: rem(14);
font-weight: $font-medium;
text-transform: uppercase;
}caption {
font-size: rem(12);
font-weight: $font-regular;
}.overline {
font-size: rem(10);
font-weight: $font-regular;
text-transform: uppercase;
}
Let’s review the declarations in each rule.
$font-family-roboto: 'roboto', sans-serif;As you can see from the snippets above, I gave sans-serif after roboto. Because when Roboto font couldn’t be downloaded, the defaulted sans-serif font will be used instead.
/*Base font*/
$base-font-scale: 1; //The font scale multiplier (e.g. 2=32px/2em.2rem)
$base-font-pixel: 16; //Used for font size calulations & conversions/* Fuctions */
@function rem($pixel) {
@return $pixel/$base-font-pixel + rem;
}
The above code converts from px to rem.
px is an absolute value and rem is a relative value so more flexible.
I have already written about this issue. Please check `Web Unit: px to REM’ .
Another last tip about typography.
Default space inside font
When you look at the picture above, there is actually a gap. We cannot remove this because this font actually came with this space. This is important to have an enough discussion and make a good agreement about this default space between designers and frontend developers.
Padding and Margin
The padding in the typography isn’t overlapped each other. Therefore it looks like there is 40px gap (but actually there is no gap).
On the other hand, the margin in the typography gets overlapped and follows the bigger margin value. Like the above picture, if we apply:
h1 {
margin-bottom: 10px;
}h2 {
margin-top: 20px;
}
we will get 20px margin between h1 and h2.
When we design a gab between H1 and H2, which one between padding and margin do we use? I recommend to use margin, because we can get the same constant margins between headings and paragraphs.
📖 Guides
🎈 That’t all for now
💌 Any questions or feedback
I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.
☕️
Lastly, I would love to share <FrontEnd30 /> where I learnt many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.
