A serif is a slight projection finishing off a stroke of a letter in certain typefaces. Example:

Serif font

Sans serif font

See the difference? A longstanding, informal rule is that serif fonts are easier to read than sans serif fonts because the little flourishes make each letter more distinct. Another widely accepted axiom is that sans serif fonts are better for online media because of the limitations of pixels and displays. However, neither of these “rules” have been scientifically proven and, more likely, is a matter of familiarity and taste. (Serif fonts have existed for centuries, while sans serif fonts are newer.) Also, advances in both printing technology and digital display have largely neutralized any differences in readability. Today it is more about messaging.

According to many graphic designers, the messages underscored by serif typefaces are classic, confident, elegant, and established. The messages most associated with sans serif typefaces are clean, direct, friendly, modern, and minimal.

The bottom line is that maybe there is a difference in legibility between the fonts, but this difference is so negligible it should not be the determining factor in your font choice. Ignore the old myths and focus more on the messaging. Are you trying to convey elegance and formality or cleanliness and minimalism?

(function($) { var $animation_elements = $('.et-waypoint'), $window = $(window); function check_if_in_view() { var window_height = $window.height(), window_top_position = $window.scrollTop(), window_bottom_position = (window_top_position + window_height); $animation_elements.each(function() { var $element = $(this), element_height = $element.outerHeight(), element_top_position = $element.offset().top, element_bottom_position = (element_top_position + element_height); //check to see if this element is within viewport if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { $element.addClass('et-animated'); } else { $element.removeClass('et-animated'); } }); } $window.on('scroll resize', check_if_in_view); })(jQuery);