So let's dive into this card now.
And as I said, I want to get started with having a look
at some size-related topics
and also topics related to the space this card has
and the space that we have on this card itself
between the different elements.
Now, to get started,
you can see that this card is positioned in
the middle of the page here, so to say.
As you saw before, I zoomed in a bit,
but even if I zoom back to a 100% zoom level,
well, then it becomes even clearer this card has lots
of space to the left and to the right.
And now you might say, well, this makes sense
because it's only one card.
But even if the content of the page
would be a different one,
or if it would have multiple cards,
well, I wouldn't put all cards next to each other
to fill up the space from the left
to the right order of the screen, so to say.
Let me maybe zoom it in again
to make it better readable for you.
Because typically, nowadays at least,
the convention is to give the page and the content
of this page some space to the left and to the right.
So kind of keep the content centered,
even if we have very wide screens these days,
don't fill all the space you have with content.
To give you better example for this here,
because the card, well, is a kind of limited example here,
I opened Stripe here.
Stripe.com, which manages payments for you on your websites
for example, if you want to.
And there you can also see that you have lots of space
to the left, especially here in this upper part.
But if you look at the nav bar,
you see that the nav bar ends well here and there,
so lots of space to the left and to the right.
And if I scroll down,
well you can see that we have the clear center focus
of the content Stripe offers.
Same thing is true by the way for Amazon.
Not totally though,
you can see that the nav bar at Amazon.com
starts at the left and ends at the right of the screen word,
but for the entire content of the page,
let me scroll down here,
you see that this is also focused on to the center
of the screen;
therefore, one thing to keep in mind is
add some space to the left and to the right
to keep the content centered a bit enough
to load the entire screen with content.
Talking about space, if you now look at the card itself,
you can also find that spacing place an important role
to achieve the look the card has now.
If you, for example, go into our card container
and go to our h1 element here,
you see that we have a margin to the top and to the bottom
and also some padding all around the content here,
well, to have some distance to the left top
and to the right,
again, to give the content space.
You should always try
to give your content maybe even more space than needed
when starting to design your website
or the features of your website.
You can always decrease some spaces,
some margins, some padding,
but to get started, give the content as much space
as possible;
because you will see at the end it gives it a better look,
a more structured look,
and also helps to digest information
in an easier fashion.
You can also see that the following element,
the paragraph here,
has a slight top margin
which is equal to the bottom margin of the h1 element
and then we have a bigger bottom margin.
Why is this the case?
Well because, we group elements together, so to say.
The first part of this page,
so the h1 element and the following paragraph here,
are related to the monthly subscription in general
and what the subscription is all about.
So, this content kind of belongs together for the reader.
We could also added a separate container
for these elements by the way,
just a little html topic here,
but in this case we decided not to do that
and keep it the way we have it right here.
Nevertheless, with our design card
we can now bring this content more together
and establish a connection between the headline
and the corresponding text below it.
However, the card info element here
has a larger bottom margin
because the next information is not related
to the subscription in general, it is related
to the pricing of the subscription.
Therefore, if we check the price you'll see the price
also has this top margin;
and therefore, it shows us that this information
is separated from the previous one.
If we look at the paragraph below the price though,
this one here, you see that this has a smaller top margin
because this information is all about the pricing;
so, it explains how the payment works
and that in this case it is a recurring payment.
At the bottom, this element has a bigger margin again.
Why?
Well, we know it already now
because the next div, which is a container again,
holds information that provides more information
about the subscription.
So, we have the general subscription information up here,
we have the pricing information
as a second group of elements,
and then we have the third group, so to say -whoops!
This one here,
which adds more details about the subscription.
And with adding the space here,
we can group this immediately for the website visitor.
Same thing applies for the button at the bottom by the way.
As you see, this button again has more space
between the previous group of elements,
because the button is the final (the fourth part)
of this card so to say,
which will then allow the visitor
to join this monthly subscription
or to subscribe to this monthly payment model.
So, this is the space of the general website
in odds of individual elements on the website.
And this is very important to make things easily readable
for our visitors.
But when talking about spaces,
and specifically the sizing of different elements,
well, the font is of course a very important topic;
because information is typically provided in a written way,
therefore, let's dive into the fonts of this card
as a next step.