recentpopularlog in

abberdab : typography   139

« earlier  
Sharp Grotesk
Like Frutiger’s Univers, Sharp Grotesk spans the gamut and explores the edges of what is possible in sans-serif typography, organizing the resulting family by width and weight using a numeric system of font naming.

The superfamily consists of 14 roman/italic pairs. The style names correspond with a number: 05 - 25, which represents the 21 widths in which Sharp Grotesk is available. For example: the narrowest and boldest font in the family is ‘Sharp Grotesk Black Italic - 05’. The thinnest and widest font in the family is ‘Sharp Grotesk Thin - 25’.
fonts  typography  condensed  poster  compressed  titling  super-family 
february 2019 by abberdab
Diane Davies / London based freelance proofreader
Attractive, typographically-driven site for a freelance proofreader. Best on desktop.

Handy for design inspiration and as an example of how a proofreader markets themselves!
proofreader  freelance  examples  website:personal  typography  inspiration 
january 2019 by abberdab
Centre for Visibility Design
Bolds or italics? This and other questions answered through SCIENCE!
research  typography  usability 
january 2019 by abberdab
Precise control over responsive typography — Mike Riethmuller
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.
responsive  typography 
january 2018 by abberdab
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
Create type pairs, set a modular scale, tweak spacing between a basic type ramp of H1-H6 and paragraphs.

A nice alternative to Typecast when all you want to do is choose some fonts (Google or local fonts only) and test your typographic pairing and grid — no layout to confuse things.
css  design  fonts  tools  typography  google 
january 2018 by abberdab
100 Days of Fonts
100 Days of Fonts is a personal creative project inspired by Elle Luna the 100 Day Project. Every day for the last 99 days, I designed and coded a combination of Google Fonts, the result of which lives on this page.
design  fonts  free  google  inspiration  lists  webfonts  typography 
october 2017 by abberdab
Intentional Typography
A series of typographic system and variable font demonstration pages
These pages are intended to showcase both typographic techniques applied to the web and the emerging Variable Font format. The typefaces featured are courtesy of their respective designers as noted. It would be remiss of me to not call out CJ Dunn and David Jonathan Ross in particular for their enthusiasm and generosity in beginning these demonstrations.
web  typography  variable-fonts  webfonts 
september 2017 by abberdab
Improve Web Typography with CSS Font Size Adjust — SitePoint
The font-size-adjust property in CSS allows developers to specify the font-size based on the height of lowercase letters instead of uppercase letters. This can significantly improve the legibility of text on the web.
fouc  typography  vertical-rhythm  fallbacks  dev  fout 
september 2017 by abberdab
Fun with Viewport Units | CSS-Tricks
Best use cases and ideas for using viewport units, including typography ideas and more!
css  layout  responsive  typography  hero-images  footer  aspect-ratios  scrollbars  scrolling 
june 2017 by abberdab
HTML 5.2: 4.13. Common idioms without dedicated elements
HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines. Here are the suggested alternatives. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection
css  headings  subheadings  typography  semantics 
june 2017 by abberdab
text-decoration-skip - CSS | MDN
The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
css  typography  text-decoration 
june 2017 by abberdab
Advanced vertical margins – Hacker Noon
How the adjacent sibling selector can solve complex design requirements while maintaining readable CSS.
css  typography  vertical-rhythm  margins 
may 2017 by abberdab
Typography Inspector - Chrome Web Store
Typography Inspector analyses the typography on your site and helps you improve it.

Use Typography Inspector to show how close your line width and line height are to the recommended setting for an average paragraph. It can also show you the typographic color of your text elements.
css  typography  chrome  extension  tools  utilities 
april 2017 by abberdab
Get the Balance Right: Responsive Display Text ◆ 24 ways
A more sophisticated approach to sizing display type based on the viewport width. No media queries necessary. :)
typography 
december 2016 by abberdab
Commercial Type: Robinson by Greg Gazdowicz
RELEASES | 13 SEPTEMBER 2016 A concise family of 5 weights, Robinson is the first release by Commercial Type designer
wishlist  contemporary  fonts  calligraphic  sans-serif  typography 
october 2016 by abberdab
10 Tips for Designing with Type on a Photo - Designmodo
One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully.

