I've been using Photoshop for the last 2 years to create mockups for my sites, but the biggest problem I find with Photoshop is its terrible way of rendering text in a web-realistic way.
Is there an Adobe product that is better suited for web designing (i.e. creating mockups of sites)?
It depends on your own personal style / processes more than anything, and what you're going to do with the designs afterwards. A lot of people need photoshop because they cut slices out of it afterwards, other people who hand code every piece of css and don't use slices, images, sprites etc might find a piece of paper and a pencil just as suitable. Personally, I've long used Adobe Illustrator to create all of my web designs as I hand code everything from scratch once a clients accepted a visual proof, but with the new CSS output function in Illustrator it's even more useful! There are a lot of different tools you can use but I'll list a few of Adobe's best below:
Illustrator: As stated above, Illustrator is my personal choice and it's becoming more and more popular amongst web designers for it's rapid design style and it's outstanding new web design based features. Adobe has a great article with a video guide and some sample files here that show's you some of Illustrators best web design features.
Photoshop: Photoshop's been the Web Designers software of choice for longer than I can remember, and although it's finally started to fall behind some of it's siblings as web design has evolved over recent years, it's still got some great features and can be very useful to web designers who know how to use it. Another great article from Adobe with some of Photoshop's latest web design features can be found here.
Dreamweaver / Muse / Edge: I'm lumping these one's together because they make up the suite of WYSIWIG / Rapid Development software that's filling up Adobe's lineup of late. Edge itself is actually a combination of several software items like Edge Animate for creating web based motion graphics out of HTML/CSS/Javascript/SVG elements and Edge Reflow for creating responsive web designs on the fly. Muse is more and more becoming Adobe's flagship web design software and a lot of the key features are listed here, where as Dreamweaver is starting to be viewed as a bit heavy handed and clunky but still massively feature rich and a lot of people really love features like its built in FTP functionality. All of these software have built in use of Adobe's "Edge Web Fonts" service which allows you to bring in thousands of excellent fonts and have them served dynamically to anybody visiting sites you've created. Web Fonts alone is probably reason enough to choose any of these software tools, and it probably best solves your initial problem of type display.
Again, it depends more on your style and processes than anything (have I mentioned that already?) what features are going to appeal to you but hopefully this gives you some insight into the options available.
If you want your mockup to look like it would look in the browser, then you need to start designing in the browser.
Dreamweaver would be the one Adobe product for that, but most of us that have to write HTML/CSS/JS have given up on DW long ago. Just too many bugs and it tends to get in the way more than anything.
Otherwise, Photoshop, InDesign, Illustrator, etc...all are fine for creating mockups and will just have different pros and cons depending on your particular wants and needs.
Nothing beats the real medium (i.e. designing in HTML/CSS/JS) for accuracy. That being said, for generating web graphics, Photoshop is still my go-to app. Especially with the awesome Cut and Slice plugin. This plugin really streamlines web graphic production (no more stupid slices that you got to turn on and off over layers) and it forces you to organize your Photoshop layers in a meaningful way. The plugin only works in Photoshop CS 6 and Photoshop CC pre-2014 (it uses Flash to create the plugin UI which I believe is not supported in CC-2014).
As for fonts, make sure you clients understand that Photoshop comps are just that - compositions that give them a general feel for what the site will look like. These comps can not be 100% accurate because the web view is dictated by the user's browser and user choices made to the settings of the browser, which may include overriding your CSS styles with their own. A photoshop comp is not a web browser rendering HTML/CSS/JS.
Web design is really about providing a guideline (through a CSS stylesheet) which tells a browser, "We recommend rendering the page this way." But you can't force a user to view it that way.
Now if you need to provide a quick style snippet, natively rendered in a web browser, for your clients, consider building out a quick HTML styleguide. See this resource for a possible starting point to use.
Short Answer :
Try Adobe Firework. 100% fast performing product for layout design.
