Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged Serif

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

A Beginner's Guide to Pairing Fonts | Webdesigntuts+ - 2 views

webdesign.tutsplus.com/...ginners-guide-to-pairing-fonts

fonts webdesign web design typography

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • Using multiple fonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorative and striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds by selecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe in the knowledge that they’ll compliment each other just fine.
  • What’s the Nature of my Content? When selecting fonts it’s important to consider the nature of the layout you’re dealing with. Are we talking mainly body copy? Are there multiple headings, sub-headings? Perhaps it’s a magazine layout with decks, blockquotes? When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading, don’t switch to another font for a sub-heading elsewhere. Keep a font’s purpose clear.
  • How Do I Achieve Successful Pairing? You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways – being too similar being just one.
  • ...7 more annotations...
  • The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability.
  • Pairing 2: Contrast Contrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are just some qualities to look for: Style: Take a look at any font resource site and you’ll see them categorized as Blackletter, Monospace, Script, Slab Serif etc. Fonts of different styles will often contrast. Size: Big font, little font. Say no more. Weight: Varying the weight of fonts is a common way to establish visual hierarchy. Hierarchy achieved by contrast. Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of the shoulders, the direction of the movement. Color: Not something we’re going to go into here, but color can easily determine whether two fonts work well together.
  • It’s a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Let’s look at a few, kicking off with two system fonts. That’s right, even they can work well together.
  • Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.
  • Slab serifs make very effective attention grabbers, but can be a bit pushy if you’re not careful.
  • Pairing 3: Conflict Let’s not focus too much on what doesn’t work well, we don’t want to sour the joyous combinations in the rest of this guide do we? That said, let’s just illustrate how two fonts, which are arguably too similar, can look awkward together.
  • Once you’ve concluded that you don’t like a font pairing, try to work out why and it will help you make decisions more quickly in the future.
Lyn n

Getting Started with Chrome extension - Diigo help - 0 views

help.diigo.com/...tting-started-chrome-extension

shared by Lyn n on 04 Mar 14 - No Cached
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • ...11 more annotations...
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Getting Started with Chrome extension
  • First Steps: Install Chrome extension
  • signed in, you will be prese
  • a Diigo account, you can
  • option
Vernon Fowler

Your Body Text Is Too Small - 0 views

blog.attackthefront.io/text-is-too-small-5e02d36dc902

typography font size body text web webdesign usability readability legibility

shared by Vernon Fowler on 23 Nov 16 - No Cached
  • Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.
  • Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.
  • better to optically select a font size according to near-finalized colors, or in different color scenarios
  • ...6 more annotations...
  • a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices
  • down to the eye again to optically adjust the letter-spacing and font size together
  • the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75
  • line height should also be relative to the font size as it scales up for larger displays
  • This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users
  • sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
Jochen Burkhard

20 classy free sans-serif fonts | tripwire magazine - 0 views

www.tripwiremagazine.com/...ssy-free-sans-serif-fonts.html

font free Web Design Sans-Serif

shared by Jochen Burkhard on 13 Feb 10 - Cached
  • Jochen Burkhard on 13 Feb 10
     
    20 classy free sans-serif fonts
Inspirationfeed

40 Free Fantastic Sans Serif Fonts - 0 views

inspirationfeed.com/...ree-fantastic-sans-serif-fonts

Fantastic Fonts free Sans Serif

shared by Inspirationfeed on 06 May 10 - Cached
  • Inspirationfeed on 06 May 10
     
    Boy oh boy do we have a collection for you! We have found some really amazing sans serif fonts that you should definitely add to your collection. These fonts are completely free for commercial and personal use. We hope you like them and find them useful. We would love to hear you thoughts, so please
alinakallis

Getting Started with Chrome extension - Diigo help - 0 views

help.diigo.com/...tting-started-chrome-extension

Diigo Chrome

shared by alinakallis on 11 Jul 16 - No Cached
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
ai_ar_services

Getting Started with Chrome extension - Diigo help - 0 views

help.diigo.com/...tting-started-chrome-extension

Diigo Chrome

shared by ai_ar_services on 08 Feb 22 - No Cached
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
Vernon Fowler

A design process revealed | stopdesign - 1 views

stopdesign.com/...design-process.html

NED12 design process webdesign css

shared by Vernon Fowler on 09 Sep 12 - Cached
  • I began by studying the content (text) of the existing page, making a model in my head of the document flow and hierarchy. I aggregated the sections of the page into logical groupings and assigned each a priority. I also spent time thinking about the purpose of the project, along with the ideas and concepts Dave Shea was trying to communicate when he created the Garden space and opened it up for other designers to contribute.
  • Showing off advanced CSS trickery is not the goal of this project. Instead, it attempts to demonstrate the beauty and flexibility achievable when designers grasp all the potential of CSS, using it as a tool to create a well-designed aesthetically-pleasing page which remains accessible, well-structured, and efficiently coded.
  • My Garden lists contained groupings of words and thoughts related to gardening, plants and flowers found in a garden, zen-like qualities, beauty and beautiful things, and characteristics of page design. I also created lists of all the elements, IDs, and classes used in Dave’s HTML, some of which made subtle appearances in the final design.
  • ...11 more annotations...
  • Once I exhausted the idea branching, I started drawing thumbnail sketches
  • Once I had a few rough compositions I liked, I began studying typefaces and letterforms.
  • In addition to my affinity for the letterforms, the pronounced medieval style of the headline type created a perfect contrast with the sans-serif modernity of supporting keywords and titles which I set in Helvetica.
  • My next step in the process was to research imagery which could be used as the foundation for background texture, and act as supporting visual content.
  • I tend to keep imagery confined to a particular region of the layout, or reserve it for a specific purpose. In my opinion, the overuse of photography or illustration can quickly create a crowded, chaotic design which just obscures the intention or message of the piece. Contrast is an element of design which I love to work with when creating anything visual. This comes just as much into play with use of imagery in a composition as it does within the image itself. Effectively integrating imagery into a design requires an awareness of balance and tension. Compact areas of motion and activity, countered with spaces for the eye to rest and relax.
  • When designing outside HTML and CSS, I focus on constructing the language and guidelines of the page, determining proportions, widths and heights, gutters and white space, specifying complementing typefaces, choosing relative type size and leading, and the application of color as a means of both obvious and subtle accent.
  • I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page.
  • Groups of elements were positioned in correct locations. Then I applied the necessary detail to each element, from the top of the page, down.
  • The addition of a background pattern to the left and right of the primary image was an added benefit of discovering I couldn’t position the header as I originally intended.
  • The vertical alignment wasn’t refined until after each column was already positioned on the page.
  • This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
1 - 12 of 12
Showing 20▼ items per page