011 027 5098 | 079 157 2902
  • About Us
  • Blog
  • Support
  • Contact
BP Web DesignBP Web DesignBP Web DesignBP Web Design
  • Home
  • Websites
  • E-commerce
  • Custom Design
  • Hosting
    • Web Hosting
    • Virtual Private Servers
    • Dedicated Servers
    • Reseller Hosting
  • Corporate Branding

HOW TO OPTIMIZE FOR LEGIBILITY USING TEXT-RENDERING

    Home Uncategorized HOW TO OPTIMIZE FOR LEGIBILITY USING TEXT-RENDERING
    NextPrevious

    HOW TO OPTIMIZE FOR LEGIBILITY USING TEXT-RENDERING

    By kaimbi | Uncategorized | 0 comment | 27 July, 2015 | 0

    The most irritating facet of internet design for designers educated for print, is the persistent lack of typographic management.

    Careful typographic decisions are the hallmark of high quality work and the dearth of that high quality on-line by no means ceases to be jarring for these of us that know what we’re on the lookout for.

    Fortunately, the extent of management that now we have is rising on a regular basis and assist for extra superior typographic rendering can be rising. Whilst it’s definitely not doable to ship the form of therapy that purposes like Illustrator ship — the place each letter will be tweaked if required — there are instruments out there to extend high quality. One of the least recognized is the textual content-rendering property.

    You gained’t discover the textual content-rendering property in any CSS specs as a result of it’s technically not CSS, it’s an SVG property, though it’s used similar to a CSS property. The most necessary factor is that with a single line of CSS, we will remove just a few rivers and different imperfections from our textual content.

    The textual content-rendering property has 4 settings:

    • auto: permits the browser to decide on a setting itself
    • optimizeSpeed: focuses on pace
    • optimizeLegibility: focuses on superior rendering
    • geometricPrecision: exact rendering

    Sadly, using the browser default ‘auto’ will usually favor pace reasonably than legibility — indicative of a normal finalized by builders as a substitute of designers.

    As most of us don’t produce pages which can be substantial sufficient to justify the necessity for the optimizeSpeed setting, we’ll solely actually be fascinated with optimizeLegibility (though geometricPrecision is beneficial for sure fonts).

    The CSS code is as follows:

    .myClass  textual content-rendering: optimizeLegibility; 

    Here’s a direct comparability of optimizeSpeed and optimizeLegibility, as you possibly can see should you look carefully, there are two important enhancements within the extra legible model: the ‘ffi’ characters within the first line have been accurately changed with a ligature, and the kerning has been improved all through, which is very notable within the fifth line, the place the house between the ‘S’ and the ‘e’ has been corrected.

    The kerning enhancements will be seen extra simply in these overlays:

    Chrome Mac

    Chrome Windows

    Firefox Mac

    Firefox Windows

    Internet Explorer 9 Windows 

    Safari Mac

    Browser assist is at present inconsistent, nevertheless, the truth that textual content-rendering fails silently in browsers that don’t help it, implies that it’s very usable proper now.

    Do you utilize the textual content-rendering property in your CSS? Would anybody however a typographer even discover the distinction? Let us know your ideas within the feedback.

    No tags.

    Leave a Comment

    Cancel reply

    Your email address will not be published. Required fields are marked *

    NextPrevious
    Copyright 2019 BP Web Design | All Rights Reserved. A BP Web Group Company
    • Home
    • Websites
    • E-commerce
    • Custom Design
    • Hosting
      • Web Hosting
      • Virtual Private Servers
      • Dedicated Servers
      • Reseller Hosting
    • Corporate Branding
    BP Web Design