Vivi i caratteri di prova sul browser facilmente con Font Dragr

La tipografia contribuisce all'esperienza di lettura di un sito, motivo per cui i web designer trascorrono molto del loro tempo a trovare grandi caratteri che si adattino al design del loro sito web.

L'applicazione di caratteri personalizzati sulla tua pagina Web richiede diversi passaggi. Selezioniamo un font, quindi lo convertiamo in un formato compatibile con il Web e quindi lo aggiungiamo alle regole di stile. È tutt'altro che efficace, soprattutto quando devi ripetere il processo più volte, con più font. Ecco un'alternativa: Font Dragr.

Font Dragr offre un nuovo modo rivoluzionario per testare i caratteri sui browser. Trascina semplicemente il carattere dalla raccolta di caratteri sulla pagina e il carattere su quella pagina cambierà automaticamente al carattere scelto. Controlliamolo.

Font Dragr è sviluppato da Ryan Seddon utilizzando la regola @font-face, l'API HTML5 Drag-n-Drop e anche l'accesso offline applicationCache, che ci consente di utilizzarlo senza la connessione Internet dopo una visita iniziale.

Supporta vari tipi di file di font tra cui TrueType (TTF), OpenType (OTF), Scalable Vector Graphics (SVG) e Web Open Font Format (WOFF). Utilizzando Font Dragr, puoi testare i caratteri in due modi:

1. Il metodo predefinito

Visita FontDragr, quindi trascina e rilascia il font in qualsiasi punto della pagina. Troverete due schede: Editor e scheda Galleria .

La scheda Editor ti aiuterà a testare i tuoi font in termini di:

• Confronto delle dimensioni del corpo
• Scala di grigi
• Dimensione del font
• Campione di testo
• Personaggi

Il testo sulla pagina è completamente modificabile in modo da poter testare qualsiasi testo desiderato.

Se hai bisogno di alcuni font da sperimentare, puoi provare a utilizzare uno dei 9 elencati nella pagina Galleria per sperimentare.

2. Utilizzo del Bookmarklet

In alternativa, c'è il bookmarklet da usare. Basta trascinare il bookmarklet nella barra dei segnalibri, quindi fare clic su di esso mentre ci si trova su una pagina Web che si desidera testare. Facciamo una demo con hongkiat.com. Il seguente screenshot è il sito prima di agire.

Dopo aver cliccato sul bookmarklet, apparirà un'intestazione (vedi sotto). Nella casella di testo Selettore, puoi specificare gli elementi HTML su cui vuoi testare il carattere. Il selettore predefinito è p, ma puoi testare body, h1, h2 ecc.

Quindi, trascina e rilascia il font nell'intestazione FontDragr.

Il testo interessato cambierà automaticamente per riflettere il carattere che hai scelto di testare. In questo scatto di seguito, il carattere che è stato modificato è contrassegnato con la casella rossa.

Il bookmarklet, purtroppo, non funziona su Facebook e tutti i siti con protocollo HTTPS . Inoltre, l'intestazione visualizzata può essere nascosta o rimossa solo se si ricarica la pagina Web.

Inoltre, la funzionalità di trascinamento della selezione sembra funzionare solo in Firefox 3.6+ e Chrome.

Incartare

Se hai mai usato altri servizi webfont simili come FontFonter, FontFriend, Web Fonts Preview o FontPrep (solo per Mac), probabilmente troverai Font Dragr il più completo e facile da usare. Ma non fidarti della nostra parola, provalo e lasciaci un commento su come l'app ha funzionato (o meno) per te.

Rendi tutti i contenuti incorporati reattivi con Reframe.js

La parte più delicata sull'incorporazione dei video sta nel correggere la larghezza e l'altezza. Questi numeri definiscono le proporzioni e quando sono spenti si ottiene un video player stupido .Questo è vero per tutti gli elementi incorporati come iframe e widget di social media. E queste cose possono essere ancora più complicate con il design reattivo perché di solito non sono elementi di risposta .Ma

(Consigli tecnici e di design)

20 cose organizzate in modo ordinato e creativo [PICS]

C'è un hashtag su Instagram chiamato #ThingsOrganizedNeatly. Sotto l'hashtag, troverai una miriade di immagini che gli utenti hanno preso delle cose ordinatamente ordinate, quasi ossessivamente compulsivamente.Se non avessi saputo dell'hashtag, potresti aver trovato un blog Tumblr che raccoglie tutte queste immagini.

(Consigli tecnici e di design)