This week's edition of blog will be about CSS and scaling again, but it will be all about the font. Having text be easily readable without any ill effects seems to not have much attention as the functionality on some websites, apps, and devices. Scaling of the text, typeface, and colors are all important to making a font readable. In this week's exploring time was spent into researching just what CSS properties to use and the best values. It was certainly less exploration than getting an image with an image map to scale and track with mouse input but still contained trial and error to get visually correct. In this edition of blog ill be going over how I prefer my font to be read and how I went about scaling.
Having text readable on a website, app, or device is a bit key of the UI portion of things. If it is easy to read and not eye-straining perhaps the user stays and continues on. How can the text be eye-straining in the first place? In a few ways first, with the contrast of the text color compared to the background color, it appears on. Second the spacing between each character within the text. Thirdly the spacing between each line of text. Lastly how many characters are within each line of text. There may be other things that can cause text to be ill-suited to read beyond just this as well.
Having a proper contrast of the text compared to what background it appears is strongly key. Chrome luckily comes with a color picking tool that as contrast ratio tool built into it. When selecting a color for text, you are able to see the current contrast ratio of the color along with ratings and if it currently passes or fails them. These are accessibility ratings and a rating of AA is the minimum and AAA is ideal. There are also two lines on the color picking view, if the background is light, the color selected should be below, opposite for a background that is dark.
Spacing between each character in text is needed as well, by default it's pretty okay, but you can change this to make the text more easily readable. Getting the spacing can be trial and error depending on the font and how you want the text presented, too far apart or too loose and eye strain begins. The height between each line of text is something you can do by right away to make the text much more readable, there are various methods out there for how to math it in the CSS property but there are easily a few commonly used methods / best practice out there.
Lastly, there is how many characters per line of text you want to be presented. If there is not enough it will get annoying having to read many lines of text quickly, too large and you end up straining your neck, eyes, or worse. There best practice for this amount seems to be 45–75. All of these but the number of characters per line can help prevent the Halation effect. This effect is when one color appears to bleed into another at the edges, in this case making the text look blurry.
Hopefully, this weeks adventure into text scaling, spacing, color, line height and characters per line, helps you create more easily readable text. Next is to further tinker and continue research on how to make UI easy on the eyes visually and to use with a combination of whats in muscle memory and what gets to where the user wants in the fewest amount of clicks. Thanks for spending time going over this edition of blog.
