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)
I elected to host this font locally, in order to reduce unnecessary HTTP requests. In the Custom Footer of this site, I use
/* poppins-regular - latin */
src: url('/fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
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 */
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.