Choice of font:
I have chosen 'Source Code Pro' as my primary typeface due to it being divergent in comparison to what is being displayed on other websites. It fits my target group exceedingly well as it is an aberration for what is usually seen as readable. There is still harmony despite it being provocative, and this is due to me limiting the text in each paragraph, as well as there being leeway surrounding the text. As for the title and other elements, the typeface I have chosen is called 'Oswald'. It has a very prominent appearance and is similar to the 'bastard' logo, especially when condensed instead of extended.
Process:
Before I started making the rules, I researched the possibilities of using monospace as a primary font. I had to consider the appearance of the font in a paragraph, as well as a convenient line height when there’s a list of buttons.
Workflow & structure:
After figuring out how the typography should act, I could start making rules in css for them. I have divided the rules for the typography into four parts: general, mobile, tablet and desktop. With that setup, I can make general rules that I know should be the same across all platforms. And the rules that are for a specific platform, I can insert in the corresponding categories. For example, if it is a rule that should appear both on tablet and desktop, but not on mobile, I can choose to write them with the general rules and turn them off on mobile. But there are very few times I choose to do that, as it quickly becomes a mess and is harder to turn off on mobile, than just typing the rules in the categories 'tablet' and 'desktop' where they belong.
Example is showcased below:
html {
--color: hsl(20, 100%, 100%);
--grey: #666;
--lightgrey: #bbb;
}
* {
font-family: 'Source Code Pro', monospace;
}
h1,
h2,
h3 {
font-family: 'Oswald', sans-serif;
color: var(--color);
}
p {
font-size: 14px;
line-height: 22px;
}
a {
color: #000;
display: block;
}
span.grey {
color: var(--grey);
}
span.lightgrey {
color: var(--lightgrey);
}
/*NAV*/
a.nav {
font-size: 16px;
display: inline-block;
}
a.nav-dropdown {
color: #000;
font-size: 16px;
font-weight: 200;
}
/*FRONTPAGE*/
.frontpage {
color: white;
text-align: center;
}
h2.frontpage {
font-weight: 500;
margin-bottom: 30px;
}
h2.frontpage.fall {
font-size: 72px;
}
a.frontpage {
font-size: 16px;
padding: 10px;
border: 1px solid #fff;
}
/*MEDIAQUERY*/
/*MOBILE*/
@media screen and (min-width:320px) and (max-width:480px) {
/*NAV*/
a.nav {
font-size: 18px;
text-align: right;
line-height: 46px;
}
a.nav-dropdown {
color: #fff;
margin-right: 15px;
line-height: 36px;
font-weight: 400;
}
}
Occasionally the text needs to be one of the two selected grayscale colors. I made it easy by
creating <span class="grey"> </span> and <span class="lightgrey"> </span>, which you can
quickly wrap around the text in the html.