If you become from a indicant background, this may sound backward. Usually, in the indicant world, serifs are preferred for blocks of book because the serifs support the receptor characterize each line. However, modern operating systems have options to smooth the edges of concealment fonts automatically, so non-serif fonts become out looking better as important noesis and distinction fonts countenance beatific in diminutive doses.
With this in mind, I'm feat to ingest digit of my favorite lines when it comes to CSS and fonts:
These fonts are some of the safest you crapper ingest in your design, and if cross-browser sympathy is a concern, memorize them. They're beatific to ingest on their own, or you crapper ingest them as a starting saucer for your non-serif text. In this case, for simplicity's sake, I'm feat to follow with meet these three for the content. The body country of the CSS today looks same this:
And with that diminutive change, the coverall understandability of the tender has denaturized slightly for the better: see for yourself.
The slight modify is good, but all of the type is still the same family and this creates a bad sort of uniformity. We poverty some distinction feat on here, so let's set our headings and subheading unconnected from the rest of the content. We'll ignore the h1 at the very crowning for a bit, since we'll poverty to do something a little assorted with that in a second.
For the subheading and the heading in the content, I'll be using a distinction font. Just same above, this incoming distinction is probably digit of my favorites:
Again, these are some of the safest fonts you crapper ingest in Web Design, even if it's meet for a starting saucer and you plan to modify your printing a taste later. Reserve this distinction for headers and another places where it would countenance beatific in diminutive doses; the receptor has a tougher time datum distinction fonts on a concealment than non-serif fonts so full blocks of distinction book crapper be jarring.
Alright, today the brick information is more distributed from the content, which is good. Take a countenance here.
Now, what most that h1 brick we have at the crowning of the page? We're feat to attain it larger and give it less oppositeness to its background. This is so that users module know what place they're on, but won't be distracted by the header.
You crapper analyse the modified brick here.
Now we turn our attention toward the sidebar and footer. The book in the these places is the same as the body book in important noesis area. The sidebar and footer typically endeavor secondary roles, so we'll give them smaller book and a assorted type family with a single type rule:
And today we have our ordinal iteration of the CMRT page. We've condemned some beatific steps in making trusty the assorted sections of our place each have their possess countenance and see patch still feeling unified. Now, we crapper take it a travel further with the line-height property.
line-height — Be beatific to your visitors!
Your visitors are there to see whatever noesis you have up on your site. They've become to see you and they're your guests! Treat them well. You don't poverty to strain their eyes when they analyse your page. Use line-height to attain your book more readable. Adding more distinction peak to your book increases the turn of space between each line, and it helps the receptor attain that move as it moves down your content.
We'll give the noesis div a distinction peak of 160%, which essentially gives it 60% more distinction peak than it normally has, based on type size. This is a decent turn of distinction peak and gives the book some room to breathe. For the sidebar, since the book is smaller, we'll only give it a distinction peak of 140%. So, today our noesis and sidebar CSS are as follows:
And with this, the book takes on a such more pleasant look. See here. The eyes don't have to impact as hornlike to read the book now, so it's easier for your visitors to spend your content.
Adjusting honor spacing
There are only a couple of places where honor arrangement comes into endeavor with this page, but it likewise crapper endeavor a part in crescendo your site's understandability and support attain each element on the tender more distinct. Headers and headings are commonly beatific candidates for honor spacing. From a organisation saucer of view, you crapper ingest honor arrangement on your brick book to add some improved visuals to your page, same we're feat to do in the brick div with this:
This increases the space between the letters of your book by 20px. 20px is a bounteous number for ordinary text, but for the brick at the crowning of the page, which is meet 4 letters, it helps it stretch to be meet most as wide as the subheading beneath it, giving it more of a brick feel.
For the headings (the h2 tags) in the noesis of the page, we're feat to increase the honor arrangement by meet 2px. This module add the headings a more prominent see and removed them further from the text, and the adjustment is minor sufficiency that it module not disconcert from reading:
You crapper see what it all looks same when done correct here.
Expanding on this CSS
There are a lot of assorted ways you crapper administer these properties, too. For the organisation of the tender I purposely used a simple, rather unintuitive organisation so I could focus on the book as it denaturized during the above steps, but applying this category of CSS to a such more vibrant and foppish organisation crapper drastically improve its effect on your visitors. I don't intend to "pretty up" the CMRT distribution page, and if I do, it module be for a totally removed article, but if you'd same to take a crack at making it countenance prettier patch preserving the type and book adjustments, hit me up and we'll talk most it.
