Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Fonts and sizes

Featured Replies

Hi I'm very new at this but managed to get a reasonable (for me) front page, which I would like to publish soon. However, I'm very unhappy at the fonts and its sizes. Could you give me some advice as how to make them more atrarctive?

 

I am attaching a screen shot of the "problem" area.

 

Thank you

post-55270-0-19786900-1366961603_thumb.jpg

Edited by qim

First thing I would do is to add a little bit of margin at the top of the bold titles. And maybe you can take a look - google dot com/fonts/

They are easy to implement and there are some awesome fonts out there.

  • Author

Hi, Thanks. I agree with you, and have tried with little success. the boxes start moving. You mean the bold titles like "Travel Information", and "incoming Tour Operators", I guess. Could you suggest a font to the small print and to the titles, please?

 

This is my problem: there are so many I can't choose! Do you think something like Noto Sans or Roboto Condensed might look better? Should I use the same font for titel and text?

 

Sorry, but I'm really useless at this.

 

Thank you

Edited by qim

Stay away from serif fonts for content.

 

I wouldn't dive into custom fonts but stick with the basic sans-serif fonts such Arial and Verdana. I would also push the 5 location names in the bottom-right box over to the left so their consistent with the others or maybe even centre them all so that they're consistent with the bottom-left box.

  • Author

Hi, Thanks again. I've changed the family-font to Arial and the titles have changed for better, but I expected the text to change too, and it didn't..

 

Also if I try to put some padding on top the boxes move sideways... I jnow that you have to deducte from the box width/height what you add to the padding but if I put it on top I would expect the box to move downwards, not sideways!

 

Could you help? This is the css for the box "travel Information". It now looks ike the attach.

 

 

 

I can't understand why I can't move the text inside the box with the padding. If I put padding 10px 10px 5px 0 to get the text some room on the left and top, the boxes start misbehaving...

 

As for the box with the links they are already text-align:left and I don't understand why they stick to where they are. I tried text-align:center but they lose the justify left

post-55270-0-40969800-1366968404_thumb.jpg

post-55270-0-98401700-1366969060_thumb.jpg

Edited by qim

If you have it hosted somewhere, you can post the link using the following workaround:

 

www[dot]your-website[dot]com/page[dot]html

 

You cannot post the code because it likely contains links within it (think src="link_here" or href="link_here").

  • Author

I managed to post the code. It is above. The page is not hosted yet. It was but I took it out because it is embarrassing...

Edited by qim

  • Author

Well, I've managed to sort out the text padding. Now I need to address the links. I would liek to make them smaller than the heading and I am not sure if this is done directly from css or the html file.

 

Could you tell me also if you think the text ilooks better than the original above?

post-55270-0-42171300-1366975104_thumb.jpg

The text looks much better!

 

The links would be done in HTML whilst any resizing will be done in the CSS.

 

For example:

h1 {
font-size: 1em;
}

I don't agree that we should avoid serif fonts.

I think in some cases serif fonts work can work quite well - I use a combination of serif & sans serif on my website and I think they compliment one another, a lot of printed publications still make use of serif fonts.

 

It can be a bit of an art form getting them to integrate well though, and I'd agree to stick with just Sans-Serif fonts if you're a beginner as there a little easier to get looking good.

I don't agree that we should avoid serif fonts.

I think in some cases serif fonts work can work quite well - I use a combination of serif & sans serif on my website and I think they compliment one another, a lot of printed publications still make use of serif fonts.

 

It can be a bit of an art form getting them to integrate well though, and I'd agree to stick with just Sans-Serif fonts if you're a beginner as there a little easier to get looking good.

 

I only avoid them for content as I stated above as it's difficult to read, especially at smaller sizes. I still use serif fonts for some headings or other large text forms with few words.

  • Author

Ok

 

After a few changes I wonder if you could give me your honest opinion of the page. I am not looking for praise; on the contrary for constructive criticism so that I can improve the visual aspects of the page.

 

Thank you

post-55270-0-68109900-1366983648_thumb.jpg

text could use more padding

 

replace grey background with a white one

 

too many colours - you have the logo colours, then a different hue in the header and yet again a different one in the links. change the nav to white text - not so easy on the eye as it is now

 

it's a bit boxy

  • Author

Thanks

 

I've already changed the colour of the central part of the header to the blue of the logo (well near enough). Never really thought of the logo colours.

 

I'm not sure what you mean about what I sould do to the links.

post-55270-0-82015700-1366996112_thumb.jpg

Edited by qim

white links on orange background (for the navigation at the top and bottom) and use the blue from the header for the normal text links. change the greyb background to white

  • Author

Thanks dap. I guess without seeing the page online, it is difficult to see the colours. I take your point about white for background and navbar links and will experiment with that later. It hasn't been forgotten , but I want to go a bit at a time.

Now the text links: there are two sets: one in the lower right-hand side box, which is what I am mostly worried about. It is temporary until I think of something to put there, but I would like it to look a bit better, I tried the same colour as the header blue, but they become too light and then the font looks wrong to me; the links at the bottom are the normal colour for links and what you see is the 'visited' while the one in the middle hasn't been visited beacuse it is an empty link.

 

The rest of my site is laughable. The Agents page was my first attempt; the Continent pages, my second, and the front page my third. I am going to work this weekend on changing colours in the Agents page and bring the navbar down from the top to below the header in all pages.

 

Can you have a look at the site? Please, don't laugh! Apparently I am not allowed to post links. However, I think you can guess it if I tell you that after the dot is ten the other way round...

Edited by qim

  • Author

Could you please help me improve the visual aspect of the various pages. In the front page I am unhappy about the box with "Choice Destinations", as I feel the font is wrong. The other pages are terrible and a little help with the colours would help. It is too late at the moment to change the structure, but i am sure with a little help they would be more attractive. The Agents page has silly photos that i would like to change for something more professional and in tune with the reason of the page: Incoming Tourist Agencies"

 

Thank you

 

PS meanwhile I reversed the colours of the frontpage for the others, but maybe I should have copied them instead.. What do you think?

post-55270-0-38278600-1367058509_thumb.jpg

post-55270-0-64597900-1367066065_thumb.jpg

post-55270-0-09595800-1367066074_thumb.jpg

Edited by qim

To me the colours on the site look fine, wouldn't be my choice but they look fine. Maybe you could change the blue to a darker orange, just to offset the contrast a little bit.

  • Author

Thank you Abeyta

 

In fact, things have moved on a bit and the "finished" product is at pintotours followed by dot and ten the other way round..... I would appreciate your comments as the site is still being developed with NO content!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.