article:
Elements Design: Slick Pagination Links
article:
Elements Design: One% CSS Grid Fluid CSS Grid System

Typography: Ligature Symbols

Advertisement

"Web fonts are fonts that are linked to another fonts to enload into your web pages. Web fonts are great because they add variety to the font you have your disposal. They can however add loading time into your web pages and even quality and well-designed web fonts are not always designed for the screen. Many fonts are for print. You have to look strokes and spaces for the web fonts."


Resource Typography: Ligature Symbols


Screenshots

samples - all
Resource Typography: Ligature Symbols

logo
Resource Typography: Ligature Symbols


Implementation

into CSS

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.05.eot');
    src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.05.woff') format('woff'),
         url('LigatureSymbols-2.05.ttf') format('truetype'),
         url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols-2.05.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

into HTML

<p>Simple use for mailto link.</p>
<a href="mailto:mail@example.com" class="lsf">mail</a>

<p>Use tha icon with text.</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>


"Always look carefully at the quality, legibility of any font if you are thinking of using."


source
download

Advertisement
Tags: web, fonts, webfonts, symbols, sociallinks, social, develop, font-face, font, face, design, layout, typography

Leave a Comment

No Comment

© Creative3x Ltd.