Improving the Twentyseventeen theme with a dash of CSS
A bit of CSS can do so much!

I have been practicing tweaking Wordpress themes to be able to offer affordable web design for individuals starting their new projects. And luckily, most of the time you can do great magic with some simple css on the basic themes from wordpress. This, in my opinion, reduces the risk of choosing a crappy theme from an online market, and gives you a lot more freedom if you work with system fonts or web-based ones. Lets consider this little case an example.
By adding a bit of CSS i changed the normal install of the Twentyseventeen theme from Wordpress and made it look from this

To this:

Basically all I did was choosing the css elements most frequently used and blowed them up a bit with some heavy duty em’s. They would be very readable even on mobile regardless of the platform, and they would be appealing as all the new system fonts are also quite beautiful.
Putting this code would do the magic.
body, a, h1, h2, h3, h4{
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif !important;
text-align: left;
letter-spacing: 0px !important;}h1 {font-size: 4em !important;
text-transform: none !important
}
h2 {font-size: 3em !important;
text-transform: none !important;
}
h3 {font-size: 2em !important;
text-transform: none !important;
font-weight: 700 !important;
}p, .textwidget {font-size: 1.5em !important
}
⚠️ Although Careful! The change in fonts might cause your current layout to look very different. Specially if you have more than one column in your setup.
I encourage you to do this on a fresh install so you can tweak it to your own content better.
I hope this works nicely for your design needs. Feel free to recommend updates on the comment or this post’s github gist.

