Throughout the course of this demo we will discuss several important concepts and tools to help create consistent design systems in your websites. Using the article you chose from the Rhizome Net Art Anthology in your studio class,
Reusable Type Systems
Working with Custom Fonts
If you have a ttf or otf file, you may user an online generator, such as Transfonter, to convert the font to the best web-ready formats, which are woff and woff2.
You can also use online font repositories such as Adobe Fonts(instructions on how to use Adobe Fonts are here). Adobe Typekit should be free if you have a Adobe subscription. Other free alternatives such as Google Fonts also exist, but are much more limited in the choice of fonts.
Declare the font family by linking to your woff and woff2 files(or the other file types of the font, if relevant). You’ll need to update the path in the url to point to the actual location of the files within your project directory. If you are using an online font service such as Adobe Fonts or Google Fonts, follow their instructions during this step.
Next, I like to use reusable class names to represent each of the type styles within the design. Hopefully you don’t have too many different type variations. Even a large and complex website typically won’t have more than 10-15 type styles if the designer does a good job of maintaining a consistent type system.
.body-text {
font-size: 18px;
line-height: 1.4;
font-family: 'futura', sans-serif;
}
.title {
font-size: 34px;
line-height: 1.2;
font-family: 'futura', sans-serif;
}
.small-title {
font-size: 18px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 1px;
font-family: 'futura', sans-serif;
}
With these classes, it is easy to declare typographic styles in my HTML document in a modular and consistent way. You only need to define your type styles as class names once, then you can reuse those classes throughout your document. If any of the type styles change, you only need to update them in your CSS file in once place.
Reusable Type Systems
Working with Custom Fonts
@font-face { font-family: 'futura'; src: url('assets/fonts/futura-regular.woff2') format('woff2'), url('assets/fonts/futura-regular.woff') format('woff'); font-style: normal;}Modular Type System with CSS Classes
.body-text { font-size: 18px; line-height: 1.4; font-family: 'futura', sans-serif;}
.title { font-size: 34px; line-height: 1.2; font-family: 'futura', sans-serif;}
.small-title { font-size: 18px; font-weight: bold; line-height: 1.2; letter-spacing: 1px; font-family: 'futura', sans-serif;}<!DOCTYPE html><html> <head> <title>Type Styles Test</title> </head> <body>