Skip to main content

Home/ Tools for web developers/ Group items tagged font

Rss Feed Group items tagged

Vernon Fowler

Get Started with Font Awesome - 0 views

  • Super-simple upgrades Since each site gets a unique embed code, you can easily upgrade to the latest version of Font Awesome, all without pushing any code. Easy peasy.
  •  
    Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap 3!
Vernon Fowler

The Ultimate Guide to Golden Ratio Typography - 0 views

  • The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.
  • Font size and line height are proportionally related.
  • For any font size, the line height must increase as the line width increases.
  • ...1 more annotation...
  • For a font size of 16px, the perfect line height is achieved when h equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.
Vernon Fowler

Font Awesome CDN - 0 views

  • ways to help technology that supports impairments, like screen readers, either ignore or better understand the Font Awesome icons you're using
  • For icons that have semantic or interactive meaning, this means you'll need to provide a proper text alternative to be used.
  • title="Submit My Tax Return"
  • ...5 more annotations...
  • For icons that have semantic or interative meaning
  • <span class="sr-only">Submit My Tax Return</span>
  • What do you mean by Auto Accessibility?
  • Make sure the CDN Embed code is the only way you're using Font Awesome.
  • For icons that are decorative Font Awesome CDN's auto accessibility feature will make sure it is ignored by assistive technology. There's nothing extra you need to on top of how you would usually reference an icon.
Vernon Fowler

Golden Grid System - 0 views

  • Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes.
  • With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content.
  • If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size.
  • ...1 more annotation...
  • GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5.
Vernon Fowler

Pearsonified's Golden Ratio Typography Calculator - 0 views

  •  
    "Discover the perfect typography for your website by entering your current font size and content width"
Vernon Fowler

CSS Tools: Reset CSS - 0 views

  •  
    "The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Vernon Fowler

Welcome To The 404 Checker - 0 views

  • Check the HTTP Status code being returned by a partcular webpage, image or document. Useful for checking that your custom error pages are returning the correct codes.
  • View the full header returned from a HTTP request. Useful for debugging, optimisation and for general interest. Click the icon next to each header directive for more information about that item.
  • The link checker will fetch all links on a page and check each in turn for their status. Useful for location broken links on a page.
  •  
    "404 Checker is a website full of webmaster tools and information about your website, internet connections and protocols. Please consult the list below for information about the tools available. The information section (accessable from the menu on the left) contains information about HTTP Status Codes, and also instructions about how you can customise your servers response to these codes. The references section contains information about where to get more information."
Vernon Fowler

Grumpicon. A Web app for the Grunticon workflow. - 0 views

  • To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.
  • Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).
  •  
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
  •  
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
1 - 11 of 11
Showing 20 items per page