You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. If you feel like you are ready to take on the challenge, here are 10 tips for making it work.
design  photography  typography  contrast  readability 
september 2016 by abberdab
CSS Writing Mode
Recently, while editing some CSS in Opera inspector, I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.
css  layout  typography  vertical  writing-mode 
august 2016 by abberdab
Gridlover
A nifty tool for exploring the relationship between font-size, line-height, and measure, and scale factor.
css  grid  tools  typography  vertical-rhythm  measurements 
august 2016 by abberdab
State of Web Type
Tracks browser support for advanced typographic features.
reference  css  typography  browser-support  caniuse  crossbrowser  fonts  www 
july 2016 by abberdab
The New Web Typography › Robin Rendle
We must prioritise the text over the font, or semantics over style.
We ought to use and/or make tools that reveal the consequences of typographic decisions.
We should acknowledge that web typography is only as strong as its weakest point.
typography  design  article  open  foot  fout  progressive-enhancement  rwd  www 
july 2016 by abberdab
Codepen: Decorative Text Underline (SASS)
A nicer text underline. Variables set using Sass.
typography  underline  text  webbed  css  sass  examples 
july 2016 by abberdab
FontShop Letternews - Fonts for Editorial Design
Good editorial design makes communication easy. Only the best stories, with compelling illustration and photography, and outstanding typographic schemes can power the editorial staff through to their next publications.
typography  editorial  design  fonts 
june 2016 by abberdab
Mindwork, Clinical Social Work/Therapist, New York, NY
Website for a counselor in New York. Type does the heavy graphic lifting, the design is focused and calming. My only quibble, centering the paragraph text. Otherwise, a nice take on the sole consultants website with service, about, process...
inspiration  typography  consultant  website  about  examples  design  www 
june 2016 by abberdab
Everything I know about responsive web typography with CSS — Zell Liew
Responsive typography is a tough nut to crack. This was the best method I could come up with when I first started creating responsive websites: p { font-size: 16px; } @media (min-width: 800px) { p {
typography  vertical-rhythm  articles  typography:vertical-rhythm  rwd 
january 2016 by abberdab
Writing in Markdown | Five Simple Steps
Really nice example of type pairing and typography in general here.
typepairs  examples  inspiration  typography  markdown  client-education  design  www 
july 2015 by abberdab
typeplate/starter-kit
Used in Rachel Andrew’s examples in her CSS Grid Layout book, also similar to/inspired by the Sassaparilla framework approach to type.

Rule #1 in Typeplate Club… Always use <meta charset="utf-8"> in your document <head>. Doing so alleviates authors need to use a charset from within a stylesheet. Anything imported into a document using <meta charset="utf-8"> is encoded as utf-8 globally.

Based on use cases for most developers' workflow, we recommend using Typeplate just after your reset stylesheet (i.e. normalize) and your compass @import in order to operate as we've intended, but as you'll see from our demo it isn't necessary.
typography  css  sass  boilerplate 
august 2014 by abberdab
Pinboard: public bookmarks for stewf
Really handy reference for all things typographic!
bookmarks  typography 
august 2014 by abberdab
wordmark.it - helps you choose fonts!
Type a word. It displays in every. single. font. installed on your computer. Wordmark:
typography  tools  visualization 
july 2014 by abberdab
Typeplate » A typographic starter kit encouraging great type on the Web
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.
css  design  sass  typography 
march 2013 by abberdab
Webtype Font Swapper
Preview how websites will look with fonts from Webtype
typography  webfonts  tools  dev  design  www 
december 2012 by abberdab
Le Jet — Propulsion Systems & Haute Couture | Webtype > Blog
OpenType features are available for a select few browsers. See this article for examples and css browser prefixes.
opentype  typography  webfonts  css  browser-prefixes 
december 2012 by abberdab
"Equity" font at Typography for Lawyers
Intro­duc­ing Equity, a text font I’ve designed, inspired by legal typog­ra­phy and the needs of legal writ­ers.

Equity is mod­eled on one of my favorite fonts of the 1930s, Mono­type Ehrhardt. Like Times New Roman, Ehrhardt was made under the super­vi­sion of Stan­ley Mori­son. Morison’s goal was a hand­some face in the Jan­son style, but with the space-saving fea­tures that had made Times New Roman such a hit. So Equity is rooted in the virtues of clas­sic, ele­gant let­ter­press typog­ra­phy.
typography  fonts  wishlist 
december 2012 by abberdab
"Concourse" font at Typography for Lawyers
Intro­duc­ing Con­course, a sans serif fam­ily that takes inspi­ra­tion from the great geo­met­ric sans ser­ifs of the 1930s, but that doesn’t skimp on ver­sa­til­ity, warmth, or per­son­al­ity.

Con­course was orig­i­nally intended to be a revival of Metro, an under­rated sans serif of the the early 1930s. (Metro was also the first type­face by future type-design hero William A. Dwig­gins.)

But when I revis­ited sam­ples of Metro, I real­ized that even though there was much I still liked about it, there was just as much that seemed dated and uneven. Concourse needed to go its own way. And it did.
typography  fonts  wishlist 
december 2012 by abberdab
Matthew Butterick: Rebuilding the Typographic Society
Fabulous article by Matthew Butterick of "Typography for Lawyers" outlining the role of typography in modern society. Hint: it's has more of a role to play in the visual appeal of writing than Beatrice Ward would allow.
typography  meaning  articles 
december 2012 by abberdab
Fancy Circles with Sass
The talented folks at Zaarly put together a Sass mixin that makes styling Symbolset icons a breeze.
With this example, you can add a class (appropriately) called .fancy to a Symbolset element to create a nice circular background.
mixins  sass  circles  typography  symbolset  dev  www 
december 2012 by abberdab
Symbolset
How to use the symbolset fonts!
css  fonts  symbols  typography  dev  www 
december 2012 by abberdab
oak.is / Symbolset
Symbolsets are semantic symbol fonts. They work in modern browsers and anywhere OpenType features are supported. Our fonts map symbols to semantic keywords instead of letters, the first icon font of its kind to make this happen. The sets are scalable, flexible, and highly accessible.
typography  icons  css  opentype  semanticweb  vector  dev  www 
october 2012 by abberdab
Nice Web Type – Type Set Match
HOW TO PLAY

- Copy text from the first volley of each match
- Typeset the text however you like — as an image, in HTML/CSS, heck, print it out and take a photo
- Rebound the first volley on Dribbble* and talk about your choices
- “Like” any shots you like, and talk about why you like them
* If you don’t have a Dribbble account, that’s okay. Typeset something and show it to me. I’ll see what I can do to get you a Dribbble invite.
typesetting  competition  typography 
october 2012 by abberdab
Fonts.com Web Fonts
Includes some nicely finessed (for screen) type classics. Unfortunately, they don't handle weights as intelligently as others, this makes setting up fallback fonts + weight kind of a chore. Kind of annoying. :/
typography  webfonts  service  hosted  design  www 
october 2012 by abberdab
Responsive Measure: A jQuery plugin for responsive typography
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.
typography  measure  dev  www 
september 2012 by abberdab
« earlier      
per page:    204080120160

Copy this bookmark:





to read