mikejones Interested what you use for your font CSS here.
The font used here is “Poppins” (as in “Mary”) - it’s a Google font, and available here. However, I have “tailored” this font somewhat in terms of letter spacing, and line height. The CSS I use for that is here (it’s set at body level meaning I don’t need to worry about individual classes)
body {
font-family: "Poppins";
color: #CCCCCC;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: .0125em;
background: #242425;
}
I elected to host this font locally, in order to reduce unnecessary HTTP requests. In the Custom Footer of this site, I use
<style>
/* poppins-regular - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
}
</style>
And to download the fonts locally, you can use the Google Font Helper here
I’ve played with various fonts over the years, and was looking for the ultimate in readability. I think I’ve finally found it, and am using it here 🙂 The key to getting the font size right is to use em rather than px. It scales well on mobile devices, and I use it as follows in CSS. One final touch is to use a text-shadow CSS class. I’ve avoided it here, but it’s useful in headers to make text stand out. A word of warning though - don’t overuse it.
font-size: 1rem;
