Process:
The rules for the typography have changed a lot, since I got started on the website. At first it
was pretty static, so it's really good that I've learned a lot since then.
After discovering the trick to a responsive design, I've eliminated a lot of rules I didn't need
and adjusted the font sizes.
Workflow & Responsiveness
When I got started, I was just throwing in rules I just needed then, without thinking about
whether or not I need them.
But as I've written in the example, there are some ground rules for what should be consistent no
matter what platform you're using. And under @media you can see
how I've assigned the different font sizes and adjusted the line height if needed.
Instead of using pixels as my value of choice, I've made a calculation that uses the width of
the browser window. An example is shown underneath, with rules for both general .css and
mobile-device.
/*
Typography
*/
h1 {
line-height: 1.3;
}
h2 {
line-height: 1.3;
}
p {
font-weight: 400;
line-height: 1.4;
}
/*
MEDIAQUERY
*/
@media screen and (min-width:320px) and (max-width:480px) {
/*
Typography
*/
h1 {
font-size: calc(0.5*22vw);
}
h2 {
font-size: calc(0.5*18vw);
}
p {
font-size: calc(0.5*8vw);
line-height: 1.6;
}
}
I've made mediaquery for mobile, tablet and desktop. That means there are four sets of rules; for general and the mentioned platforms.
Code snippets:
html:
<code class="inlinecode">
<tag>
</code>
<code class="blockcode">
<<span class="c-red>main</span> <span class="c-orange">class=</span><span class="c-green>"..."<span>>
Result:
<main class="...">
</code>
css:
code.inlinecode {
display: inline;
padding: 1px 4px 0 4px;
font-weight: 400;
color: #272b33;
background-color: #dddddd;
border-bottom: 1px solid #ccc;
}
code.blockcode {
display: block;
line-height: 1.5;
white-space: pre;
padding: 0 1rem;
margin-bottom: 1em;
font-weight: 600;
color: #abb2bf;
background-color: #272b33;
}
.c-red {
color: #e06c75;
}
.c-orange {
color: #d19a66;
}
.c-... {
color: #...;
}
Writing the snippets of code was troublesome, because I had to put a tonne of spans around words
and signs. It wasn't really hard, it was just routine.
Despite the hard work, I think it was really worth it.
Static text:
The text in my <nav> and <footer> have a fixed font size, because the parent element
doesn't change in height.
I've upheld their responsiveness by assigning different values for each platform, so the only
way to tell the difference is by switching between platforms.