Tag Info

Hot answers tagged

23

You might be able to find something similar in the Google Fonts directory. All you have to do is include their link in your html page's head and you can use the fonts in your CSS. PT Sans is pretty similar (compared to the rest of the list)


18

According to Wikipedia Myriad Pro is bundled with Adobe Reader not with Windows. And a quick Google search shows you can use it on the web using Typekit (with a $24.99/year subscription): http://typekit.com/fonts/myriad-pro


16

A web designer should understand how code works and what it's capable of, in the same way a print designer understands what ink on paper will look like and how paper can fold or be cut. Any designer should understand the limitations and strengths of the chosen medium. If a web designer is creating this drop-dead gorgeous site, it would behoove him or her ...


16

Do web designers need to know basic modern CSS and HTML techniques? Yes. Why or why not is this important for a well rounded web designer? I answered "yes" because you used the word basic. It is absolutely essential that web designers know basic HTML and CSS techniques, in the same way that architects must know something about physics and ...


13

Gotta disagree with everyone. Photoshop is not a tool for designing a web site. It's a tool for sketching out a web site. The web site should still be designed in the medium that it's in--which tends to be CSS, HTML and JS. That doesn't mean you don't use Photoshop. But you certainly don't have to. I'm a huge fan of not ever showing web site designs in ...


12

If your website targets the designer crowd, many of them will have the Adobe Suite installed (don't ask by what means). Kottke.org uses it without css embedding, and this is his font family rule: font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;


10

If you mean something like this: Edit: here's a way which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying :before and :after). http://jsbin.com/UtUlIFO/2/edit The important code (add your colours to this): ...


10

You could use CSS3 (keeping in mind this won't work with older versions of IE). For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle. HTML: <div id="square"></div> <div class="align"> <div id="triangle-topleft"></div> <div id="triangle-topright"></div> ...


8

I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalized template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together. However, I can't help but wonder if Bootstrap ...


8

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters: font-family: Raleway; font-weight:900; text-shadow: 0px 0px 3px #000; You can even combine more than one text-shadow to create a definite outline as well as a blur: text-shadow: 0px 0px 3px #000, ...


7

The 2 fixed columns with 1 fill column has been referred to as "The Holy Grail" of CSS layouts. Check out: http://www.alistapart.com/articles/holygrail/ The example on that page is geared for fixed gutters and variable center column, but the concept is the same.


7

The real answer to this question comes directly from asking "How does it work in the real world?" An effect like this will seem artificial and wrong if it doesn't mimic what would happen with a physical object. This is a general principle that applies to all the effects we use on websites, on paper, or in movies. A classic error in Photoshop compositing is ...


7

I used an automatic photoshop script once and worked well. The concept is : Each portion is a different image. Each portion (and so, each images) must be in the same folder w/o any other images. Run the script indicating the folder and some parameters (size, css name, etc...). The script does : Merge all images into one with the size you indicated. ...


7

Check out The League of Movable Type over at http://www.theleagueofmoveabletype.com/. All of their fonts are free, designer-created, and come with the fonts needed for @font-face usage.


7

CSS TEXT-JUSTIFY This property appears to offer a refinement on the “justify” value used in the ‘text-align’ property. Indeed, the “justify” value must be set for that property for ‘text-justify’ to have any effect. Text-justify offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification ...


7

The advantages tend to be primarily: Rapid Prototyping (ie, speed) Built-in Cross browser consistency If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework. All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...


7

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text? This would allow the font to work on basically any image also. div { position:absolute; top:250px; left:140px; width:500px; height:50px; background-color:black; z-index:0; opacity:0.5; } EXAMPLE


6

The baseline grid in web design is a need academic puzzle but mostly impractical from a hard-coded mathematical standpoint. Since CSS has no concept of a baseline for type, it's technically impossible to get baselines to match. You can come close to spacing things, but you eventually end up with something that may make sense when looking at the numbers, but ...


6

Just one thing to say: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW [EDIT] Update - OK - I concede there are some much wider characters: ؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁


6

Use method one. In providing content to the user, the physical content should be clearly distinguishable from the background - this is the figure and ground rule. The figure is the area of interest. Therefore where the golden ratio should be applied is in the ratio between the two figures (the two areas of physical content), and not applied to the ratio ...


6

** EDIT ** New Client? Absolutely - If you're pitching a design for a NEW client/site. Lay-folk generally have a hard time seeing what's in your(my) head. Wireframes, drawings, etc. don't always cut it either - scratch that - they don't cut it. I hear more, "I thought it was going to do X" from clients when all they have is a WF, or sketch than I do when ...


6

Here's my attempt at creating this using CSS. The main idea here is to use both CSS3 multiple backgrounds and gradients to create the effect - a radial transparent to semi-transparent black gradient layered over a bright pink to dark red linear gradient. The glaring omission is the lack of inset text shadow, which is CSS does not, and will probably not ...


6

Making something look raised or "pushed' is all about lighting and shadows. The human eye and brain interprets shadows as depth. So if you adjust shadows, you can give off the perceptions of depth in a specific area. For a button, adding a shadow below the element in the resting state causes the element to appear raised. If you move the shadow to the top ...


6

The description of text-decoration: underline in CSS 2.1 spec defines its effect just as underlining, without details, but browsers implement it as appearing just a little below the baseline. Thus, it often cuts descenders (and diacritic marks placed below a letter). In the CSS3 Text draft, there is the text-underline-position position, but it does not seem ...


6

What is most common? Well, some typographers will say that underlining should probably be avoided all together, and that underlining is only appropriate for use on typewriters or on hyperlinks on the web. However, I would add that creativity is about seeing opportunities to break rules in creative ways so how much you let this guide you is up to you. On ...


6

The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...


6

If it's visual representations of elements you're looking for, nothing beats Firefox's 3D view. Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools. To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such ...


6

Sure, you can use the ExtendScript Toolkit to investigate and manipulate Photoshop documents. For more info, check the documentation or search around the various PS scripting forums. Based on the script in this article, I whipped up the following script. For every text layer in a PSD file, it will print the font, font-size, and fill-color to the javascript ...


5

You have various choices: One day in the future you could use @font-face loading any font that you want (which license is free to distribution). If you use it only for titles, you could use the SIFR technique that use flash, or a simple Image Replacement technique Or you could use, like already suggested payment hosting servers for font Typekit.



Only top voted, non community-wiki answers of a minimum length are eligible