Download Overused Grotesk - Download de código fonte Overused Grotesk

Overused Grotesk

Baixar fonte

v0.5-alpha.1

Baixar

Grotesk exagerado

De uma zombaria idiota do design do tipo "suíço" superutilizado a um cavalo de trabalho semi-sério, grotesk excessivamente usado se transforma em um imitador imitando as características mais distintivas da onipresente Helvetica. No entanto, o tipo de letra não para de ser puramente um imitador; Ele quer ser um multiuso e multilíngue, embora peculiar e sem graça.

Esse tipo de letra foi originalmente servido como uma forma de "exposição" para usuários de Fontforge. Infelizmente, devido ao desenvolvimento soberbamente rápido, juntamente com o mau fluxo de trabalho e o mau gerenciamento, o projeto rapidamente se tornou incompreensível para um iniciante absoluto. SOOO OOPSIES

As fontes são gratuitas e de código aberto, e quaisquer contribuições seriam muito apreciadas. Se você planeja mostrar esse tipo de letra para alguém ou enviá -lo a uma coleção de fontes, lembre -se de vincular este repositório . Não é obrigatório, mas economiza muitas dores de cabeça (confie em mim).

Grotesk exagerado

Estilos

Nome do estilo	wght	wdth	-	Nome do estilo	wght	wdth	slnt
Luz	300	100	-	Itálico leve	300	100	-10
Livro	350	100	-	Livro itálico	350	100	-10
romano	400	100	-	itálico	400	100	-10
Médio	500	100	-	Itálico médio	500	100	-10
Semibold	600	100	-	Semibold itálico	600	100	-10
Audacioso	700	100	-	Itálico ousado	700	100	-10
Extrabold	800	100	-	Extrabold itálico	800	100	-10
Preto	900	100	-	Itálico preto	900	100	-10

Recursos e adições notáveis

Inclui letras vietnamitas e cirílicas (com formulários localizados)
12 conjuntos estilísticos + 5 variantes de caracteres
Sub & Superscript, denominadores e numeradores, Slashed Zero, figuras tabulares, notações matemáticas, frações
.ttf, .otf, .woff, .woff2 e fontes variáveis .ttf
Letras IPA (diacríticas semifuncionais e letras de tom, ainda muito básicas)
Símbolos da moeda: $ ¢ £ ¤ ¥ ֏฿₠₡₢₣₤₥₦₧₨₩₪₫ € ₭₮₯₰₱₲₳₴₵₶₷₸ ₹ ₺₻₼₽₾₿ ₺₻₼₽₾₿
Setas (demais, 84 para ser exato)
Ligaturas discricionárias semelhantes a scripts (FI, FF, FL, FFI, FFL)

Planos

Após a v1.0 - antes da v2.0

Mais larguras (5 larguras estáticas: comprimido - condensado - normal - estendido - de largura)
grego
Pequenas tampas
Construindo cartas mais acentuadas (específicas de latim)

⏳ em andamento

Afinação
Terminando em itálico

Fontes variáveis para a web

Tanto a fonte quanto a pasta de liberação incluem uma fonte variável .woff2, que você pode incluir no seu site e consultar o uso de CSS, incluindo algo como as linhas de:

base.css

 : root {
    --font-sans : "Overused Grotesk" , -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Oxygen" , "Ubuntu" , "Cantarell" , "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
    --font-serif : Georgia , Times , serif;
    --font-mono : Menlo , Courier , monospace;
}

@font-face {
  font-family : "Overused Grotesk" ;
  src :
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2 supports variations" ) ,
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2-variations" );
  font-weight : 300 900 ;
}

Para reduzir a mudança de layout cumulativa, você pode pré -carregar a fonte e usar o observador de face da fonte para exibir a fonte incrivelmente rápida.

base.html

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < title > Static HTML is King ? </ title >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width " >
    < link rel =" stylesheet " href =" /css/base.css " >
    < link rel =" preload " href =" /fonts/OverusedGrotesk-VF.woff2 " as =" font " type =" font/woff2 " crossorigin >
  </ head >
  < body >

    < main >
      < h1 > Static HTML is King ? </ h1 >
    </ main >
 
    <!--
    https://fontfaceobserver.com/
    To load a font, call the load method on a FontFaceObserver instance.
    It’ll return a promise that resolves when the font loads, or rejected when the font fails to load.
    -->
   < script src =" /js/fontfaceobserver.js " > </ script >
   < script >
   var font = new FontFaceObserver ( 'Overused Grotesk' ) ;

   font . load ( ) . then ( function ( ) {
     console . log ( 'Overused Grotesk has loaded.' ) ;
   } ) . catch ( function ( ) {
     console . log ( 'Overused Grotesk failed to load.' ) ;
   } ) ;
   </ script >

  </ body >
</ html >